Backend Integration

If you want to serve the HTML using a traditional backend (e.g. Rails, Laravel) but use Vite for serving assets, check for existing integrations listed in Awesome Vite.

Or you can follow these steps to configure it manually:

  1. In your Vite config, configure the entry and enable build manifest:

    1. // vite.config.js
    2. export default {
    3.   build: {
    4.     // generate manifest.json in outDir
    5.     manifest: true,
    6.     rollupOptions: {
    7.       // overwrite default .html entry
    8.       input: '/path/to/main.js'
    9.     }
    10.   }
    11. }

    Also remember to add the dynamic import polyfill to your entry, since it will no longer be auto-injected:

    1. // add the beginning of your app entry
    2. import 'vite/dynamic-import-polyfill'

  2. For development, inject the following in your server’s HTML template (substitute http://localhost:3000 with the local URL Vite is running at):

    1. <!-- if development -->
    2. <script type="module" src="http://localhost:3000/@vite/client"></script>
    3. <script type="module" src="http://localhost:3000/main.js"></script>

    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.

    Note if you are using React with @vitejs/plugin-react-refresh, you’ll also need to add this before the above scripts, since the plugin is not able to modify the HTML you are serving:

    1. <script type="module">
    2.   import RefreshRuntime from 'http://localhost:3000/@react-refresh'
    3.   RefreshRuntime.injectIntoGlobalHook(window)
    4.   window.$RefreshReg$ = () => {}
    5.   window.$RefreshSig$ = () => (type) => type
    6.   window.__vite_plugin_react_preamble_installed__ = true
    7. </script>

  3. For production: after running vite build, a manifest.json file will be generated alongside other asset files. An example manifest file looks like this:

    1. {
    2.   "main.js": {
    3.     "file": "assets/main.4889e940.js",
    4.     "src": "main.js",
    5.     "isEntry": true,
    6.     "dynamicImports": ["views/foo.js"],
    7.     "css": ["assets/main.b82dbe22.css"],
    8.     "assets": ["assets/asset.0ab0f9cd.png"]
    9.   },
    10.   "views/foo.js": {
    11.     "file": "assets/foo.869aea0d.js",
    12.     "src": "views/foo.js",
    13.     "isDynamicEntry": true,
    14.     "imports": ["_shared.83069a53.js"]
    15.   },
    16.   "_shared.83069a53.js": {
    17.     "file": "assets/shared.83069a53.js"
    18.   }
    19. }
    • The manifest has a Record<name, chunk> structure
    • For entry or dynamic entry chunks, the key is the relative src path from project root.
    • For non entry chunks, the key is the base name of the generated file prefixed with _.
    • Chunks will contain information on its static and dynamic imports (both are keys that maps to the corresponding chunk in the manifest), and also its corresponding CSS and asset files (if any).

    You can use this file to render links or preload directives with hashed filenames (note: the syntax here is for explanation only, substitute with your server templating language):

    1. <!-- if production -->
    2. <link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
    3. <script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>