Use Vite instead of Create React App

Use Vite instead of Create React App to create modern, single page React applications with TypeScript support. Esbuild and HMR with ESM make Vite much faster.

June 10, 2023 • React

4 min read

If you're looking to create a modern React application as a single-page app nowadays, you'll want to use Vite instead of Create React App.

A single-page application (SPA) is a website or web app that loads only a single web document, and then updates the content of that single document via JavaScript when different content is to be shown. No new pages are loaded from the server. This often results in performance gains and a more dynamic browsing experience.

Vite is the successor to Create React App. Vite is a performant front-end tool that gives us a development server to run our React application locally, and a build command that bundles our code, producing optimized static assets for production. Vite supports modern front-end libraries such as React, Vue, Preact, and Svelte, and it has TypeScript support.

Vite versus Create React App

The main advantage that Vite has over Create React App is its choice of bundler.

Vite uses the esbuild bundler. It is much faster than the Webpack bundler used in Create React App. The esbuild bundler is written in Go — a fast, multithreaded language that is compiled to machine code. On the other hand, Webpack is written in JavaScript, making it single-threaded and slower.

Here is a list of benefits that Vite offers.

Faster startup

Faster startup times are thanks to the use of esbuild with rollup instead of Webpack, used by Create React App.
Prebundles dependencies

esbuild pre-bundles dependencies 10-100x faster than JavaScript-based bundlers like Webpack.
Faster Hot Module Replacement (HMR)

Vite leverages new advancements, such as support for native ES modules in the browser. ESM stands for ES Modules, which is a modern standard for working with JavaScript modules in the browser.

As a result, Vite lets the browser take over part of the job of the bundler. This means that Vite transforms and serve source code on demand, as the browser requests it.

Vite is stable, has an extensive ecosystem, and is updated regularly by the community that works on it. At the time of this writing, Vite has just over 5 million downloads per week.

As an added plus, Vite offers a library mode for easily generating a reusable JavaScript library. Lastly, Vite also offers server-side rendering via plugins.

A Vite-powered React app

To create a new Vite-powered React app, run yarn create vite in your terminal. The project creation process will ask you the following questions.

Project name: SOME_PROJECT_NAME
Select a framework: React
Select a variant: TypeScript

Pick React as your framework and TypeScript as your variant. Once the installation is complete, run yarn dev. This will start a development server at http://127.0.0.1:5173, or http://localhost:5173. When the development server starts, this address will be displayed in the terminal. Click on it to open it in your web browser.

If you have another application running on port 5173, consider freeing up that port by stopping the application running on it.

React recommends a framework

If you're looking to build a new app or site with React, React recommends using a framework like Next.js or Remix.

The reasons for this are the following:

React frameworks are better for code splitting as your JavaScript bundle size grows.
React frameworks provide server-side rendering (SSR) capabilities. Running code on server can be more performant than running it in the browser.

With server-side rendering, the server's response to the web browser contains all the HTML of a web page already loaded and ready to be displayed.

However, React can also be used without a framework. In fact, for React development without a framework, React recommends using Vite or Parcel. Vite is the more widely used of the two.

Depending on the type of application you are building, server-side rendering can have several advantages over client-side rendering. However, if you are just starting off with React, learning React without having to also learn a SSR framework will be easier.

Start with a Vite-powered React project to focus on learning only React. Then, once you feel more comfortable with React, learn a framework like Next.js.