React 19 Setup with Vite: Fast Setup in Minutes

Ready to start building your first React app? In 2025, React is more powerful and accessible than ever. But before we dive into the code, one of the first steps you'll take is setting up your development environment. Whether you're just starting out or you're coming back after a break, this guide will walk you through the modern way to set up React 19 using Vite — a fast and efficient tool that makes the development process a breeze.

In this guide, we'll walk through why Vite is the superior choice, how to install the necessary tools, and how to get your very first project up and running. Let’s go!

---

Why Vite Over Create React App in 2025?

Before we jump into installation, let’s take a moment to understand why Vite has become the go-to choice for React developers in 2025 — and why it's replacing Create React App (CRA) in many modern projects.

Now, if some of the terminologies feel a little alien to you, don't worry — just keep going with the setup process. They’ll eventually make sense as we go along. After all, you’ve chosen the developer’s life... deal with it!!! 😎

What is Create React App?

For years, Create React App (CRA) was the default tool for setting up new React projects. It provided a ready-made build setup with Webpack, Babel, and other configurations, so developers could jump straight into coding without worrying about setup. If you are reading about it the first time, no need to worry, that would probably be the last time you do anyway.

However, as projects grew larger and the JavaScript ecosystem evolved, CRA started to show some limitations, especially in terms of speed and flexibility.

Now, Vite has taken over the spotlight with its modern, super-fast development experience.

1. Speed — It’s in the Name

“Vite” (pronounced like “veet”) means fast in French, and it absolutely lives up to that name.

• Instant Dev Server Start: Unlike CRA, which can take several seconds (or even minutes) to start in large projects, Vite starts up in under a second. That's right, under a second.
• Hot Module Replacement (HMR): When you make changes to your code, Vite instantly updates the browser without a full reload. Fast feedback = fast development.

🧠 Did You Know?
Vite uses ES Modules in development, which means it serves your code directly to the browser without bundling everything upfront. That’s how it achieves lightning speed!

---

2. Modern Build Tooling

Vite uses Rollup for production builds, resulting in:

• Smaller bundle sizes (goodbye bloated apps). Rollup optimizes your code so that only the necessary parts are included in your final build. This means no more bloated apps with extra code that you don't need. Your app becomes leaner and faster!
• Tree-shaking by default (removes unused code). Imagine your project is like a tree, with branches of code that are no longer needed. Tree-shaking is like trimming those branches away, so your final build only includes the code that’s actually being used. This makes your app even faster and more efficient.
• Support for modern JavaScript features, out of the box. Rollup and Vite support modern JavaScript features right out of the box. That means you can use the latest syntax, like async/await, modules, and more, without having to worry about compatibility issues.

---

3. Better Developer Experience (DX)

Vite is all about simplicity and ease of use:

• It has simpler configuration compared to CRA's more complex Webpack setup.
• Built-in support for TypeScript, JSX, CSS Modules, and PostCSS.
• A thriving plugin ecosystem, making it easy to extend Vite’s functionality.

---

4. Future-Proof

While CRA isn’t evolving at the same pace anymore, Vite is maintained by an active open-source community and is quickly adapting to changes in the JavaScript ecosystem. It powers frameworks like Astro, SvelteKit, and Nuxt — it’s the tool of the future!

---

Installing Node.js

Before we can start using Vite and begin building with React 19, we need to make sure we have Node.js installed. Think of Node.js as the engine that powers the entire development process. It allows us to install and manage tools like Vite, as well as run scripts to build and serve our React projects.

In addition to Node.js, you'll also be using npm (Node Package Manager). npm is a tool that comes with Node.js and helps you manage all the dependencies (external libraries and tools) your project will need. It allows you to install packages, update them, and even remove them when you're done.

In 2025, it's recommended to use Node.js v18 or later for the best performance and compatibility with modern tools like Vite.

1. Check If Node.js Is Installed

Open your terminal and type:

node -v

If you see something like v20.5.0, you're good to go!

---

2. Install or Update Node.js

• Windows / macOS: Download the LTS version from nodejs.org.
• Linux: You can install it via your package manager, like this: sudo apt install nodejs npm, or use nvm for more flexibility.

🧠 Pro Tip:
Using nvm (Node Version Manager) lets you easily switch between different versions of Node.js. Super handy for managing multiple projects!

---

Installing Vite

Now that Node is installed, let’s install Vite and set up our project.

You can follow these steps in the article, but if you prefer a more visual guide, I’ve got you covered! Check out my YouTube video where I walk through the entire setup process with Vite. Watch the video here!

If you haven't heard the terms pnpm and yarn, you would be using npm (Node package manager), which got installed with NodeJS.

Option 1: Using npm

Run this command in your terminal:

npm create vite@latest

Option 2: Using yarn

If you prefer yarn:

yarn create vite

Option 3: Using pnpm

Or, for the pnpm fans:

pnpm create vite

Each command will:

