Comprehension of BASE_URL usage for CSS

[quentin-desbin]

Hi,

(Coming back from a long time)

I have a question concerning the CSS algorithm and the usage of import.meta.env.BASE_URL but maybe it's due to my incomprehension of something.

Imagine that we have a root single-spa appplication (with the plugin setup as root) hosted on : root.domain.com

If we want to have myApp under root.domain.com/myApp that loads the SSPA from myapp.domain.com/main.js, in this case the BASE_URL of myApp is set-up to "" and having a CSS accessible from myapp.domain.com/assets/cssFile.css.

Accessing to root.domain.com/myApp will correctly load the main.js but the CSS algorithm when building myApp will use BASE_URL + cssFile.css, in case of empty BASE_URL, the plugin will create a <link href="cssFile.css">, that will finally try to load root.domain.com/cssFile.css which doesn't exists.

One solution is to set the BASE_URL of myApp to myapp.domain.com when building for production, but I think it's not a good practice.

Other solution should be to use import.meta.url instead of BASE_URL in the plugin ? (I tested by editing the source code of css-helpers.js and forcing usage of import.meta.url when building the final URL before loading the CSS and it worked)

Maybe I missunderstanding something or maybe found an issue, feel free to discuss

Thanks !

[quentin-desbin]

(Totally related to #21 I think)

[webJose]

One solution is to set the BASE_URL of myApp to myapp.domain.com when building for production, but I think it's not a good practice.

Why do you think it is bad practice? Just set the base and the URL's will work. What I see as being potentially bad practice is separating the bundled JS from the produced CSS. Why do you do this? Are you bundling, then copying the JS files to one place and then the CSS to another place? Why all this?

[quentin-desbin]

For me the BASE_URL is useful to specify if the website will be served at root or at a subfolder but never needed to know the final complete public URL (I mean with the domain), in ideal world build phase is totally independent about the deploy phase, and you should be able to build an app with vite once and deploy wherever you want.

Looking at docs about vue and vite doesn't says you should put your final URL.

Maybe the plugin can allows an option to use BASE_URL or import.meta.url to be relative ?

[webJose]

There's no need to add this functionality to this plug-in when the problem is resolved by using Vite's base option.

[quentin-desbin]

That means you maintains that BASE_URL should contains the final complete URI of your app/website when building ?

[webJose]

Yes, just like the documentation of single-spa states it should.

[quentin-desbin]

Please send me this part of the documentation, as I said at my first post maybe it's just misunderstanding of mine ;)