In vite, is there a way to update the root html name from index.html

Question

I'm trying to update an existing project to vite but i read in the docs Vite expects an index.html file to work from. Is there anyway to specify another file name from which vite should build? in my case main.html

Answer 1

The entry point is configured in build.rollupOptions.input:

import { defineConfig } from 'vite'
export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        app: './index.html', // default
      },
    },
  },
})

You can change that to main.html, as shown below. When serving the app, you'll have to manually navigate to /main.html, but you could configure server.open to open that file automatically:

import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        app: './main.html',
      },
    },
  },
  server: {
    open: '/main.html',
  },
})

demo

Answer 2

If you're trying to change not just the name of the root HTML page but also the path to it, changing build or server options won't help. For example, if you want to load <project root>/src/main.html instead of <project root>/index.html, you can access it at http://localhost:3000/src/main.html, but not at simply localhost:3000.

To serve files from a different path, you'll need to set root in the config file. Note that you'll also need to define other paths relative to this new root, like dist. Otherwise, the packaged files will be output to /src/dist.

A more complete config file that loads the HTML file from /src looks like this:

import path from "node:path";
import process from "node:process";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: "main.html",
  },
  root: "src",
  publicDir: "../public",
  build: {
    outDir: "../dist"
  },
  resolve: {
    alias: { "/src": path.resolve(process.cwd(), "src") }
  },
});

Answer 3

For anyone trying to serve an index.html file that's somewhere deep in your source files, but wants the dev server to actually serve this on /, you can do it with a vite plugin like this, in your vite.config:

export default defineConfig({
  plugins: [
    vue(),
    {
      name: "deep-index",
      configureServer(server) {
        server.middlewares.use(
          (req, res, next) => {
            if (req.url === '/') {
              req.url = '/some/path/to/your/index.html';
            }
            next();
          }
        )
      }
    }
  ]
})

Answer 4

When developing an app with Vite, index.html is the entry point. You can adjust it by setting build.rollupOptions.input to ./main.html.

In Library Mode, the entry point is the one specified by build.lib.entry rather than index.html. In this case, the index.html demo page is only relevant for the dev server, which will automatically transform any files ending in .html, so you simply need to open http://localhost:3000/main.html, without adjusting the config. Setting build.rollupOptions.input in library mode will override the entry point specified by build.lib.entry and bundle the demo page code as part of the library, along with breaking the global UMD export.

Answer 5

Use Vite's transformIndexHtml() to swap HTML content

Here's a way to achieve the same high-level goal.

For my use-case, for temporary reasons a project needed two output versions: 1. a Vue app, 2. a plain JS app. Swapping index.html content was the most straightforward way to achieve that, without worrying about paths, routes, etc.

Vite docs: transformIndexHTML()

1. Have multiple html source files

At least one index.html is required; make your own variations of it.

index.html
index_type1.html
index_type2.html
whatever.html
etc

2. Make an HTML-replacement plugin in your vite.config

This will overwrite index.html with whatever source file you choose. It happens before other build steps, and is basically the equivalent of you manually renaming files before running build.

vite.config.js

import fs from 'fs/promises'

export default defineConfig({

    plugins: [
      // ...

      {
        name: 'my-plugin-for-index-html-build-replacement',
        transformIndexHtml: {
          enforce: 'pre', // Tells Vite to run this before other processes
          async transform() {

            // Do some logic; whatever you want
            if (env.MY_ENV_VARIABLE == 'myType2') {

              // Grab new HTML content to place into index.html
              return await fs.readFile('./index_type2.html', 'utf8')
            }
          }
        }
      }

      // ...
    ]

})