Asset Not Loaded When Integrating With Existing Backend

[Zehua-Chen]

Describe the bug

When I import an asset

import audio from "./do.mp3";

audio resolves to something like base/**/do.mp3 in development mode. I am integrating Vite into an existing backend. The backend is running at localhost:4000 and vite is running at localhost:3000. So during development, the existing backend at localhost:4000 does not yet have base/**/do.mp3.

For production though, it works fine, vite build will produce the files that the existing backend at localhost:4000 will be able to serve

I think that this should be noted in the docs or maybe audio can resolve to something like localhost:3000/base/**/do.mp3 instead

Reproduction

https://stackblitz.com/edit/vitejs-vite-kkwd9h?file=src/main.js

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 179.39 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Safari: 15.4
  npmPackages:
    vite: ^2.9.1 => 2.9.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

It is mentioned here. Or do you have a different situation?

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.
https://vitejs.dev/guide/backend-integration.html#:~:text=Also%20make%20sure%20the%20server%20is%20configured%20to%20serve%20static%20assets%20in%20the%20Vite%20working%20directory%2C%20otherwise%20assets%20such%20as%20images%20won%27t%20be%20loaded%20properly.

[Zehua-Chen]

I am sorry, I think I might have misunderstood the term "working directory".

I understood it as Vite and my own server should start in the same working directory, whereas I think what the documentation is saying is I need to redirect static file requests to vite.

It's all fixed now!

[Zehua-Chen]

Do you think it's a good idea for me to open a pull request and change the wording a bit?

[sapphi-red]

Yes it can be solved with proxying static file requests to vite. IIUC it can also be solved with serving static files from the custom backend server.

It would be great to have a PR.

[jessarcher]

I'm also running into this issue with a Laravel backend server.

Would it be reasonable in dev mode for Vite to include the full URL, instead of just the path? E.g. http://localhost:3000/resources/images/logo.png instead of /resources/images/logo.png.

This would avoid the need to proxy or serve the project root. Laravel is already serving a public subdirectory, and it can contain static assets that Vite doesn't know about so it's not trivial to have Laravel conditionally proxy, redirect, or serve Vite assets only in dev.

I have tried specifying http://localhost:3000 as the base option in Vite during dev, but Vite strips out the protocol, host, and port in dev mode.

[innocenzi]

I think you are just missing server.origin. With the proper configuration, I cannot reproduce the issue:

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    origin: 'http://localhost:4000',
  },
})

Reproduction: https://stackblitz.com/edit/vitejs-vite-4qrrx3?file=vite.config.ts
Related PR: #5104

[Zehua-Chen]

I have opened a PR at #8103 to incorporate the discussion in this issue.

[jessarcher]

I don't think server.origin fixes it for me.

Hopefully this explains the issue I'm trying to solve:

Example Laravel project structure:

public/ <-- nginx is serving this directory
  images/
    taylor.jpg
resources/
  images/
    abigail.jpg
  js/
    app.js
    Welcome.vue

Example Vite config:

{
    base: command === 'build' ? 'build' : '',
    publicDir: false,
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
           input: 'resources/js/app.js'
        }
    }
}

Welcome.vue:

<!--
    Vite should leave absolute paths as-is so nginx can serve them from the
    public directory.

    The PR at https://github.com/vitejs/vite/pull/6779 hopefully addresses this
    but I haven't tested yet.
-->
<img src="/images/taylor.jpg" />

<!--
    Vite resolves this from disk and rewrites the URL.

    In build mode, the file is versioned in the outDir (e.g. public/build) and
    the URL is correctly rewritten as `/build/assets/abigail.123456.js` which
    nginx can serve.

    In serve mode, Vite serves the file at
    `http://localhost:3000/images/abigail.jpg` but the URL is only rewritten as
    `/images/abigail.jpg`, so the browser makes the request to the backend
    server where the file does not exist publicly. Setting `server.origin` to
    the backend server would only make this unwanted behaviour explicit.
    Ideally, this would be rewritten to include the full URL to the Vite server
    (`http://localhost:3000/images/abigail.jpg`).
-->
<img src="../images/abigail.jpg" />