`base` option does not support external URLs with the development server

[SirDavidLudwig]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

The base option currently does not support the ability to specify external URLs when serving content through the development server. This greatly limits the incorporation of Vite into other backends (Laravel, etc.) as static assets can no longer be served since the assets are served on a different port than the web server. I explored this specific problem in more depth in a separate issue by attempting to integrate Vite into a Laravel project.

As a solution suggestion, I believe that this issue would be solved best by implementing an environment variable to specify a URL base for content served specifically through the dev server. This would resolve these issues with backend compatibility and allow for the most flexability in users' dev environments.

Reproduction

I'm not sure how worthwhile a reproduction guide is for this issue, but this should give you something to compare against.

1. Create a vue-ts project using the @vitejs/app init script

npm init @vitejs/app
    # Project name: vite-static-assets
    # Select a template: vue-ts
cd vite-static-assets
npm install

2. Set base property in vite.config.ts:

export default defineConfig({
  base: "http://localhost:3000/",
  server: {
    port: 3000 // Use the same port for dev and serve
  },
  // ...
})

3. Compare the URL of the Vue logo in the inspector window between content served via npm run dev and npm run build && npm run serve. The src attribute of the <img> tag will only contain the base of http://localhost:3000/ on production builds.

System Info

• vite version: 2.0.1
• Operating System: Ubuntu 20.10
• Node version: 14.15.4
• Package manager (npm/yarn/pnpm) and version: npm

Logs (Optional if provided reproduction)

N/A

[yyx990803]

The solution is to simply configure your Laravel app to serve the assets in vite directory. I personally don't know how to do that but this should be a common feature in all backend frameworks.

There are already integrations like https://github.com/innocenzi/laravel-vite so I'm pretty sure this is not a limitation.

[SirDavidLudwig]

@yyx990803
That integration is actually where we first come across this problem. At the moment we still don't have a proper solution. While I know I'm arguing only for a single backend here (Laravel), I believe this issue will apply to many other frameworks.

The backend can be configured easily to include the CSS/Js/Ts/etc. scripts/files based on the environment with no problem. However, the problem comes in with static assets (images, fonts, etc.) included from within these types of files, where a backend will have no control over the generated URLs. For example, a CSS file in Laravel would request assets from /resources/..., where resources is a non-public folder intended for uncompiled/unprocessed assets. It seems quite hacky/silly to require a backend framework to publicly serve assets from an intentionally non-public folder only in development environments. Whether this would be done through symlinking, or providing additional middleware, this does not seem like a proper solution to the problem.

[SirDavidLudwig]

@yyx990803 Any possibility this issue could be reopened? More effort has been put into implementing workarounds in https://github.com/innocenzi/laravel-vite but the core problems still exists.

[innocenzi]

@yyx990803 I can confirm that this is an issue, and we don't have a proper solution yet. Other back-ends (Symfony, Ruby) have this issue too.

@ElMassimo has a workaround for his Ruby package, but this is mostly a hack and I think this should be handled on Vite's side. I think @SirDavidLudwig's idea of having an environment variable or configuration option would be a solid fix.

If I understand correctly, this environment variable (or configuration option) should be used there in order to handle everything properly?

EDIT: monkey-patching the return value of fileToDevUrl to prepend a BACKEND_BASE_URL seemed to work properly, but I didn't thoroughly test. I would have done a plugin, but the function is used individually by multiple plugins so this is not possible. :/

[khalwat]

I'm too experiencing this issue (not with Laravel though, with Craft CMS as a backend). As @innocenzi has mentioned, I think this is a generic problem for server-side rendered backends that I'd love to see resolved.

[SirDavidLudwig]

@khalwat I posted a workaround that seems to work pretty well for me here that might help you out (at least until it's fixed).

[khalwat]

@SirDavidLudwig I did see that... unfortunately this is a case where I can't really patch Vite itself because other people will be using the scaffolding I'm working on. Very much appreciate the pointer tho!

[SirDavidLudwig]

@khalwat I see. Well, might I also suggest looking into generating patch files using something like patch-package. With it, it will apply these patches will automatically for everyone. Just wanted to throw that out there in case it might work for your needs

[ugrupp]

Don't want to be pushy but could we at least reopen this issue? I'm trying to get Vite working with Craft, too, and this is the biggest blocker right now.

[khalwat]

Agree, would love to see this re-opened, I referenced it here: https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets

...and it is still an issue, at least imo.

[tonychuuy]

I prefer a built-in solution, but for now I'm using a proxy as a work around, since I'm using docker for my backend development this is really easy, of course you can apply a similar fix to your needs.

# /etc/nginx/conf.d/default.conf
location ~* \.(png|jpe?g|gif|svg|ico|mp4)$ {
        proxy_pass https://host.docker.internal:${VITE_SERVER_PORT};
}