For a while, I have been using Create React App (CRA) to create React applications, which is an officially supported way to create single-page React applications.
CRA was created for React beginners who have a limited understanding of Webpack and it was not meant to be used in production. CRA also makes it very difficult to add custom build configurations. It also comes with many unnecessary dependencies, resulting in a bloated package.json when the app is ejected. Out of all these drawbacks, one that is very annoying is that CRA takes longer to build when your codebase increases and even longer to deploy our applications. One alternative is to set up a React project without using CRA. Another option is to use a development tool such as Vite.
You can find the source code for the examples in this article here
Table of Contents
What is Vite?
Vite (pronounced "veet") is a development tool for scaffolding and bundling web projects. Vite has grown popular due to its blazing fast compilation and hot module replacement. To understand what makes Vite fast, you can read more on this page.
Vite supports a list of template presets, and as of writing, these template presets include:
- vanilla / vanilla-ts
- vue / vue-ts
- react / react-ts
- preact / preact-ts
- lit / lit-ts
- svelte / svelte-ts
Creating a React App With Vite
To create a new Vite project, you run the command
$ npm create vite@latest
Enter the project name and follow the prompts to select React (JavaScript), as shown below. 
You can also scaffold the project using this one-liner:
$ npm init vite@latest vite-react-example --template react
After the project is scaffolded, cd into it, install the dependencies, and start the dev server as follows:
$ cd vite-react-example
$ npm install
$ npm run dev
The default server port is 5173. Visit http://127.0.0.1:5173/. You should see something like:
Setting Environment Variables
Vite exposes environment variables on the import.meta.env object. Some built-in variables include:
-
import.meta.env.MODE→ The mode the app is running in -
import.meta.env.BASE_URL→ The base URL from which the app is served -
import.meta.env.PROD→ A boolean value indicating whether the app is running in production -
import.meta.env.DEV→ A boolean value indicating whether the app is running in development mode (An opposite ofimport.meta.env.PROD) -
import.meta.env.SSR→ A boolean value indicating whether the app is running on the server
Vite uses dotenv to load any additional environment variables from the following files
.env
.env.local
.env.[mode]
.env.[mode].local
Any environment variable loaded via dotenv is exposed to the import.meta.env object as strings. To prevent any environment variables from leaking to the client accidentally, Vite will only expose variables prefixed with the VITE_ prefix. For example, for the following environment variables,
VITE_APP_USER=Thanos
APP_PASSWORD=gamora
only VITE_APP_USER will be exposed as import.meta.env.VITE_APP_USER to the client source code, APP_PASSWORD will not be exposed
console.log(import.meta.env.VITE_APP_USER); // Thanos
console.log(import.meta.env.APP_PASSWORD); // undefined
Pros and Cons of Vite
| Pros | Cons |
|---|---|
| Blazingly fast | Lack of first-class support for Jest |
| Ease of use | Different tooling for dev and production environments |
| Out of-the-box Typescript support | |
| Vite is framework agnostic |
Summary
Vite is a good tool to scaffold web applications very fast and it helps save a lot more time than CRA. It is great too to create small projects and demos but it is recommended to not build any large-scale projects that will go into production using Vite as yet.
Top comments (0)