How to Create a React App with Vite

If you’re tired of waiting for sluggish builds and endless npm installs, you’re not alone. That’s why so many developers are moving from Create React App to Vite. Vite is a modern build tool that makes starting a React project fast and painless.

Here’s how you can spin up a new React app with Vite in minutes.

What is Vite?

Vite (pronounced “veet”) is a build tool that focuses on speed. It serves your code with lightning-fast hot module replacement during development, and it builds your production bundle faster than legacy tools.

Prerequisites

• Node.js installed (version 14 or higher recommended)
• npm or yarn

If you don’t have Node.js, download it here.

Step 1: Create Your Project

Open your terminal and run:

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

Or with yarn:

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

• my-react-app is your project name. Change it if you want.
• The --template react flag sets up a React project right out of the box.

Vite will ask you a couple of questions—just follow the prompts.

Step 2: Install Dependencies

Change into your new project folder and install the dependencies:

cd my-react-app
npm install

Or if you’re using yarn:

yarn

Stuck at “sill idealTree buildDeps” when running npm install?
Check out this guide for a quick fix:
How to fix npm install hangs on ‘sill idealTree buildDeps’

Step 3: Start the Development Server

Fire up your app locally with:

npm run dev

Or:

yarn dev

Open your browser and go to http://localhost:5173/. You’ll see your new React app running.

Step 4: Edit Your App

Open the project in your favorite code editor (like VS Code), and start editing src/App.jsx. Save your changes and see them update instantly—no need to refresh the page.

Step 5: Build for Production

Ready to go live? Run:

npm run build

Or:

yarn build

Vite creates a dist folder with your optimized site, ready to deploy.

Why Use Vite for React?

• It’s blazing fast: No more waiting for slow rebuilds.
• Simple config: Out of the box, everything works. But you can customize if you want.
• Modern features: Built-in support for JSX, TypeScript, and more.

Final Thoughts

If you want a smoother, faster React workflow, Vite is a no-brainer. Give it a try and see how much time you save.

Have questions or want more React tips? Drop a comment below!

Mark Vincent

Tech enthusiast and content creator passionate about making technology simple for everyone. I share practical tips, guides, and reviews on the latest in computers, software, and gadgets. Let’s explore the digital world together!