DEV Community

Saad Shakil
Saad Shakil

Posted on

1

Understanding Vite’s File Structure: Why index.html Belongs at the Root

When working with Vite, a common gotcha is the location of the index.html file. Unlike traditional build tools like Webpack, Vite requires your index.html to reside in the project root directory, not in a public directory.

What happens when index.html is in public? You get HTTP ERROR 404, indicative of a running server but the resource not found:

This localhost page can’t be found
No webpage was found for the web address: http://localhost:5173/
HTTP ERROR 404
Enter fullscreen mode Exit fullscreen mode

Why Does Vite Require This?

Vite uses index.html as an entry point to optimize and bundle your project. Placing it at the root allows Vite to:
• Detect and handle linked assets (e.g., JS, CSS) efficiently.
• Inline scripts and styles directly during development.
• Provide accurate paths for module resolution.

The Correct Structure

Here’s the expected structure for a basic Vite project:

my-project/
├── index.html      // Root-level entry point
├── src/            // Source files (components, styles, etc.)
│   └── main.js
├── public/         // Static assets (not processed by Vite)
│   └── favicon.ico
└── vite.config.js
Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay