Skip to main content

React App with Vite: Setup & First Steps (Part 1)

Vite is a next-generation build tool that scaffolds React projects with near-instant startup times. This guide shows you how to create your first React app using npm create vite@latest my-react-app -- --template react, understand the generated project structure, and run the development server. By the end, you'll have a working React application ready to build on.

Key Takeaways​

  • Vite replaces Create React App for faster development: instant server start (vs. 30+ seconds with Webpack) and HMR in milliseconds
  • Scaffold a React project with npm create vite@latest <name> -- --template react
  • Run npm install then npm run dev to start the development server on http://localhost:5173
  • Understand the core structure: src/ for code, public/ for static assets, index.html as entry point

Why Vite? The Modern Build Tool​

For many years, Create React App (CRA) was the standard for scaffolding React projects. It abstracted complex build tools like Webpack and Babel. However, as projects grew, CRA's startup times (30–60+ seconds) and hot module replacement (HMR) delays became pain points.

Vite (pronounced "veet," French for "quick"), created by Evan You (Vue.js founder), solves this by leveraging native ES Modules (ESM) in modern browsers. During development, Vite serves your modules on demand without bundling everything upfront—yielding near-instant server starts.

Key Advantages of Vite Over Traditional Bundlers​

  1. Instant Server Start

    • Webpack/CRA: Bundle the entire app before serving (30–60+ seconds on large projects).
    • Vite: Serves native ESM modules directly to the browser. Your dev server starts in ~100–500ms, regardless of project size.

  2. Lightning-Fast HMR

    • Webpack: Re-bundles parts of the app on code change (2–5 second delay for large projects).
    • Vite: Invalidates only the changed module, with HMR updates in 100–300ms.

  3. Production Optimization

    • Vite uses Rollup under the hood for production builds, delivering highly minified, tree-shaken bundles.

  4. Zero Configuration

    • Sensible defaults out of the box; most projects need no vite.config.js tweaks.

  5. Future-Proof Standards

    • Built on native ESM, aligning with browser standards (all modern browsers support ESM since 2018).

According to the Vite team benchmarks (2026), Vite dev server startup is 20–50× faster than Webpack-based setups on medium-to-large projects.

How to Scaffold Your First React Project with Vite​

The npm create vite@latest Command​

Open your terminal and navigate to the directory where you want your project. Run:

npm create vite@latest my-react-app -- --template react

Breaking down the command:

  • npm create: Scaffolds a project using a "create" package without installing it globally.
  • vite@latest: Uses the latest stable version of the create-vite package.
  • my-react-app: Your project directory name. Replace with anything (e.g., todo-list, portfolio).
  • --: Signals that following arguments are for create-vite, not npm create.
  • --template react: Tells Vite to use the React template. Vite also supports vanilla, vue, preact, svelte, and react-ts.

Using Yarn instead:

yarn create vite my-react-app --template react

Vite will create the project folder and scaffolding in seconds.

Install Dependencies and Start the Server​

After scaffolding, navigate into your project and install dependencies:

cd my-react-app
npm install

Then start the development server:

npm run dev

Your browser should open to http://localhost:5173 automatically, showing the default Vite + React "Hello World" page with the React logo and a counter.

Understanding Your Project Structure​

Vite generates a clean, modular folder layout:

my-react-app/
├── node_modules/          # All dependencies (installed via npm install)
├── public/                # Static assets served as-is
│   └── vite.svg
├── src/                   # Your source code lives here
│   ├── assets/            # Images, icons, etc.
│   │   └── react.svg
│   ├── App.jsx            # Main React component
│   ├── App.css            # Component styles (optional)
│   ├── index.css          # Global styles
│   └── main.jsx           # Entry point (renders App into the DOM)
├── .eslintrc.cjs          # ESLint config for code linting
├── .gitignore             # Tells Git which files to ignore
├── index.html             # HTML entry point for your app
├── package.json           # Project metadata and dependencies
├── package-lock.json      # Locks exact versions (auto-generated)
└── vite.config.js         # Vite configuration (optional)

Key directories explained:

  • src/: Where you write React components, styles, and logic. This is where 90% of your work happens.
  • public/: For static assets that Vite serves unchanged (favicons, robots.txt, etc.).
  • index.html: Unlike traditional bundlers, Vite treats this as a source file. Your React app "mounts" into a <div id="root"></div> in this file.
  • package.json: Defines your project name, version, scripts (npm run dev, npm run build), and dependencies.
  • vite.config.js: Optional file to customize Vite behavior (plugins, aliases, build options).

Running Your First Development Session​

Once npm run dev is running, you can edit your React files and see changes instantly in the browser. For example, open src/App.jsx and change the text in the JSX—your browser should refresh in milliseconds.

npm Scripts Explained​

Your package.json includes these useful scripts:

npm run dev      # Start dev server (hot-reload enabled)
npm run build    # Create optimized production bundle
npm run preview  # Preview the production build locally
npm run lint     # Run ESLint to check code quality

Frequently Asked Questions​

What is the difference between Vite and Create React App?​

Vite uses native ES Modules for instant development server startup (100–500ms) and millisecond-level hot reloads, while Create React App uses Webpack and takes 30–60+ seconds to start on large projects. Vite is now the recommended tool for new React projects; Create React App is maintained but no longer the default choice.

Do I need to understand Vite config to get started?​

No. Vite works out of the box with npm create vite. You only need to edit vite.config.js if you're adding plugins (like environment variables, custom aliases, or SWC transpilation), which is optional for basic projects.

Can I switch from Create React App to Vite?​

Yes, but it requires manual steps. You'll need to remove CRA configuration, install Vite, create a vite.config.js, and update your index.html and main.jsx. For new projects, using Vite from the start is simpler.

What does "template react" mean, and why not "template react-ts"?​

--template react sets up a JavaScript project (.jsx files). --template react-ts sets up TypeScript (.tsx files). Choose based on whether you want static type checking; JavaScript is simpler for beginners.

How do I deploy a Vite React app?​

Run npm run build to create an optimized dist/ folder. Deploy this folder to any static host (Vercel, Netlify, GitHub Pages, AWS S3). The build is production-ready: minified, tree-shaken, and optimized for browser caching.

Further Reading​