How to Create a React App with Vite: A Step-by-Step Guide

Creating a React application has become even easier and faster thanks to Vite, a modern front-end build tool introduced by Vue.js creator Evan You in 2020. Vite is recognized for its speed and efficiency, making it an excellent alternative to Create React App (CRA) by significantly reducing the time needed to start development servers and apply code updates. In this guide, we’ll go through each step to help you set up a React app using Vite, from preparing your environment to launching your first project.

Why Use Vite for React Development?

Vite has become a popular choice for React projects because it significantly enhances build speed and live reloading, making the development process both faster and smoother. Unlike Create React App (CRA), which often experiences delays in server refresh after file updates, Vite reduces build times, providing a seamless and efficient workflow. Its modular design also benefits React developers by offering faster feedback on changes, ideal for those who need an immediate response from the development environment.

What is Vite?

Vite, developed by Evan You (the creator of Vue.js), is a modern build tool designed to optimize front-end development. The name “Vite” is derived from the French word for “fast,” which aligns with its primary goal of speeding up the development and build process. Vite leverages native ES modules in the browser during development, allowing for faster builds and quicker refresh times compared to traditional bundlers. This efficiency makes Vite an excellent choice for developers looking to streamline the development experience in JavaScript frameworks like React.

Prerequisites for Setting Up Vite

Before setting up Vite, make sure your system meets the following requirements. These prerequisites are essential for a smooth installation and development process.

Node.js and npm

Vite depends on Node.js and npm (Node Package Manager) for installing packages and running development scripts. To use Vite, you need Node.js version 18.x or later and a compatible npm version. Here’s how to check if you have the correct versions installed:

Check Node.js Version

Open your terminal and type the following command:
bash
node -v

This command returns the installed version of Node.js, which should be 18.x or higher.

Check npm Version

Next, check the version of npm by running:
bash
npm -v

This command shows the installed npm version. If your versions are outdated, you can download the latest versions of Node.js and npm from the official Node.js website.

If Node.js and npm are not installed, or if you need to update them, you can install or upgrade them through the NodeSource repository (for Linux) or by downloading the installer directly from the official website.

Basic Command Line Knowledge

Using Vite requires familiarity with basic command-line operations. During the setup process, you’ll run a series of commands in the terminal to create, install, and launch your Vite project. Here’s what you should be comfortable with:

• Navigating Directories: Commands like cd to change directories and ls to list files.
• Running Commands: You’ll need to run npm commands like npm install and npm run dev.

If you’re new to the command line, it may be helpful to review some basic terminal commands before proceeding.

Code Editor

A code editor, such as Visual Studio Code (VS Code), is highly recommended to manage and edit your project files. VS Code provides several useful features:

• Syntax Highlighting: Helps make your code more readable.
• Integrated Terminal: Allows you to run terminal commands directly within the editor.
• Extensions: VS Code has extensions for JavaScript, React, and Vite that provide code suggestions, error-checking, and additional tools.

Other popular editors include Sublime Text, Atom, and WebStorm, but VS Code is especially suited for JavaScript and React projects. You can download it from the VS Code website.

Setting Up Vite for Your React Project: Prerequisites and Preparation

Before diving into building your first React application with Vite, it’s essential to ensure that your development environment is correctly set up. Vite is a fast, modern build tool designed to streamline front-end development, but it relies on specific software versions and tools to function smoothly. In this guide, we’ll cover the prerequisites, including installing the necessary versions of Node.js and npm, basic command-line knowledge, and setting up a suitable code editor. Once these components are in place, you’ll be ready to start creating efficient and fast-loading React applications with Vite.

Step 1: Install Node.js and npm (if not installed)

To use Vite, you need Node.js version 18.x or later along with npm. If you already have Node.js installed but it’s outdated, follow these steps to remove the old version and install the latest one.

Remove Existing Node.js Versions (optional)

If an outdated version of Node.js or npm is already installed, remove it to avoid compatibility issues.
bash
sudo apt remove nodejs npm

sudo apt autoremove

This step clears any old Node.js or npm installations, ensuring a clean setup for Vite.

Add the NodeSource Repository

This repository provides the latest versions of Node.js and npm for installation.
bash
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

Install Node.js and npm

bash
sudo apt install -y nodejs npm

