Vite Project Structure: index.html, main.tsx, and Config

Scaffolding a project with the React template produces a small, predictable set of files: index.html at the project root, a typed vite.config.ts, a src/ folder holding application code, and a public/ folder for static assets served without processing.

Unlike older tools that treated the HTML template as a static file injected by the build process, Vite treats the root index.html as part of the actual module graph, containing a direct <script type="module"> reference to the app's entry file that Vite processes like any other source file.

src/main.tsx is the one place where React is manually attached to the DOM: it imports the root App component and calls createRoot on the #root element referenced in index.html. Everything else in the application is reached through component composition from that single mount point.

Files in public/ are copied to the build output unprocessed, at a fixed, predictable URL — appropriate for things like favicon.ico or robots.txt. Files inside src/, including images, are treated as modules: Vite processes, optimizes, and gives them content-hashed filenames as part of the production build.

vite.config.ts registers plugins like @vitejs/plugin-react, configures dev server behavior, defines path aliases, and tunes production build settings — all in a single typed file, considerably smaller and easier to reason about than a typical multi-file legacy bundler configuration.

The Anatomy of a Vite React Project. Running npm create vite@latest with the React template scaffolds a small, predictable set of files: index.html at the project root, a vite.config.ts, a src/ folder with your app code, and a public/ folder for static assets. Understanding what each piece does removes the mystery from the build process.

index.html Is a Real Entry Point. Unlike older tools where public/index.html was a static template injected with a script tag by the build process, Vite treats index.html at the project root as an actual part of the module graph. It contains a <script type="module" src="/src/main.tsx"> tag directly, and Vite processes it like any other source file.

In a Vite project, how does index.html relate to your React app's entry point?

• →It directly references main.tsx via a module script tag
• →Vite auto-injects an invisible script the developer never sees

main.tsx: The Bootstrap File. src/main.tsx is where your React app actually mounts. It imports the root App component and calls createRoot to attach it to the #root element defined in index.html. This is the one place in the whole app where React is manually wired into the DOM — everything else is just component composition from here.

public/ vs. src/assets. The public/ folder holds files copied as-is to the output root, unprocessed and unhashed — good for a favicon.ico or robots.txt that needs a fixed URL. Anything inside src/, including images, is treated as a module: Vite processes it, optimizes it, and gives it a content-hashed filename in the production build.

You need a favicon accessible at a guaranteed, unchanging URL like /favicon.ico. Where should the file live?

• →In the public/ folder
• →In src/assets, imported as a module

vite.config.ts: The Control Center. vite.config.ts is where you register plugins (like @vitejs/plugin-react), configure the dev server, set up path aliases, and tune the production build. It's a single, typed configuration file — far smaller and easier to reason about than a typical multi-file webpack setup.

Mastery Achieved. You now understand a Vite React project's anatomy: index.html as a real entry point, main.tsx as the single DOM mount location, the public/ vs. src/assets distinction, and vite.config.ts as the central configuration file. Next, you'll learn how to safely manage environment variables across dev, staging, and production.