Tutorial: How to Create a React App with Vite

1. Introduction

In the JavaScript frontend world, there are constantly new tools to build and optimize projects emerging. React, a popular JavaScript library for building user interfaces, has traditionally been paired with Create-React-App (CRA) to simplify setup and development. However, a newer tool called Vite is rapidly gaining traction due to its speed and efficiency, offering a modern alternative to CRA.

In this blog post, we’ll start by presenting the specific features that make Vite a great choice for React developers, and then we'll take a closer look at Create-React-App. Afterward, we'll compare the two tools to help you decide when to use each one and when to switch from CRA to Vite.

Whether you're starting a new React project or considering migrating an existing one, we'll guide you through the process, helping you choose the best tool for your needs. Furthermore, we’ll explore advanced configuration and optimization techniques for those who want to get the most out of their Vite and React setup.

By the end of this post, you'll have answers to the following key questions:

1. What are the unique features of Vite that make it an excellent choice for React development?

2. How does Create-React-App compare to Vite in terms of performance, configuration, and flexibility?

3. When should you stick with Create-React-App, and when is it better to switch to Vite?

4. What are the steps involved in setting up a new React project with Vite?

5. How can you migrate an existing Create-React-App project to Vite?

6. What advanced configuration and optimization techniques can you apply to get the most out of your Vite and React setup?

2. What is Vite?

Vite is a build tool designed to make web development faster and more efficient. The name "Vite" comes from the French word for "fast". Created by Evan You, the same developer behind Vue.js, Vite was designed to address the performance limitations of traditional bundlers like Webpack.

It offers support for popular frameworks like React, Vue, and Svelte. Its flexibility makes it compatible with a wide range of front-end technologies, ensuring it can adapt to various development needs. It leverages native ECMAScript modules and modern browser capabilities to provide a fast development environment.

No matter if you’re building a simple React app or a complex web application, Vite offers a streamlined experience that can save you time.

2.1 Why Was Vite Created?

Traditional build tools like Webpack have been around for years and have served the developer community well. However, as web applications grew in complexity, so did the time it took to start a development server and see changes reflected in the browser.

The following image describes the traditional bundling approach. The process starts with an entry point that connects to various routes and modules of the application. All these components are bundled together before the server is ready to be used. This upfront bundling is time-consuming, especially as the application grows, leading to longer startup times for the development server.

Vite takes a different approach to building and serving your application during development. Instead of bundling everything upfront, the server is ready almost instantly, and the browser requests only the specific modules it needs when they are needed. This is made possible through native ES modules (ESM) support, which allows for dynamic imports, enabling code splitting and reducing the amount of code that needs to be processed at any given time. By serving only what is necessary, Vite ensures a much faster feedback loop, allowing developers to work more efficiently.

2.2 Key Features of Vite

These are the core features of Vite:

• Instant Server Start:
  With traditional tools, starting the development server can take a while, especially for large projects. Vite, however, starts almost instantly. It does this by only transforming the code you’re currently working on, not the entire project. This makes your development experience much smoother and more responsive.

• Lightning-Fast Hot Module Replacement (HMR):
  Hot Module Replacement (HMR) allows you to see the results of your code changes in real-time, without needing to refresh the browser. Vite’s HMR is incredibly fast because it updates only the specific modules that were changed, not the entire application. This instant feedback loop makes for a much more efficient development process.

• Support for Native ES Modules:
  Vite leverages the native ES module support that’s built into modern browsers. Instead of bundling your entire codebase into a few large files (as with traditional tools), Vite serves each module as a separate file. This reduces the need for complex transformations and speeds up both the initial load and subsequent updates.

• Optimized Build Process using Rollup:
  Vite is also powerful in production. When you’re ready to deploy, Vite bundles your code efficiently using Rollup, a modern module bundler. This means you get the best of both worlds: fast development and optimized production builds.

• Flexible Configuration in vite.config.js:
  Vite is highly customizable. With a straightforward configuration file (vite.config.js), you can easily tweak settings to match your project’s needs. Whether you need to set up environment variables, configure path aliases, or add plugins, Vite makes it simple.

• Native TypeScript Support:
  Both React and Vite natively support TypeScript, making it easy to incorporate static typing into your code. Using TypeScript helps catch errors earlier in the development process and enhances code maintainability.

3. What is Create-React-App?

Create-React-App (CRA) is a popular tool developed by Facebook that simplifies the process of setting up a new React project. It allows developers to quickly start building React applications without the need to manually configure a development environment.

3.1 Why Was Create-React-App Created?

Before CRA, setting up a React project required configuring a variety of tools, which could be a daunting task, especially for those new to React. To address this challenge, CRA was introduced in 2016 as a solution that provides a zero-configuration setup. This tool enabled developers to jump straight into writing React code without worrying about the complexities of build tools and configurations.

CRA quickly became the standard tool for React developers because it streamlined project setup and brought consistency to development environments, making it easier for teams to collaborate effectively.

3.2 Key Features of Create-React-App

These are the core features of CRA:

