What Is Vitejs? Why To Use Vitejs?

Vitejs For Faster And Leaner Dev Experience.

Introduction To Vitejs 

Faster And Leaner Development  Experience For  Modern Web Apps. It Has  Two Major Parts.

•  Faster Server Start: Divides Codes Into Two Parts
•  Dependencies: It Bundles Dependencies Using esbuild written in go that pre-bundles dependencies 10-100x faster than normal JavaScript-based bundlers do Ex: Webpack
•  Source code: Vite Serves Code Over native ESM. Means Browser Takes Over Job Of  Bundlers. So Vite  Serves Code As Per Browser Request.

Let’s Get Started::

Supported Template Presets Are :

JavaScript : Vanilla, React, Preact, Vue, Svelte,lit

Typescript : Vanilla-ts, React-ts, Preact-ts, Vue-ts, Svelte-ts, lit-ts

Warning :

You Will Need node.js version >=12.2.0 for vite , and some template require even higher versions. Upgrade as Per Your Need.

Steps ::

with npm :

$ npm create vite@latest

with yarn :

$ yarn create vite

Or Directly Use It. For Example, Vite With React App. For Other templates Replace React With Your Template Name.

# npm 6.x
npm create react@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create react@latest my-react-app -- --template react

# yarn
yarn create react my-react-app --template react

Try To Install Any Dependencies  As Much You Want Then Try To Restart Server See How Fast It Is..

To  Live Demo Click On The Link ::  https://vite.new/

One Thing You Might Have Noticed Here index.html is the entry point to our application and  it refers to Javascript with src to js file here its main.js change it according to your need.

for more on index.html and root for various templates please visit index.html and root section of the link below..

https://vitejs.dev/guide/#index-html-and-project-root

Thanks For Read