1. Download the latest Vite scaffolding tool.
2. Prompt you for your project name.
3. Ask you to pick a framework (you’ll pick React).

---

Choosing the React 19 Template

When prompted:

1. Enter your project name (e.g., my-react19-app).
2. Select React for the framework.
3. Select JavaScript (not TypeScript), since we’ll be using JavaScript throughout this series.

Example:

✔ Project name: … my-react19-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript

---

Installing Dependencies

After Vite creates your project folder, move into it and install the required dependencies:

cd my-react19-app
npm install

This will download all the necessary packages into the node_modules folder.

⚠️ Common Mistake:
Make sure you cd into your project folder before running npm install. You’d be surprised how often people forget and end up installing packages in the wrong directory!

---

First Run

Now it’s time to see your project in action! Start the development server with:

npm run dev

Vite will:

1. Start a super-fast dev server.
2. Provide you with a local URL (typically http://localhost:5173) for testing.
3. Show a network URL, so you can test on other devices in the same network.

---

Understanding Your Vite + React Project Structure

Once you’ve run npm create vite@latest and installed the dependencies, your project folder will look something like this:

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

Let’s break this down so you know exactly what each part is for:

---

1. node_modules/

This is where npm stores all your installed dependencies.
You never manually edit this — it’s auto-generated by npm install.

---

2. public/

This folder holds static assets (like images, icons, etc.) that are served as-is.
Anything inside public/ won’t be processed by Vite; it’s just copied to the final output directory during the build.

---

3. src/

This is where all your React code lives. The magic happens here.

• main.jsx (sometimes index.jsx) This is your entry point. It mounts your root React component (App.jsx) to the DOM.

Example:

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App.jsx';
  import './index.css';

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

• App.jsx
  This is your root component. It’s the heart of your app, where you'll set up things like routes, global layouts, or providers.

• index.css / App.css
  These are the default styles. Feel free to modify them, delete them, or replace them with your custom styles.

---

4. .gitignore

This file tells Git which files and folders to ignore, like the node_modules/ folder and other unnecessary files that don’t need to be tracked.

---

5. index.html

Unlike CRA, Vite exposes your index.html at the root. This is where you’ll add meta tags, links, or scripts directly. Vite will automatically inject the necessary script files when building your project.

---

6. package.json

This file contains important project information:

• Project metadata (name, version, description).
• Dependencies: React, ReactDOM, etc.
• Scripts: This is where the dev, build, and preview scripts live.

Example snippet:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

---

7. vite.config.js

This is the configuration file for Vite. Here you can tweak things like plugin settings, server configurations, and other build settings.

Example:

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

export default defineConfig({
  plugins: [react()],
});

---

How Vite Builds & Serves Your Code

One of the coolest things about Vite is how it operates differently in development mode vs production mode. Let’s break it down:

Development Mode (Dev Server)

When you run:

npm run dev

Vite:

1. Starts a local web server.
2. Serves your source files directly as ES Modules.
3. Applies transformations (JSX → JS, CSS Modules, etc.) on-demand as you import them.

Since Vite doesn’t bundle the entire app at once, startup is lightning-fast.

---

Production Mode (Build)

When you run:

npm run build

Vite:

1. Uses Rollup to bundle and optimize your code.
2. Minifies JavaScript and CSS to reduce the file size.
3. Generates hashed filenames to enable long-term caching.
4. Copies over static assets from public/ into the final output.

Your optimized production code ends up in the dist/ folder, ready for deployment.

---

🧠 Did You Know?
In CRA, the dev server also bundled your code, which is part of why it was slower. Vite’s unbundled dev approach is what makes it so fast!

---

Editing Your First Component

Now that your project is all set up, let's take a look at how easy it is to make changes. Open src/App.jsx and replace its contents with the following:

function App() {
  return (
    <div style={{ padding: '1rem', fontFamily: 'sans-serif' }}>
      <h1>Hello React 19 + Vite!</h1>
      <p>This is your starting point for building awesome UIs.</p>
    </div>
  );
}

export default App;

Save the file and head over to your browser — you should see the update instantly without even refreshing the page, thanks to Hot Module Replacement (HMR).

---

⚠️ Common Mistake
If you don’t see the change, make sure:

1. The dev server is still running in your terminal.
2. You’re editing files inside the src/ folder (not the public/ folder unless it’s static content).

---

Preparing for Debugging

Vite works seamlessly with browser dev tools. Here are the tabs you'll use to debug your app:

• Elements Tab: Inspect the DOM and styles.
• Console Tab: View console.log output, warnings, and errors.
• Network Tab: Monitor requests (like API calls) and assets loading.

---

Now that you’ve got your React 19 project set up with Vite and a solid understanding of the project structure, it’s time to dive into running your app, debugging like a pro, and optimizing your development workflow. This part will cover all that and more!

---

Running Your React 19 App

Once you’ve scaffolded your Vite + React project, you’ll spend most of your time in development mode. This is where Vite shines — fast, real-time updates with no waiting around.

Starting the Dev Server

To get your app running, you just need to use the following command:

npm run dev

Vite will:

• Start up the dev server.
• Output a Local URL (e.g., http://localhost:5173) and a Network URL (for testing on another device on the same network).
• Apply Hot Module Replacement (HMR) so your changes show up instantly in the browser.

🧠 Pro Tip
It’s super efficient to open both your code editor and the browser side by side. As you save changes in your editor, you'll see the updates immediately in the browser without refreshing the page.

---

Stopping the Dev Server

If you ever need to stop the dev server, press:

Ctrl + C

This stops the server and frees up your terminal for other commands.

---

Editing Your Project

Here’s the typical workflow when working with Vite:

1. Make a change: Edit a .jsx or .css file inside the src/ folder.
2. Save the file: Vite instantly updates the browser with the new content.
3. No page reloads: Your updates appear immediately without needing a full refresh, thanks to HMR.

Example — Adding a new component:

// src/Greeting.jsx
export default function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Welcome to React 19 + Vite</h1>
      <Greeting name="Developer" />
    </div>
  );
}