• Dependency Tree Creation with Webpack:
  CRA uses Webpack to analyze your project’s index.js file, which acts as the entry point for your application. Webpack then creates a tree of dependencies by linking together all the modules your project needs. This automated process ensures that your application has all the necessary resources bundled together.

• Code Transpilation with Babel:
  Once the dependency tree is built, CRA employs Babel to transpile your modern JavaScript into a version that is compatible with a wider range of browsers. This step ensures that your app can run smoothly across different environments, regardless of whether they support the latest JavaScript features.

• Code Bundling and Serving:
  After transpilation, Webpack bundles your application’s code into a few compressed files. These bundles are then served through a web server, making your app accessible via a local development server.

• No Configuration Required:
  One of the biggest advantages of CRA is that it provides a fully functional React setup. When you create a new project with CRA, it automatically sets up everything you need like Webpack for bundling, Babel for transpiling modern JavaScript, and ESLint for linting. This means you can start coding immediately without spending time configuring your environment.

4. Why Consider Switching from Create-React-App to Vite?

In this section, we’ll compare Vite and CRA across several key areas which configuration, performance, support, and features to help you determine when it might make sense to switch from CRA to Vite.

4.1 Comparison: Vite vs. Create-React-App

4.2 When to Use Each Tool and When to Consider Switching

1. When to Use Create-React-App:

• For Beginners:
  If you’re new to React or front-end development, CRA is a great starting point. For instance, if you’re building a simple portfolio website or a personal blog, its zero-configuration approach lets you focus on learning React without worrying about the underlying setup.

• For Small to Medium Projects:
  CRA is well-suited for smaller projects where the simplicity of setup and use is more important than fine-tuning performance or configuration. For example, CRA is perfect for projects like a company’s internal dashboard or a small e-commerce site.

• For Stability:
  If you're developing a long-term project that needs a stable and widely supported tool, like a school management system or an organization's website, CRA’s large community and robust documentation make it a dependable choice. You won’t need to worry about frequent breaking changes, and you can rely on the community for support.

1. When to Use Vite:

• For Speed and Performance:
  If you’re working on a large-scale application, such as a social media platform or a complex data visualization dashboard, Vite’s speed becomes critical. For example, if your app contains numerous pages or components, Vite’s fast build times and efficient hot module replacement (HMR) can reduce the time you spend waiting for updates during development.

• For Modern Development Practices:
  If your project is based on modern JavaScript practices such as using ES modules, or if you're integrating with cutting-edge libraries like Svelte or using TypeScript, Vite provides out-of-the-box support that can streamline your workflow. An example would be developing a modern SaaS platform where you need to stay up to date with the latest web standards and features.

• For Flexibility:
  If you’re building a highly customized application, such as a CMS tailored for a specific industry, Vite’s plugin system and modular architecture allow you to easily integrate tools like Tailwind CSS, Preact, or others that suit your needs. This flexibility is particularly useful for applications where the default configuration needs significant adjustments to meet specific requirements.

1. When to Consider Switching from CRA to Vite:

• Your Project and User Base starts to Grow Significantly:
  Imagine starting with CRA to build a small project management tool. As more features are added and the user base grows, you might notice that build times and development server startup times increase significantly. At this point, switching to Vite can help you maintain a fast development cycle, allowing you to add new features more efficiently.

• You Look for a Superb Developer Experience:
  Suppose you’re working on a real-time collaborative app where rapid feedback during development is crucial. CRA might slow down as your app complexity increases. By switching to Vite, you can benefit from its quicker server starts and HMR, resulting in a more responsive development process.

• To Stay Ahead with Modern Tools:
  If you're maintaining a tutorial site that needs to showcase the latest in web development practices, transitioning from CRA to Vite could be beneficial. This switch allows you to demonstrate modern tools and methods, helping your content stay relevant and informative for a forward-looking audience.

5. Getting Started with Vite and React

In this section, we will walk you through two different approaches to using Vite with React. Whether you're starting a new project or looking to upgrade an existing Create-React-App (CRA) project to Vite, we've got you covered.

5.1 Prerequisites

This tutorial assumes you have a basic understanding of React and JavaScript. To get started, make sure you have Node.js and NPM installed on your machine.

5.2 Set Up a React project Using Vite

Starting a new React project with Vite is quick and straightforward. If you want to see the complete code, check out our React Application with Vite repository on GitHub.

Here’s how you can get started:

1. Create a New Vite Project

First, open your terminal and run the following command to create a new Vite project with React as the template:

npm create vite@latest my-react-vite-app -- --template react

2. Navigate to Your Project Directory

After the project is created, move into the project directory:

cd my-react-vite-app

3. Select a Variant

TypeScript

4. Install Dependencies

Next, install the required dependencies by running:

npm install

5. Start the Development Server

Once the installation is complete, start the development server:

npm run dev

Your project should now be running locally, and you can see it in action by opening your browser and navigating to http://localhost:5173/

And that’s it! You’ve successfully set up a new React project using Vite.

5.3 Migrate an existing CRA Project to Vite