This installs the current version of Node.js (18.x) and npm, ensuring compatibility with Vite.

Verify Installation

After installation, check that both Node.js and npm are correctly installed by running:
bash
node -v

npm -v

You should see version numbers confirming that Node.js and npm are ready to use.

Step 2: Install Vite Globally

Now that Node.js and npm are set up, you can install Vite globally. This allows you to easily create new Vite projects from any directory.

Run the Global Install Command

bash
sudo npm install -g create-vite

This command installs Vite globally, providing a single command to initialize Vite projects quickly. Having Vite installed globally simplifies project creation and setup.

Step 3: Create a New React Project with Vite

With Vite installed, you can create a new React project with it. Open your terminal, navigate to your preferred directory, and use the following command to start the setup.

Run the Vite Create Command

bash
npm create vite@latest my-app

Replace my-app with your desired project name. This command initializes a Vite project, and Vite will guide you through a few setup prompts.

Follow the Setup Prompts:

• Project Name: Choose a name for your project directory (e.g., “my-app”).
• Framework Selection: Select “React” from the list of frameworks.
• Variant: Choose between JavaScript and TypeScript based on your preference.

Once complete, Vite will create a project folder with all the required files and a standard structure.

Step 4: Navigate to Your Project Folder

After the project setup, navigate into the newly created project directory to start working with it.

Change to the Project Directory

bash
cd my-app

This command switches your working directory to my-app, making it easy to manage and work within the Vite project files.

Step 5: Install Project Dependencies

Before running the project, install all required dependencies. These include libraries and packages necessary for the project to run.

Run the Install Command

bash
npm install

This command downloads and installs all dependencies specified in the package.json file. These dependencies power the React components, Vite functionality, and any additional tools or libraries used in your project.

Step 6: Start the Development Server

Now that the setup is complete and dependencies are installed, start the Vite development server. This server lets you see your app live and apply code changes instantly.

Run the Development Server

bash
npm run dev

This command launches the development server, and Vite will display a local URL where your app is accessible. By default, this URL is:
arduino
http://localhost:5173/

You may also see network options and additional information, depending on your Vite version.

Step 7: View Your React App in the Browser

With the development server running, you can now view your React app in a web browser.

Open the Local URL in Your Browser:

• Open your preferred web browser.
• Navigate to the URL shown in the terminal, typically http://localhost:5173/.

Your new React application should load in the browser. Any changes you make in your code editor will automatically refresh in the browser, thanks to Vite’s hot module replacement (HMR) feature, which allows for fast updates without needing to reload the entire page

Vite Project Structure Overview

After setting up your Vite project, you’ll see a standard folder and file structure that organizes essential components of your React app. This structure keeps the project neat and modular, allowing you to focus on development without getting bogged down by configuration details. Below is a breakdown of the main files and directories in a typical Vite-powered React application:

index.html

• This file is the main HTML file for your application. It serves as the entry point for the browser to load the React app.
• Vite injects the JavaScript modules here, so your app has access to the necessary scripts and assets.
• Unlike traditional setups, Vite’s index.html is located at the project root, which simplifies loading modules and keeps your setup clean.

src/main.jsx

• This is the entry point for your React application, where the app initializes.
• Inside this file, you’ll find code that renders the React component tree to the DOM, typically linking your app to a root div in index.html.
• This is the first JavaScript file Vite processes and bundles, making it essential for your app’s structure and loading sequence.

src/App.jsx

• This file represents the primary component of your React application, usually holding the main structure or layout of your app.
• From App.jsx, you can import and manage other components, define routes, or create any other app-level configurations.
• Modifying App.jsx often provides the main changes you see in your app, as it’s typically the heart of your project’s UI.

vite.config.js

• The configuration file for Vite, located in the project root.
• This file allows you to customize Vite’s behavior and settings, such as defining build options, adding plugins, or setting up proxy configurations.
• While Vite is designed to work without heavy configuration, vite.config.js gives you flexibility to adjust settings as your project grows.

Additional Files and Directories

While these core files are essential, you may encounter additional directories and files as you expand your project, including:

• public/: A folder to store static assets like images, fonts, or icons. These files are served directly without needing special imports.
• src/: The main folder for all application source code. Along with main.jsx and App.jsx, this folder holds other React components, helper functions, or context providers as your app scales.

