Vite is a popular build tool for modern web apps as it provides faster development experience and comes with many rich features such as a dev server, HMR (hot module replacement), build command, plugins, SSR and more. In this snippet we will see how to scaffold and generate frontend apps using Vite commands.

 

 

Although you can create frontend web apps like Vue or React using dedicated commands for each framework, for example for Vue you can use Vue CLI. However if you are using Vite you can achieve this easily using vite commands.

Before starting make sure that your node version 18+ or 20+ for Vite to work.

Create a Vite project:

npm create vite@latest

You will be promoted by some questions like Project name, framework, and variant. Type your project name and select the framework, here you will see many frameworks React, Vue or whatever framework you work with. The variant indicates whether you will work with vanilla javascript or typescript.

 

 

Next cd into your project

cd <Project directory>

Complete installation with:

npm install

Then launch the project with:

npm run dev

That’s it.

 

Also you can create the project and select the framework using the –template flag like so:

npm create vite@latest vue-app -- --template vue

Vue with typescript

npm create vite@latest vue-app -- --template vue-ts

React

npm create vite@latest react-app -- --template react

npm create vite@latest react-app -- --template react-ts

For vanilla JS

npm create vite@latest js-app -- --template vanilla

npm create vite@latest js-app -- --template vanilla-ts