How to Create a React App with Vite

Vite is a frontend build tool with a fast development server and an optimized production build. The React template configures JSX, React Fast Refresh, linting, and the scripts needed for a client-side application. It deliberately does not choose routing, data fetching, authentication, testing, or a backend for you.

node --version
npm --version
git --version

Vite is a strong choice for learning React, browser-only dashboards, embedded interfaces, prototypes, and client-rendered single-page applications. It gives you a clean build foundation without hiding the application structure.

The create-vite initializer copies a maintained template into a new folder. With npm 7 and newer, the extra double dash passes the template option through npm to create-vite.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

1. 01

   Read the terminal URL

   npm run dev starts Vite's development server and prints its local address. Open the exact URL shown rather than assuming the port is always the same.

2. 02

   Make one visible edit

   Open src/App.jsx or src/App.tsx, change the heading, and save. The browser should update through React Fast Refresh without a full reload.

3. 03

   Check the browser console

   Open developer tools and resolve red errors or failed network requests. A page that looks correct can still have runtime problems.

4. 04

   Stop the server deliberately

   Return to the terminal and press Ctrl+C. The development server is a running process; closing a browser tab does not stop it.

# Start normally
npm run dev

# Expose to other devices on your local network
npm run dev -- --host

# Request a specific port and fail if it is occupied
npm run dev -- --port 5173 --strictPort

The example below proves the essential React loop: component state changes in response to an event, React renders the new value, and Vite updates the module quickly while you work.

import { useState } from 'react'
import './App.css'

export default function App() {
  const [tasks, setTasks] = useState(0)

  return (
    <main className="app-shell">
      <p className="eyebrow">VITE + REACT</p>
      <h1>Your project is ready.</h1>
      <p>You have completed {tasks} setup {tasks === 1 ? 'task' : 'tasks'}.</p>
      <button type="button" onClick={() => setTasks((count) => count + 1)}>
        Complete a task
      </button>
    </main>
  )
}

.app-shell {
  width: min(680px, calc(100% - 2rem));
  margin: 10vh auto;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid #c9c7df;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(37, 32, 73, 0.12);
}

.eyebrow {
  color: #6656d9;
  font-weight: 800;
  letter-spacing: 0.12em;
}

button {
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.65rem;
  color: white;
  background: #5b48d6;
  cursor: pointer;
}

Hot Module Replacement updates changed modules while preserving as much application state as possible. React Fast Refresh builds on that behavior for components. When a change cannot be refreshed safely, a full reload is expected.

Install libraries inside the project folder so they are declared in package.json. Application code should be able to recreate its dependency tree from the committed manifest and lockfile.

# Runtime dependency used by application code
npm install date-fns

# Development-only tool
npm install --save-dev vitest

# Remove a package cleanly
npm uninstall date-fns

# Inspect direct dependencies
npm list --depth=0

Vite exposes built-in mode values through import.meta.env. Custom variables must use the VITE_ prefix to become available in client code. That prefix means public-to-the-browser, not secure.

VITE_API_BASE_URL=https://api.example.test
# Never put a private database password or server secret here.

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL

if (import.meta.env.DEV) {
  console.info('Using API:', apiBaseUrl)
}

1. 01

   Create the production bundle

   Run npm run build. Vite uses index.html as the default entry and writes optimized assets to dist unless the configuration changes the output directory.

2. 02

   Preview the exact build

   Run npm run preview and open the printed URL. Test navigation, refreshing a nested route, API calls, responsive layouts, and browser-console errors.

3. 03

   Deploy the dist output

   Configure the hosting platform to run npm ci and npm run build, then publish dist. Do not upload src as the finished site.

4. 04

   Configure SPA fallback when routing

   A client-side router needs the host to return index.html for application routes. Without a fallback, refreshing /settings can produce a host-level 404 even though in-app navigation works.

npm run lint
npm run build
npm run preview

The template includes a useful .gitignore. Review it before the first commit, especially after adding local environment files or tool-specific output.

git init
git add .
git status
git commit -m "Create React app with Vite"

# After creating an empty GitHub repository
git remote add origin YOUR_REPOSITORY_URL
git push -u origin main