How to Create a React App with Vite (Step-by-Step Guide)

Walter G.

5 minute read

vite

If you're tired of waiting ages for your React app to start up and refresh during development, Vite is for you.

This lightning-fast build tool has changed how developers work with React, offering near-instantaneous hot module replacement and blazing-fast startup times.

In this guide, we'll walk through everything you need to know about creating a React app with Vite, from the initial setup to deployment. Whether you're a beginner or an experienced developer looking to make the switch from Create React App, this step-by-step tutorial has you covered.

What is Vite?

Before diving into the how-to, let's quickly cover what makes Vite special. Vite (pronounced "veet," French for "fast") is a build tool that leverages native ES modules and modern JavaScript features to provide an incredibly fast development experience.

Unlike traditional bundlers that process your entire application upfront, Vite serves your source code over native ESM, making startup times nearly instantaneous regardless of your app's size.

I've been using it for years, and highly recommend it.

Prerequisites

Before we start, make sure you have:

Node.js (version 14.18+ or 16+) installed on your machine
npm, yarn, or pnpm package manager
A code editor (VS Code is recommended)
Basic knowledge of JavaScript and React

You can check your Node.js version by running node --version in your terminal.

Step 1: Create a New Vite React Project

The easiest way to get started is using Vite's built-in React template. Open your terminal and run one of the following commands:

Using npm:

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

Using yarn:

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

Using pnpm:

pnpm create vite my-react-app --template react

Replace my-react-app with whatever you want to name your project. The --template react flag tells Vite to use the React template, which includes all the necessary dependencies and configuration.

You might also get a wizard in your console asking you to specify other configuration options. The default answers are usually correct for most people.

Step 2: Navigate to Your Project Directory

Once the project is created, navigate to the project folder:

cd my-react-app

Step 3: Install Dependencies

Install the project dependencies:

npm install
# or
yarn install
# or
pnpm install

This will create the node_modules folder and install the necessary libraries to get things going.

Step 4: Explore the Project Structure

Let's take a look at what Vite has generated for us out of the box:

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Here's what each important file does:

index.html: The entry point of your application. Unlike Create React App, this file is in the root directory and serves as the template.
src/main.jsx: The main JavaScript entry point where React is mounted to the DOM.
src/App.jsx: The main React component.
vite.config.js: Vite's configuration file where you can customize the build process.
package.json: Contains project metadata and dependencies.

This is enough to get your initial project to run. However if you're building something more complex, you'll want to make sure that your folder structure is well built-out from the start.

Step 5: Start the Development Server

Now for the moment of truth. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

You should see output similar to:

  VITE v4.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open your browser and navigate to http://localhost:5173/. You should see the default Vite + React page with spinning logos and a click counter.

Step 6: Understanding the Development Experience

Try making a change to src/App.jsx. Edit the text or modify the counter logic. You'll notice that your changes appear in the browser almost instantly without a full page reload.

This is Vite's Hot Module Replacement (HMR) in action, and it's significantly faster than traditional webpack-based setups.

Step 7: Customize Your Vite Configuration

The vite.config.js file is where you can customize Vite's behavior. Here's a basic configuration with some common options:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // Change the default port
    open: true, // Automatically open the browser
  },
  build: {
    outDir: 'dist', // Output directory for production build
    sourcemap: true, // Generate source maps
  },
})

Step 8: Add Additional Dependencies

Let's add some commonly used packages to see how easy it is to work with Vite:

npm install react-router-dom axios
# or
yarn add react-router-dom axios
# or
pnpm add react-router-dom axios

These packages will be available immediately in your development environment thanks to Vite's efficient dependency pre-bundling.

Step 9: Working with CSS and Assets

Vite has excellent support for CSS and various preprocessors. You can:

Import CSS files directly into your components
Use CSS modules by naming files with .module.css
Add Sass/SCSS support by installing the preprocessor: npm install -D sass
Import images and other assets directly in your JavaScript

Example of importing an image:

import logo from './assets/logo.png'

function App() {
  return <img src={logo} alt="Logo" />
}

Step 10: Environment Variables

Vite handles environment variables differently from Create React App. Create a .env file in your project root:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Awesome App

Note the VITE_ prefix - this is required for Vite to expose the variable to your client-side code. Access them in your components like this:

const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

Step 11: Building for Production

When you're ready to deploy your app, create a production build:

npm run build
# or
yarn build
# or
pnpm build

This will create a dist folder containing your optimized, production-ready files. The build process includes:

Code splitting and tree shaking
Asset optimization
Minification
Source map generation (if enabled)

Step 12: Preview the Production Build

You can preview your production build locally:

npm run preview
# or
yarn preview
# or
pnpm preview

This serves your production build locally, letting you test it before deployment.

TypeScript Support

Want to use TypeScript? Vite has excellent TypeScript support out of the box. Simply create a new project with the TypeScript template:

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

Or add TypeScript to an existing project:

npm install -D typescript @types/react @types/react-dom

Then rename your .jsx files to .tsx and add a tsconfig.json.

Conclusion

Vite represents a significant leap forward in React development tooling. Its lightning-fast startup times, efficient HMR, and excellent developer experience make it an compelling choice for both new projects and migrations from older build tools.

The setup process is straightforward, the development experience is smooth, and the production builds are optimized and ready for deployment. Whether you're building a simple personal project or a complex enterprise application, Vite provides the performance and flexibility you need.

Walt is a computer scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.

Last updated on: August 13 2025