How to Set Up Vite for HTML/CSS/JavaScript Development

If you’ve been building websites for a while, you’ve probably used a bundler like Webpack or Parcel. These tools were revolutionary, letting us organize complex JavaScript projects, use CSS preprocessors, and more. But they can get slow as projects grow larger.

That’s where Vite comes in. Vite (French for “fast”) is a modern build tool that takes advantage of advancements in web browsers to deliver a significantly faster development experience. With its lightning-fast startup times and nearly instant Hot Module Replacement (HMR), Vite make you life easier in frontend development.

Who is this tutorial for?

  • You know the basics of HTML, CSS, and JavaScript.
  • You’re comfortable using the command line (don’t worry, the commands are simple).
  • You’re ready to streamline your development workflow and make those tedious build times a thing of the past.


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 ( – 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.


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.
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.

Congratulations! You now have a lightning-fast Vite development environment set up. It’s time to unleash your creativity and start building amazing web projects.

If you’re looking for next steps, stay tuned – I’ll be sharing more tutorials and tips for modern web development right here on CLI LOG.