What is Vite and How to Get Started

Vite is a frontend development tool that has quickly gained the attention of developers due to its speed and ease of use.

Created by Evan You, the same developer behind Vue.js, Vite is designed to provide an ultra-fast development environment and a proper build experience for modern web projects.

Advantages of Vite:

1. Fast server start: Vite uses native ES modules from the browser, allowing you to start a development server almost instantly, regardless of the project size.
2. Efficient hot module replacement (HMR): Vite’s hot module replacement is extremely fast, as it only replaces the modules that have changed without reloading the entire page.
3. Optimized builds: Vite uses Rollup for production builds, providing a comprehensive set of optimizations and a flexible configuration.
4. TypeScript support: Vite handles TypeScript efficiently, both in the development environment and during production builds.
5. Plugins and extensibility: Being based on Rollup’s architecture, Vite supports a wide range of plugins and is highly extensible.

Installation and Initial Setup

To get started with Vite, you need Nodejs and NPM (Node Package Manager). If you don’t know what they are or want to learn more, here are two courses for you 👇.

Nodejs Course

Learn to use the Nodejs package manager

NPM Course

Learn to use the NPM package manager

Create a New Project with Vite

The easiest way to start a new project with Vite is by using the project creation tool it provides. Open a terminal and run the following command:

npm create vite@latest

This will start a wizard that will guide you through the project setup process. It will ask you to select the project name and the framework you want to use (for example, Vanilla, Vue, React, Svelte, etc.).

Run the Development Server

To start the development server, use the following command:

npm run dev

This command starts a development server and opens your application in the browser, usually at http://localhost:5173.

Project Structure

The basic structure of a Vite project is as follows:

project-name/
├── index.html
├── package.json
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   └── main.js
└── vite.config.js

Here’s the enumeration converted into a table:

First Vite File

In src/main.js, you can import and use ES modules as follows:

import './style.css';
import javascriptLogo from './javascript.svg';
import { setupCounter } from './counter.js';

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`;

setupCounter(document.querySelector('#counter'));

In this example, a CSS file, an SVG logo, and a JavaScript module for setting up a counter are imported.

Advanced Features

Configuration

The vite.config.js file allows for detailed configuration of Vite. You can customize the behavior of the development server, the build, and add plugins as follows:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
  plugins: [],
});

Plugins

Vite has a robust plugin ecosystem that can be used to extend its functionality. Here’s an example of how to add a plugin for Vue:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

Integration with TypeScript

Vite natively supports TypeScript. To use TypeScript, simply rename your .js files to .ts and ensure you have typescript installed in your project:

You can also add a tsconfig.json file at the root of your project to configure the TypeScript compiler.

CSS and Preprocessors

Vite supports CSS and preprocessors like Sass, Less, and Stylus. Here’s an example of how to set up Sass:

npm install sass

Then, in your style files, you can use Sass syntax:

/* src/style.scss */
$color: purple;

body {
  color: $color;
}

In your main.js file:

import './style.scss';