Why is index.html not in src?

[AndreKR]

There is plenty of reasoning why index.html is not in public (for example here in the official docs) but there isn't any explanation why it isn't in src. @yyx990803 even explicitly says here:

In vite, index.html is part of your source code.

So then why isn't it in src?

Especially since nowadays the repository root is usually used for config files (.editorconfig, vite.config.ts, etc.) which index.html is arguably not.

[azay-ru]

Add to vite.config.js and move index.html and other project files to /src

root: "src",
build: {
    outDir: '../dist'
}

[KokoDoko]

When building, this results in the error cannot empty dist directory because it is not in the project root

[tilleps]

root: "src",
build: {
outDir: '../dist'
}

You will need to set the emptyOutDir option to true, since now the ../dist folder is outside of root.

root: "src",
build: {
    outDir: '../dist',
    emptyOutDir: true,
}

[sou-long]

Wouldn't that also move public (and potentially other stuff that depends on root) into src?

[tilleps]

Yes, so you'll probably want to update the other values also like publicDir and envDir

[danon]

If you do that, tests for vitest stops running. You'd need to move test/ folder into src/test/.

[chenxch]

index.html and Project Root
Maybe it explains all this.

[AndreKR]

Which part are you referring to specifically?

[chenxch]

during development Vite is a server, and index.html is the entry point to your application.
As a service access entry, it may be more reasonable to be in the root directory.

[miftawidaya]

So, does Vite as a server not have the ability to determine the entry point location? If not, why can't the Vite server do it?

GPT-4 answer:
Actually, Vite as a server does have the capability to specify index.html as the entry point of your application during the development phase. Therefore, the statement that Vite lacks the ability to determine the entry point location is incorrect. Vite is designed to simplify the development process, and using index.html as the entry point is part of that design.

So, can I use index.html not at the root?

GPT-4 answer:
Yes, you can configure Vite to use src/index.html as the entry point instead of the root index.html. You'll need to modify the Vite configuration file (usually vite.config.js) to adjust the entry point location.

Here's a sample code configuration:

// vite.config.js
export default {
  root: './',
  build: {
    rollupOptions: {
      input: 'src/index.html',
    },
  },
}

With this configuration, Vite will use src/index.html as the entry point for your application.

[fredmenez]

@miftawidaya Did you try what ChatGPT asserted ? It seems not.

The following scenario fails :

npm create vite@4.4 vite_with_index_in_src -- --template vanilla
cd vite_with_index_in_src
npm install

cat << 'EOF' > vite.config.js
export default {
  root: './',
  build: {
    rollupOptions: {
      input: 'src/index.html',
    },
  },
}
EOF

mkdir src
mv index.html src

npm run dev

➡️ Open browser at port displayed by the vite CLI (5173 by default) and notice the blank page with 404 error

[anantakrishna]

Perhaps because the suggestion is about the build phase. Though for the dev server, it still takes index.html from the root. I guess one would need to set up server.proxy config in order for this to work.

[yejimeiming]

import path from 'path'

export default {
  root: './',
  build: {
    rollupOptions: {
-     input: 'src/index.html',
+     input: path.join(__dirname, 'src/index.html'),
    },
  },
}

I try to use absolute path of input, it's worked!