JavaScript

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