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.
These instructions were written and tested on a Mac.
Step 1. Create a project folder
Open up a terminal window and do the following:
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
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:
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.
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:
In this article, you learned another way to create a React app using Vite.