Backend integration : can't find assets

[WaningJupiter]

Hello,
I'm using express.js as backend and vite 8 for serving frontend assets (css, js, fonts, etc)
basing on the document : https://vite.dev/guide/backend-integration#backend-integration
When the input field is set as this :
vite.config.ts

export default defineConfig({
  input: {
      'entry-js': '/src/assets/entry-js.ts',
  },

The doc seems to imply that we can insert the assets inside a html or a tempate file using relative url :

<script type='module' src='http://localhost:5173/entry-js.ts'></script>

It doesn't work, instead, I must put the src as so to find asset :

<script type='module' src='http://localhost:5173/src/assets/entry-js.ts'></script>

Is this normal ? Thanks for you help

[nicholas-greenwood]

yes, that's normal. in dev, the url follows the file's path from vite's root, so yours is /src/assets/entry-js.ts

the docs use /main.js because that file is at the project root. the entry-js key in input names the build entry, but doesn't create /entry-js.ts in dev

[WaningJupiter]

Thanks, that makes things clear. :⁠-⁠)

[kevinjosh10]

Hi @WaningJupiter! Yes, this behavior is completely normal. Here is why and how the backend integration pattern works:

---

Why /entry-js.ts Fails in Development

• In Vite development mode, Vite acts as a native ESM dev server. It does not compile or bundle files into virtual root paths.
• Assets must be requested using their actual project file path relative to the Vite project root:

  <script type="module" src="http://localhost:5173/src/assets/entry-js.ts"></script>

• The input configuration in vite.config.ts is strictly used by Rollup during production builds (vite build) to define entry points; it has no effect on URL rewriting during development.

---

Production vs. Development Template Pattern

In an Express + Vite integration, handle development and production paths dynamically:

const isProd = process.env.NODE_ENV === 'production';

app.get('/', (req, res) => {
  let scriptSrc;
  if (!isProd) {
    // Development: point directly to the Vite dev server
    scriptSrc = 'http://localhost:5173/src/assets/entry-js.ts';
  } else {
    // Production: read the hashed filename from dist/.vite/manifest.json
    const manifest = require('./dist/.vite/manifest.json');
    scriptSrc = '/' + manifest['src/assets/entry-js.ts'].file;
  }

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        ${!isProd ? '<script type="module" src="http://localhost:5173/@vite/client"></script>' : ''}
        <script type="module" src="${scriptSrc}"></script>
      </head>
      <body>...</body>
    </html>
  `);
});