This organized structure keeps your project files accessible and manageable, so you can focus on building your app’s components and features without worrying about extensive setup or configurations.

Advantages of Using Vite Over Create React App

Switching from Create React App (CRA) to Vite can bring several performance and productivity benefits. Vite is built for speed and efficiency, giving developers a more responsive development experience. Here’s a deeper look at the advantages of using Vite over CRA:

Faster Builds

Vite significantly reduces build times by handling modules differently than CRA. Here’s how:

• Module Pre-Bundling: Vite pre-bundles dependencies using esbuild, a fast bundler optimized for JavaScript. This pre-bundling speeds up the initial load time by organizing and grouping dependencies more effectively.
• ES Module Syntax: Vite uses ES module imports in the browser during development, so only the files required for the current view are loaded. This setup bypasses the need to bundle the entire application on every change, resulting in faster start times.
• Lazy Loading for Development: Vite loads modules only when they’re required, which minimizes the workload on your development server and leads to faster reloads. Unlike CRA, Vite doesn’t recompile the entire codebase after each change, which cuts down waiting time.

These optimizations make Vite an excellent choice for projects where quick feedback loops and build speeds are essential.

Efficient Hot Module Replacement (HMR)

Hot Module Replacement (HMR) is a feature that updates modules in real-time as you edit them, without needing a full page reload. Vite’s HMR system is more efficient than CRA’s, which brings several benefits:

• Selective Reloading: Vite’s HMR system only updates the modules that change, rather than reloading the entire application. For example, if you edit a CSS file or a component, Vite reloads only that specific file or module.
• Faster Feedback on Changes: This selective reloading allows developers to see changes almost instantly, which improves productivity and saves time.
• Preserving Application State: Since only the necessary modules are replaced, Vite’s HMR preserves your application’s state during development. This means you can continue testing without needing to reset any data or configurations.

With Vite’s HMR, development is more efficient because changes are reflected immediately, enhancing the coding experience.

Lightweight Development Experience

Vite is designed to provide a minimal and optimized setup that removes unnecessary complexity, making it easier and faster to start a project. Here’s why Vite offers a more lightweight experience than CRA:

• Minimal Configuration: Vite requires little to no configuration to get started, and most common settings are handled automatically. CRA often requires custom configurations or extra dependencies for features like code splitting or advanced bundling, but Vite streamlines this process.
• Smaller Bundle Sizes: Vite’s optimized bundling leads to smaller bundle sizes in production, which improves performance when deploying your application.
• Quick Setup: Setting up a Vite project is simple and quick. With just a few commands, you’re ready to start coding without the extra files and scripts that CRA sometimes includes.
• Flexible Plugin System: Vite’s plugin system is powerful yet easy to use, allowing you to add functionality without bloating the setup. Vite’s plugins are also compatible with Rollup, a popular bundler, which expands the options for customizing your build without compromising speed.

This lightweight approach enables developers to focus more on coding and less on managing configuration, resulting in a faster, cleaner development environment.

Partner with Mobian to Build Your Custom Mobile App Solution

If you’re considering creating a mobile application, Mobian can provide expert support throughout the entire development process. Whether you’re aiming to streamline customer engagement, boost loyalty, or create a seamless experience for users, a well-designed mobile app can achieve these goals. Mobian specializes in building custom, turnkey applications tailored to your specific business needs.

Through our apps, customers can access news, promotions, and order services directly, while you can enjoy features like easy feedback, reviews, and a smooth ordering system. Our expertise covers a wide range of industries, from MedTech to FinTech, so no matter the complexity or vision for your app, we’re ready to bring it to life.

Get in touch with Mobian to discuss your project and explore how we can make your app idea a reality. Together, we can build an app that sets your business up for the future.

Make the future together with Mobian – your trusted mobile app developer.

Conclusion

By following this guide, you’ve now set up a Vite environment for your React project. Vite’s lightweight, fast build process and hot module replacement (HMR) make it an excellent choice for modern React development, offering a more efficient experience compared to traditional tools like Create React App. With Vite’s optimized architecture, you’re now prepared to create dynamic, responsive applications and focus on building features rather than waiting on build times. Keep exploring Vite’s configuration options and additional plugins to customize your development environment further. Happy coding!