If you get frustrated when trying to create a new React app with create-react-app (CRA), and sometimes you get the app ready to use hours before you intend to use it to avoid wasting time, Vite, pronounced "Veet," may be just what you've been looking for.
You may be wondering what Vite is and how it works; don't worry, this article will teach you everything you need to know.
Prerequisites
To follow this tutorial, you will need the following:
Node.js version 12.2.0+ installed on your machine.
Foundational knowledge of React.
What is Vite, exactly?
Vite is a useful tool for creating modern JavaScript frameworks such as React. Vite is fast and lightweight, making it simple to create apps quickly. It employs "hot module replacement" to update parts of the app without requiring a full page reload. Because changes can be previewed almost instantly, this can greatly speed up the development process.
Advantages of Vite over Creating a React App
You may be wondering what makes Vite superior to the standard "create-react-app" method. The following are some of the reasons why you should use Vite to save time:
With Vite, parts of the app are updated without completely reloading the page, resulting in a quick development process and changes that are previewed almost instantly.
Vite is optimized for faster build times than CRA, which is useful when working on larger projects or making frequent changes to your app.
Vite makes it simple to create and customize your app.
How to Begin with Vite
Open your terminal and type the following command to launch a React app with Vite:
npm create vite@latest
The command above will create a package.json file in the current directory that includes Vite as a dependency and will install the files required to use Vite in your project.
Vite will ask you questions after you type the command. It asks you for the name you want to give your project and package, and then it asks what framework and variant you want to use for your newly created project. This is how your terminal should look:
Now that we've created our project, Vite instructs us to change the directory (cd) into the project we created so that we can install all of the Vite app's dependencies and add them to the project's node modules directory. This will enable you to create and run your app in Vite. The "npm install" command is used to accomplish this. When you're finished, your terminal should look like this:
Did you notice that it didn't take as long as "create-react-app" to install node modules? I am certain you did. :)
The final command would be "npm run dev." This command typically starts the app's development server. This allows you to view and test your app in a web browser while making changes to the code.
This is how the terminal should look:
Now, launch your app by typing "localhost:5173" into your browser. This should lead you to the following:
You can now go ahead and edit it to create the application you desire. We've reached the end of this tutorial.