A Beginner guide on how to install and Use Vite.Js

Introduction

Vite is translated from the French word "quick, fast". It is a build tool that aids a faster and better performance development experience for modern web projects.

Vite consists of two parts:

• A dev server that provides rich feature enhancements that support Hot Modules Replacement(HMR) meaning this HMR can provide instant and accurate updates without reloading the page. For example, if there is a change in syntax from the source code, only that section is updated rather than the entire application is reloaded.

• A command that utilizes Rollup to bundle your code into highly optimized static assets for production.

Why use Vite?

You may be wondering why you should use Vite,

there are reasons you should consider using Vite

1. Performance

   Vite's ESbuild pre-bundling is faster than other JS bundlers, improves page speed and converts CommonJS/UMD modules to ESM.

2. Hot Modules Replacement(HMR)

As stated above, Vite enables HMR to keep track of changes in the application without reloading the pages. With the HMR Application programming interface(API), only reload the modified section while retaining the state of the entire application itself.

According to Vite Documentation,

This greatly improves DX - however, in practice we've found that even HMR update speed deteriorates significantly as the size of the application grows.

1. Speed

   The installation process is quick and straightforward.

2. Compatible with other templates such as: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

How to create a Vite project

Before you can create a Vite project you must have installed Node.js version 18+ or 20+ depending on the template you are going to use. To check the version of Node installed, run node -v on your CMD or IDE terminal.

Steps

1. Create a new folder on your desktop. Right-click on your mouse, click on new, click on folder and rename the folder to any name of your choice

   

2. Open the folder on your Code Editor. Press ctrl + K + O and select the folder you created.

   

3. Open terminal. Press ctrl + shift + `

   

4. Install vite. Run this command in the terminal

   npm create vite@latest

   

   After running the command you will be asked to proceed, press y and enter

   

   Next type the name of the project of your choice and press enter

   

   Next, select the framework of your choice using the arrow keys (up and down)

   

Next, select the Variant of your choice using the arrow key (up and down)

1. Install Npm

   

Run the following commands to finish the installation one after the other

cd (name of your project)
npm install

Wait for it to install until you see something like this 👇to be sure it is successful.

How to Run a Vite Application

To run your Vite application, run the following dev command below and press enter

npm run dev

Running the above command will start the development server. Press ctrl and click on the HTTP link

You should see something like this in your browser:

You have successfully run a Vite application.

Conclusion

we've looked at what Vite is, the importance of Vite, how to create a Vite application and how to run a Vite application.

To understand and improve your development workflow with Vite, Read more on Vite documentation.