Required modification for single-spa

[webJose]

Hello everyone,

I am experimenting with Vite and single-spa, and it seems that I have reached an impass when trying to encapsulate the single-spa configuration in a Vite plug-in: The base option doesn't work as expected when running npm run dev (serving). You see, the base needs to be a full URL, but the full URL is getting stripped down to just /.

Browsing the code, I see that the resolveBaseUrl() function in config.ts, line 899, will reduce the full URL to a relative URL if one of two conditions happen: Vite is not running in build mode, or the base URL is not an external URL, which is defined by a regular expression that detects the presence of http:// or https:// in the value of base.

I suppose that, under "normal" usage, serve has little use for the domain part in the base configuration property, but it so happens that it is significant in the context of single-spa: If the full URL is not persisted, assets are not properly served when your single-spa microservice is being tested using npm run dev.

So I wonder if I could spark a discussion around enhancing Vite to support the single-spa scenario.

Cheers!

[webJose]

Hello, everyone. Let me know what I should include here to spark your interest. single-spa is a great library and I bet more and more people would like to be able to develop using it without having to drop the incredible Vite just because of it.

I am thinking about the possibility of changing base to:

base: string | { url: string, alwaysPreserve: boolean }

This way it is easy to backwards compatible while single-spa'ers can opt in to the desired functionality.

[webJose]

I browsed the Vite code a bit more and realized my original thought wouldn't work: The base middleware uses the base and is always expected to be a relative path. Since the single-spa requirement only needs the asset URL's to be re-written with the path, but the base middleware should continue to receive a relative path, I think the modification should be done in the resolved configuration: Add a new property, say, relativeBase. This will be consumed by the middleware, while the rest of Vite would receive the full base, as if it were being built.

Actually, since only the middleware needs this, maybe there's no need to have it in the resolved configuration object. Maybe the middleware, upon initialization, can calculate the relative base from a resolved base that no longer converts external (full) URL's to relative URL's.

[webJose]

Scratch both ideas above. I opened issue #14000 with what I think would be the correct process.

[R-Ram95]

I came across this issue as well but was able to fix it using the server.origin property in the Vite config of the MFE. See this Stack Overflow post. Note, you only need to use the server.origin property and specify the base url of your MFE (http://localhost:<port>)

[webJose]

Thank you! This is most helpful. With your contribution, I will roll a new version out of vite-plugin-single-spa. I have tested it and indeed solves the problem.

[webJose]

The solution, provided by R-Ram95: Configure server.origin.

[sourceful-debarshi]

@webJose Could you share your complete vite.config.ts ?

[webJose]

Hello. Unsure what you are after. If you want to make a single-spa micro-frontend or root config project based on a Vite + XXX project, use my plug-in vite-plugin-single-spa. Does everything for you.

[sourceful-debarshi]

@webJose I am trying to serve the tsx files while running the dev server. But cannot seem to achieve the same.

[webJose]

"cannot" how, exactly? Error messages or something else? I could try to help you out in my free time if you open a discussion here.