How to Install React Using Vite

In the fast-paced world of web development, efficiency and speed are paramount.

While Create React App (CRA) has long been the go-to for bootstrapping React projects, a new challenger has emerged, offering an incredibly fast and streamlined development experience: Vite.

If you’re tired of waiting for your development server to start or for changes to hot-reload, then it’s time to embrace Vite. This guide will walk you through everything you need to know to install React using Vite, from the initial setup to understanding why it’s becoming the preferred choice for many developers.

Why Vite? The Need for Speed and Simplicity

Before we dive into the “how,” let’s briefly touch upon the “why.” Why should you choose Vite over more traditional bundlers like Webpack (which powers CRA)?

Traditionally, JavaScript bundlers process your entire application code, compiling it and creating a bundle before serving it to the browser. As your project grows, this bundling process can become incredibly slow, leading to frustrating wait times during development.

Vite, on the other hand, takes a different approach, leveraging native ES modules (ESM) in the browser. Here’s what makes it a game-changer:

• Lightning-Fast Cold Starts: Vite doesn’t bundle your entire application on startup. Instead, it serves your modules directly to the browser. This drastically reduces the time it takes for your development server to be ready, often to a matter of milliseconds.

• Instant Hot Module Replacement (HMR): When you make changes to your code, Vite performs HMR with incredible speed. Only the changed module is reloaded, not the entire page, providing an almost instantaneous feedback loop.

• On-Demand Compilation: Vite only compiles code as it’s requested by the browser. This means that during development, you’re not waiting for parts of your application that aren’t even being used.

• Optimized Builds for Production: While Vite shines in development, it also uses Rollup for its production builds, resulting in highly optimized and performant bundles.

• Framework Agnostic: While we’re focusing on React here, Vite supports a wide range of frameworks and libraries, including Vue, Preact, Svelte, and vanilla JavaScript.

• Simple Configuration: Vite boasts a very minimal and intuitive configuration. For most projects, you won’t even need a vite.config.js file!

In essence, Vite makes development feel snappier, more responsive, and less of a chore. If you value your time and sanity, Vite is a fantastic choice.

Prerequisites: What You’ll Need

Before we begin the installation process, ensure you have the following installed on your system:

1. Node.js: Vite requires Node.js to run. It’s recommended to use a Long Term Support (LTS) version. You can download it from the official Node.js website (nodejs.org).

1. npm or Yarn (or pnpm): These are package managers that come bundled with Node.js. We’ll use them to create our React project and install dependencies. You can check if they’re installed by running npm -v or yarn -v in your terminal.

That’s it! With these two prerequisites in place, you’re ready to embark on your Vite-powered React journey.

Step-by-Step Installation: Creating Your First Vite React App

The process of creating a React application with Vite is remarkably simple.

We’ll cover the most common approach using the command line.

Step 1: Open Your Terminal or Command Prompt

Navigate to the directory where you want to create your new React project. You can use commands like cd Desktop or cd Documents/Projects to move to your desired location.

Step 2: Create a New Vite Project

Vite provides a convenient command-line interface (CLI) tool to scaffold new projects. 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

Let’s break down this command:

• npm create vite@latest (or yarn create vite or pnpm create vite): This command uses your chosen package manager to invoke the create-vite package, which is Vite’s scaffolding tool. @latest ensures you get the most recent stable version.

• my-react-app: This is the name of your project directory. You can replace my-react-app with any name you prefer (e.g., react-vite-demo, my-dashboard).

• -- --template react: This is crucial! It tells Vite that you want to create a project based on the react template. Vite also supports react-ts for TypeScript, vue, vue-ts, preact, preact-ts, svelte, svelte-ts, and vanilla, vanilla-ts. The -- before --template is necessary to pass arguments directly to create-vite.

After running the command, Vite will quickly set up the basic project structure for you. You’ll see output similar to this:

✔ Project name: » my-react-app
✔ Select a framework: » React
✔ Select a variant: » JavaScript

Scaffolding project in /path/to/your/my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

Step 3: Navigate into Your Project Directory

As the output suggests, you need to change your current directory to your newly created project:

cd my-react-app

Step 4: Install Project Dependencies

Once inside your project directory, you need to install the necessary Node.js packages and dependencies that your React application relies on.

Using npm:

npm install

Using Yarn:

yarn

Using pnpm:

pnpm install

This command will read the package.json file in your project, download all the listed dependencies (like React, ReactDOM, etc.), and place them in a node_modules folder.

This process might take a few moments, depending on your internet connection.

Step 5: Start the Development Server

Now for the exciting part! With all dependencies installed, you can start your blazing-fast development server.

Using npm:

npm run dev

Using Yarn:

yarn dev

Using pnpm:

pnpm dev

Vite will spring into action, and in a blink of an eye, your development server will be running. You’ll see output similar to this:

  VITE v5.x.x  ready in xxx ms

  ➜  Local:    http://localhost:5173/
  ➜  Network:  use --host to expose
  ➜  press h + enter to show help

Congratulations! Your React application is now running.

Step 6: View Your Application in the Browser

Open your web browser and navigate to the “Local” address provided in the terminal output, typically http://localhost:5173/ (the port number might vary).

