Use base path for assets during development

[arnoson]

Is your feature request related to a problem? Please describe.
When using vite with a traditional backend, it is hard to get the assets right during development. So for example my php site is running under my-app.test and vite is running under localhost:3000. To access my vite assets folder (localhost:3000/assets) I have to create a symlink in my php development server.

Describe the solution you'd like
It would be great If I could specify a base: 'http://localhost:3000/' during development. So vite will load all my assets from vite's dev server.

Describe alternatives you've considered
Another way would be to add an option to explicitly load all assets from vite's dev server instead of using relative paths.

server: { useFullPath: true }

[yyx990803]

I don't think this would be ideal since it won't cover plain HTML that references assets with absolute paths. I don't know how your php server handles static file serving but adding a directory to serve static assets from shouldn't be a major issue - or at least not worth the trouble for Vite to add a dedicated option for it.

[bobbyrenwick]

@yyx990803 with a traditional backend, how do you handle the fact that when you import a static file, it'll import with a reference that only works when the HTML is served from the same host as the asset?

For example, if you had something like import icon from "/@fs/path/to/asset/icon.svg?import and that file has export default "/@fs/path/to/asset/icon.svg". If you then render <img src={icon} /> in React then it'll try to fetch /@fs/path/to/asset/icon.svg from the traditional backend, rather than from the vite server.

I reached to base to try to add http://localhost:3000 to the asset URLs but it seems that doesn't do anything during development.

[yyx990803]

Your main server should have some sort of mechanism to serve static files from an arbitrary directory at its root, no?

[bobbyrenwick]

@yyx990803 yes I suppose so, it's just running in docker with the code mounted at a different root to the root that vite is going to pick up.

I suppose in the python backend I could have a dev only route that determines which bit of the file path to remove in order to get to a file path that makes sense for docker and have the static file served directly from there.

If this is a use case that won't be handled by vite then perhaps it'd be good to make a note about this in the docs for traditional backends. I can make a PR if you like?

[yyx990803]

The docs already says:

Also make sure the server is configured to serve static assets in the Vite working directory, otherwise assets such as images won't be loaded properly.

[bobbyrenwick]

@yyx990803 how right you are! Thanks for the pointers 👍

[olemarius]

@arnoson maybe my rollup plugin works for you as well? See #2394

[arnoson]

@olemarius that looks great, thanks for sharing!

[pjoulot]

The plugin of @olemarius is life savier! Thank you so much, works like a charm.

Not my case yet, but if you have 2 different react apps built with vite and embed in the same website, then I guess you have 2 assets folders to make available through your server configuration and if you have 2 files with the same name then you have a conflict. I don't think the server configuration is a valid solution.