How to create a React Vite project with npm
Vite is a tool that helps in faster and more efficient web development. Vite is extremely flexible to accommodate various modern project types and configurations, including React, Vanilla, and many more. With npm, the node package manager, we can easily manage our project's dependencies and utilize the power to create the
We can create efficient and performant React applications in no time by combining React and Vite. This Answer will discuss creating a React Vite project with npm.
Creating the React Vite project
We use npm to install all the packages on our local machine. To create our React Vite project using npm , we use the following command:
npm create vite@latest
Choosing the framework and variant
We have to choose our preferred framework and variant we want to work on.
The frameworks options we see on the terminal are:
The variant options we see on the terminal are:
In our case, we choose the framework and variant as React and Typescript respectively.
Navigating to the app directory
After running the creation command, we navigate to our newly created Vite project's directory using the following command:
cd vite-project
Installing all required packages
Now we install all the packages mentioned in our package.json using the following command:
npm install
Starting the project
Once we follow all the necessary steps mentioned above, we run our React Vite project using the following command:
npm run dev
Coding example
Now let's execute what we have learned so far. The following commands will help us create our React Vite project with npm.
npm create vite@latestcd vite-projectnpm installnpm run dev -- --host 0.0.0.0 --port 8000
Click the "Run" button in the below widget to test the above commands.
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Note: Additional parameters in the
runcommand set the server to listen on all network interfaces (0.0.0.0)and port8000for incoming connections. When creating our project on our local machines we can skip these parameters in the command.
Conclusion
Vite is an extremely helpful tool for creating faster and more efficient websites. We can create a React Vite project with simple commands and explore its creative functionalities.