You should see the default Vite + React welcome page, indicating that your installation was successful!

Exploring Your New Vite React Project Structure

Let’s take a quick look at the default project structure created by Vite:

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock (or package-lock.json or pnpm-lock.yaml)

Here’s a brief overview of the key files and directories:

• public/: Contains static assets that are served directly without being processed by Vite.
• src/: Your main source code directory.
  • assets/: Where you’d typically place your static assets like images.
  • App.jsx: The main React component for your application.
  • main.jsx: The entry point of your application, where React is initialized and App.jsx is rendered into the DOM.
  • .css files: Basic styling for your application.
• index.html: The single HTML file that serves as the entry point for your application. Notice the <script type="module" src="/src/main.jsx"></script> tag – this is where Vite leverages native ESM.
• package.json: Defines your project’s metadata and dependencies.
• vite.config.js: Vite’s configuration file. For most simple projects, you won’t need to modify this much, but it’s where you’d add plugins or customize build options.
• .eslintrc.cjs: ESLint configuration for code linting.

Making Your First Changes: Hot Module Replacement in Action

Now that your application is running, let’s experience Vite’s incredible Hot Module Replacement (HMR).

1. Open src/App.jsx in your code editor.
2. Find the line that says <h1>Vite + React</h1>.
3. Change it to something like <h1>Hello, Vite React!</h1>.
4. Save the file.

Without even refreshing your browser, you’ll see the text on your web page instantly update! This is HMR in action – Vite detected the change, updated only the necessary module, and injected it into your running application without a full page reload. This rapid feedback loop significantly boosts developer productivity.

Going Further: Essential Vite Configuration and Features

While Vite works wonderfully out-of-the-box, understanding some basic configuration and features can enhance your development workflow.

vite.config.js

This file is your gateway to customizing Vite’s behavior. The default vite.config.js for a React project looks something like this:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

• defineConfig: A helper function that provides autocompletion and type checking for your configuration.
• plugins: An array where you add Vite plugins. @vitejs/plugin-react is essential for React support, enabling features like Fast Refresh.

You can add various options to defineConfig, such as:

• server: Configure the development server (port, host, proxy rules).

  JavaScript

  server: {
    port: 3000, // Change default port
    open: true, // Automatically open browser on startup
  }
  

• build: Customize production build output (output directory, minification).

  JavaScript

  build: {
    outDir: 'dist', // Default is 'dist'
    minify: 'esbuild', // 'terser' for more aggressive minification
  }
  

• resolve: Configure module resolution aliases (e.g., to use @/components instead of ../../components).

  JavaScript

  resolve: {
    alias: {
      '@': '/src',
    },
  }
  

  After adding this, you can import components like this: import MyComponent from '@/components/MyComponent';

For a comprehensive list of configuration options, refer to the official Vite documentation (vitejs.dev/config/).

Environment Variables

Vite supports environment variables out-of-the-box. You can define them in .env files in your project root:

• .env: General environment variables.
• .env.development: Development-specific variables.
• .env.production: Production-specific variables.

Variables must be prefixed with VITE_ to be exposed to your client-side code. For example, in .env.development:

VITE_API_URL=http://localhost:8000/api

You can then access them in your React code using import.meta.env:

function App() {
  const apiUrl = import.meta.env.VITE_API_URL;
  // ...
}

Static Asset Handling

Vite handles static assets (images, fonts, etc.) efficiently:

• Assets in public/: Assets placed in the public directory are served directly at the root. For example, public/my-image.png can be accessed at /my-image.png. These are not processed by Vite.
• Assets in src/: Assets imported from your JavaScript modules (e.g., import logo from './assets/logo.svg') are handled by Vite’s asset processing. They are typically given a unique hash in their filename for caching purposes.

Building for Production

When your React application is ready for deployment, Vite can create a highly optimized production build.

Simply run:

Using npm:

npm run build

Using Yarn:

yarn build

Using pnpm:

pnpm build

Vite will then use Rollup to bundle and minify your code, generating optimized output in the dist directory (by default). This dist folder can then be deployed to any static hosting service.

Troubleshooting Common Issues

While Vite is generally smooth sailing, here are a few common issues and their solutions:

• “Port X is already in use”: If you get this error, another process is using the default port (usually 5173). You can:
  • Stop the other process.
  • Configure Vite to use a different port in vite.config.js (e.g., server: { port: 3001 }).
• Module Not Found Errors: Double-check your import paths. If you’re using aliases (like @/), ensure they are correctly configured in vite.config.js.
• Outdated Node.js/npm: Ensure you’re using a relatively recent LTS version of Node.js. Older versions might have compatibility issues.
• node_modules Corruption: Sometimes, node_modules can get corrupted. Try deleting the node_modules folder and your lock file (package-lock.json, yarn.lock, or pnpm-lock.yaml), then run npm install (or yarn or pnpm install) again.

Conclusion: Embrace the Speed of Vite

The journey of installing React with Vite is a testament to the advancements in web development tooling. By leveraging native ES modules and an intelligent development server, Vite eliminates the frustrating wait times associated with traditional bundlers, making your development workflow significantly more enjoyable and productive!

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee ☕️https://buymeacoffee.com/tyronneratcliff