What is the role of `index.html` in a Vite project?

beginner

Re-explain

index.html is the entry point of a Vite application. Vite treats it as source code and part of the module graph, the map of which files import which. That is why it lives in the project root, not in a public folder.

Vite uses index.html like this:

It is the page the dev server starts from.
Its <script type="module"> tag tells Vite where your JavaScript starts.
Vite processes the HTML and injects the assets it needs.
In development, Vite serves the file directly.
During vite build, Vite injects the CSS links and updates the script paths.

<!DOCTYPE html>
<html>
<head>
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the Vite & Webpack cheatsheet.

← Back to all Vite & Webpack questions

Pro · $10/mo

74 of 89 Vite & Webpack answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →