DEV Community

Cover image for 🚀 Create React App Using Vite.js — A Modern, Faster Alternative!
Dulaj Thiwanka
Dulaj Thiwanka

Posted on

🚀 Create React App Using Vite.js — A Modern, Faster Alternative!

#webdev #vite #frontend #programming

If you’ve used Create React App (CRA) for your React projects, you know it's a solid tool. But there's a new sheriff in town — Vite.js — and it's changing the way we build frontends for the better. In this article, I’ll walk you through how to create a blazing-fast React application using Vite.js instead of CRA.

🧠 Why Ditch CRA for Vite?

While CRA was the go-to tool for years, it comes with some downsides:

  • 🚫 Slow dev server startup
  • 🚫 Long build times
  • 🚫 Harder to configure (ejecting required)

Vite.js, on the other hand:

  • ⚡️ Starts instantly (thanks to native ES modules and lazy loading)
  • ⚙️ Uses Rollup under the hood for production builds
  • 💡 Is easily configurable and supports modern JS features out of the box

🚀 Getting Started with Vite and React

Let’s set up a new React app using Vite.

1. 📦 Install Node.js

Make sure Node.js is installed (version ≥14.18). You can check this by running:

node -v
Enter fullscreen mode Exit fullscreen mode

2. ⚙️ Create Your Vite App

Open your terminal and run:

npm create vite@latest my-vite-react-app -- --template react
Enter fullscreen mode Exit fullscreen mode

Or using yarn:

yarn create vite my-vite-react-app --template react
Enter fullscreen mode Exit fullscreen mode

This creates a new React app in the my-vite-react-app folder using the Vite + React template.

3. 📂 Project Structure Overview

Your project will look like this:

my-vite-react-app/
├── public/
├── src/
│   ├── App.css
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js
Enter fullscreen mode Exit fullscreen mode

It’s clean, minimal, and easy to work with.

4. 🚀 Run the Dev Server

Go into the project folder and install dependencies:

cd my-vite-react-app
npm install
Enter fullscreen mode Exit fullscreen mode

Now start the dev server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Your app will be running at:

http://localhost:5173/
Enter fullscreen mode Exit fullscreen mode

🔥 Features You Get Out of the Box

  • Instant server start
  • Fast hot module replacement (HMR)
  • JSX and TypeScript support
  • PostCSS and CSS Modules
  • Easy environment variable setup

📦 Build for Production

Ready to deploy? Run:

npm run build
Enter fullscreen mode Exit fullscreen mode

This generates a dist/ folder with your optimized production build.

You can preview it locally with:

npm run preview
Enter fullscreen mode Exit fullscreen mode

📊 Benchmarks Don’t Lie

Compared to CRA:

Feature CRA Vite
Dev Startup 🚶 Slow ⚡️ Instant
HMR 🐢 Laggy 🚀 Blazing
Config 😓 Complex 😎 Simple
Build Output ✅ Optimized ✅ Optimized

💬 Final Thoughts

CRA served us well, but it’s time to evolve. Vite.js is the future of frontend tooling — modern, fast, and developer-friendly.

If you're starting a new React project in 2025, make the switch. You’ll never look back. 😉

🔗 Useful Links

👋 What do you think about Vite? Already using it? Share your thoughts and project links in the comments below!

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.