Skip to main content

How to use React with Vite (CRA Alternative)

Now that create-react-app (CRA) is no longer being maintained, it's time to look at alternatives.

In this article, I'm going to show you how to use Vite as an alternative to CRA to create a React app.

info

These instructions were written and tested on a Mac.

Step 1. Create a project folder​

Open up a terminal window and do the following:

mkdir -p ~/projects/javascript
cd ~/projects/javascript

Step 2. Create a project​

Now run this command to create a new React app using Vite:

npm create vite@latest

You will be prompted for a project name. This will also be used to create the folder for the project.  Respond to the prompts with the following:

  • Project name: vite-react-101
  • Select a framework: React
  • Select a variant: JavaScript

Step 3. Run the project​

After you created the project, further instructions should have been printed on the screen, so run them.  They should be:

cd vite-react-101
npm install
npm run dev

Unlike CRA projects, the Vite setup doesn't open the browser automatically. Instead, the instructions give you the IP address and port.  Copy and paste that into the browser address bar.

For example:

http://127.0.0.1:5173/

Step 4. Test from another device​

To test the app from another device on your local network, pass in the --host flag like this:

npm run dev -- --host

It will print to the screen a local as well as a network address. You can use the network address to test locally from another computer or smartphone. They must be on the same local network. For example:

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.187:5173/

The address and port on your machine may be different.

Differences from CRA​

If you've used CRA you may notice a few differences in how Vite creates projects. For example, the build is in the dist folder, not the build folder. So if you have CI or other scripts that use the build folder, you will have to update them when using Vite.

No npm start by default​

I have a habit of starting React apps with npm start.  So I like to add this script to my Vite projects package.json file:

"start": "npm run dev",

Then I can run it with this command:

npm start

Conclusion​

In this article, you learned another way to create a React app using Vite.

Even though this article used npm and JavaScript, you could have also used yarn and/or TypeScript.  See the references below for more information.

References​

  • vitejs.dev - [1]
  • vitejs.dev/guide/ - [2]
  • npmjs.com/package/create-vite - [3]
  • docs.npmjs.com/cli/v9/commands/npm-init - [4]