export default App;

Save both files, and watch your browser automatically update without a page reload. Magic!

Don't bother too much about what this code is doing at the moment. This is what next articles in the series are for.

---

⚠️ Common Mistake
If you import a component but get an error like Module not found, double-check:

• The filename matches exactly (it’s case-sensitive on some systems).
• The import path is correct relative to the file.

---

Debugging Your App

No dev environment is perfect, and bugs happen — even with Vite’s lightning-fast setup. Here are some ways to quickly diagnose and fix issues.

1. Using Browser DevTools

Vite works seamlessly with your browser’s developer tools. Here are the key tabs you'll use:

• Elements Tab: Inspect and modify the DOM generated by React. This is helpful for styling and layout adjustments.
• Console Tab: View console.log output, warnings, and errors. This is where you'll catch any issues with your code.
• Network Tab: Monitor API calls, asset loading, and requests to ensure everything is working as expected.

Note browser dev tools are accessible in browsers like chrome via right click->Inspect menu item

---

2. Adding Logs

The most basic but effective debugging tool is logging. Add logs to see what's going on in your app:

console.log('Current count:', count);

Place logs strategically inside your components or event handlers to understand how the app state changes.

---

3. React Developer Tools Extension

For a more advanced debugging experience, install the React Developer Tools browser extension (available for Chrome and Firefox). It allows you to:

• Inspect the component tree.
• View props and state for any component.
• Track renders and re-renders of components to spot inefficiencies.

🧠 Did You Know?
The React DevTools work out-of-the-box with Vite projects. No special configuration required!

This is an optional step though. Chrome has excellent debugging options available out of box (without extension).

---

Preparing for Production

Once you're happy with your app and it's ready for deployment, you’ll need to prepare it for production.

1. Build Your App

Run the following command to bundle and optimize your app for production:

npm run build

Vite will:

• Bundle and minify your JavaScript and CSS.
• Generate hashed filenames for caching.
• Place everything in the dist/ folder.

This is your optimized, production-ready code.

---

2. Preview Your Build Locally

Before deploying, it’s always a good idea to preview your production build locally. You can do this with:

npm run preview

This command starts a local server to serve your built app, letting you test the final version of your app before deploying it to production.

---

Productivity Tips for Vite + React 19

Now that your environment is set up, let’s talk about a few tips to keep things smooth and efficient.

1. Use Aliases In vite.config.js, set up path aliases to simplify imports:

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

   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
       },
     },
   });

Then you can import components like this:

   import MyComponent from '@/components/MyComponent';

1. Enable ESLint & Prettier
   Set up ESLint and Prettier to catch issues early and maintain consistent formatting across your codebase.

2. Use .env Files
   Store environment variables like API keys or base URLs in .env files to keep sensitive information secure and configurable.

Example .env.development:

   VITE_API_URL=http://localhost:4000

1. Leverage HMR Keep the dev server running so you never have to refresh the page. Instant updates make for a super smooth workflow!

---

Recap of the Full Article

In this guide, you learned:

• Why Vite is the preferred tool for React 19 projects in 2025.
• How to install Node.js and scaffold a project with Vite.
• The project structure and how Vite builds your code in dev vs. production.
• How to run, edit, and debug your app effectively.
• Productivity tips to keep your workflow fast and efficient.

I totally understand that if you are a beginner, this article was full of new and unfamiliar terminology. As you can see, we can't go in detail of every tool, as even without doing so, the article got too lengthy. But as we go on in the series, you would get comfortable with most of these tools and concepts naturally.

---

Next Up in the Series:
What is JSX in React? →

---

Follow me on DEV for future posts in this deep-dive series.
https://dev.to/a1guy
If it helped, leave a reaction (heart / bookmark) — it keeps me motivated to create more content
Want video demos? Subscribe on YouTube: @LearnAwesome