Prerequisites

Node.js and npm: Vite is built with Node.js, a JavaScript runtime environment. npm is the package manager that comes with Node.js.

• How to Check: Open your terminal (or Command Prompt on Windows) and type the following:

node -v 
npm -v

• If you see version numbers, you’re all set! Otherwise, you’ll need to install Node.js. You can download it from the official website (https://nodejs.org/en/download) – it includes npm.

Basic Command Line Comfort: You’ll be running a few simple commands, mainly to install Vite and start the development server. If you’re new to the command line, don’t panic! There’s just a handful of commands in this article.

A Text Editor: You can use anything you like. VS Code is recommended for its great JavaScript support and extensions, but Atom, Sublime Text, or even Notepad++ will work.

Installation

Now for the fun part – let’s get Vite set up!

Step 1: Create a Project Folder

• Open your terminal (or Command Prompt).
• Navigate to where you want to keep your project (e.g., cd Desktop).
• Create a new folder for your project and enter it:

mkdir my-vite-project
cd my-vite-project 

Step 2: Initialize with npm

• Run the following command: “npm init vite”
• You’ll be asked to:
  • Project name: (Type something descriptive) If you want to init Vite in current directory enter ” . ” instead of the project name.
  • Select a framework: (Choose “vanilla” for basic HTML/CSS/JS)
  • Select a programming language: In this case I select JavaScript.

npm init vite

This is the example of screenshot.

Step 3: Follow the Instructions

• Vite’s setup will give you a couple of commands based on your choices.
• Run those commands in order.

```bash
cd <project-name>
npm install
npm run dev
```

That’s it! You now have a basic Vite project running.

Project Structure Overview

Vite keeps things intentionally minimal compared to older tool setups. Let’s break down the key files and folders you’ll find in your new project:

• index.html: This is your website’s main entry point.
  • It will likely have a <script> tag referencing your main.js file.
• main.js: Your core JavaScript logic lives here.
  • This is where you’ll manipulate the DOM, add event listeners, etc.
  • With Vite, you can use the latest JavaScript features without complex setup.
• src/: An optional folder, but good practice for organizing your code.
  • You might put CSS files, images, and additional JavaScript modules in here.
• public/: Anything in here is copied directly to the final build output as-is, without being processed by Vite.
  • A good place for fonts or static images.

Starting the Dev Server

You’re almost ready to start building! Vite includes a super-fast development server.

Usually, all it takes to start the server is:

npm run dev

You should see some output in your terminal, including a local address like this:

Paste that address (e.g., http://localhost:5173/) into your web browser. You should see your index.html page rendered!

Hot Module Replacement (HMR)

This is where Vite shines. Make changes to any of your HTML, CSS, or JavaScript files and save them. Your browser will almost instantly update to reflect those changes. No reloading the whole page needed!

• HTML/CSS: Most changes will be reflected immediately.
• JavaScript: If you add/remove components or drastically change the structure, a full page reload may be needed. But for most development, HMR will save you a ton of time.