What is Vite JS?

Vite.js is a lightweight development server for building web applications. It is a fast development setup for building JavaScript projects, specifically Single Page Applications (SPAs) and Progressive Web Applications (PWAs). Vite.js uses the native ES modules feature in modern browsers, which allows for fast and efficient development without the need for a build step or configuration. It also includes features such as hot module replacement, which allows for fast development cycles by automatically updating the browser when code changes are made. Vite.js is a simple, lightweight alternative to other development servers like webpack-dev-server, and can be used with popular front-end frameworks such as React, Vue, and Svelte.

How to setup React Project using Vite.js

To set up a React project using Vite.js, you will need to have Node.js and npm (or yarn) installed on your computer. Once you have those, you can follow these steps:

1. Please create a new directory for your project and navigate into it.

2. Run the following command to create a new React Project:

    npm create vite@latest <your-app-name>
   

3. We will be asked if we want to install the create-vite@latest package, we’ll choose Y.

   

4. CLI asks for the package name, We will provide the package name.

   

5. CLI ask to choose a framework, we will select React by using the down arrow key.

   

6. Now, the CLI asks to select a variant (JavaScript/TypeScript), let’s choose JavaScript.

   

7. When creating a new project, Vite CLI doesn’t automatically download the dependencies, we have to do it manually. Run the following command to install dependencies.

    cd <your-project-name>
    npm install
   

8. Run the following command to start our development server.

    npm run dev
   

9. Open the Local URL in your browser.

   

10. We are done, Our React Project is created.

    

Thanks, for reading my first blog, Follow me for such content.