We will guide you through migrating an existing Create-React-App (CRA) project to Vite. If you want to see the complete code, check out our Migrate CRA to Vite repository on GitHub.To make the migration process clear and accessible, we'll start by creating a new CRA project using npx, and then proceed with the migration to Vite.

Npx is a command-line tool that comes with npm (version 5.2.0 and above). While npm is used to install packages globally or locally, npx allows you to execute packages without installing them permanently. For example, when you run npx create-react-app my-app, npx temporarily downloads and executes the create-react-app package to generate a new React project.

1. Create a New React App with Create-React-App (CRA)

If you don't already have an existing CRA project, you can create one using npx. This will give us a starting point for the migration process.

Open your terminal and run the following command to create a new React app using CRA:

npx create-react-app my-cra-app

This command will set up a new React project named my-cra-app with all the default configurations provided by CRA.

2. Navigate to the project directory once the setup is complete:

cd my-cra-app

3. Run the development server to ensure everything is set up correctly:

npm start

This command will start the CRA development server, and you can see your new React app running at http://localhost:3000.

At this point, you have a working CRA project that we will now migrate to Vite.

4. Install Vite

Stop the CRA development server if it's running, and then install Vite as a dependency:

npm install vite

5. Install the Vite React plugin

It will handle React-specific features:

npm install @vitejs/plugin-react

6. Create index.html

Create the index.html file in the root of your project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>React Vite Migration</title>
  </head>
  <body>
    <p>Hello Vite!</p>
  </body>
</html>

7. Create vite.config.js

In the root directory of your project, create a file named vite.config.js and add the following configuration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],
});

This file configures Vite to work with React, enabling JSX and other React-specific features.

8. Update package.json Scripts

Open your package.json file and replace the existing CRA scripts with Vite equivalents:

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

The dev script starts the Vite development server, build creates a production build and serve allows you to preview the build locally.

9. Start the Development Server

npm run dev

Your project should now be running locally, and you can see it in action by opening your browser and navigating to http://localhost:5174

Once you’ve set up your React project with Vite, it’s time to add some advanced configuration and optimization techniques. This section will help you customize your Vite setup to fit your project’s specific needs and ensure your application is optimized for production.

6.Advanced Configuration and Optimization

The vite.config.js file is where you can customize your Vite setup to suit the requirements of your project. Let’s go through the key areas you might want to adjust and how to do it.

6.1 Adding and Configuring Plugins

Vite has a powerful plugin system that allows you to extend its functionality. For example, if you need to add support for additional features like TypeScript, you can include relevant plugins in the plugins array.

Here’s an example:

import react from "@vitejs/plugin-react";

import tsconfigPaths from "vite-tsconfig-paths";

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

6.2 Adding Path Aliases

Path Aliases reduces the need for long relative paths and makes your code easier to navigate.

First, configure path aliases in Vite by modifying the vite.config.js file:

import path from "path";

resolve: {
    alias: {
        "@components": path.resolve(__dirname, "src/components"),
        "@assets": path.resolve(__dirname, "src/assets"),
        "@utils": path.resolve(__dirname, "src/utils"),
    },
}

These aliases allow you to import modules using cleaner paths, such as:

import Header from '@components/Header';

6.3 Customizing the Development Server

You can customize the development server to fit your needs. For example, you might want to change the default port.

Here’s the relevant configuration:

server: {

    port: 3000, // Default port is 5173, but you can change it to 3000 or any other port

    open: true, // Open the browser automatically

}

6.4 Configuring the Build Process

The build section in vite.config.js allows you to customize how your project is bundled for production. You can specify the output directory, enable source maps for debugging, and more.

build: {
    outDir: 'dist', // Customize the output directory
    sourcemap: true, // Generate source maps for easier debugging
    minify: 'esbuild', // Use esbuild for minification (default is Terser)
},

6.5 Optimizing for Production

When preparing your project for production, there are several strategies you can use to optimize your build output:

• Lazy Loading Components
  For large React applications, consider using React’s lazy() and Suspense to load components only when they’re needed. This reduces the initial load time and improves the perceived performance of your application.

• Splitting Large Components:
  Break down large components into smaller, self-contained components that can be lazy loaded. This minimizes the amount of JavaScript that needs to be loaded initially.

• Analyzing the Bundle Size
  Use tools like rollup-plugin-visualizer to analyze your bundle size and see which parts of your application are taking up the most space. This can help you identify optimization opportunities.

7. Conclusion

Vite and Create-React-App (CRA) both serve as powerful tools for React development, each with its unique strengths. CRA is an excellent starting point for beginners and small to medium-sized projects, offering a zero-configuration setup that lets you dive straight into coding. However, as your project grows, CRA's performance can start to lag, and its rigid configuration may feel limiting. This is where Vite shines.

Vite offers lightning-fast development with instant server start and quick Hot Module Replacement (HMR), making it ideal for larger projects and developers seeking more control. With modern tooling, simplified yet flexible configuration, and optimized production builds, Vite provides a streamlined and future-proof development experience. Whether you’re starting a new project or considering a switch, Vite offers the speed and flexibility to enhance your workflow, making it a compelling choice for modern React development.