Skip to main content

Introduction to Vite

· 3 min read

What is Vite?

Vite is a modern frontend build tool that significantly improves the frontend development experience. It serves code via native ES modules, which allows for lightning-fast server start and hot module replacement (HMR).

Here's a brief introduction to Vite along with some code examples:

Key Features of Vite:​

  • Fast Cold Start: Vite starts up almost instantly, serving code via native ESM, which is much faster than traditional bundlers that need to process the entire application before serving it.
  • Instant HMR: It provides hot module replacement, which updates the code in the browser as you edit the files, without a full reload.
  • Rich Features: Out-of-the-box support for TypeScript, JSX, CSS and more.
  • Optimized Build: When it's time to build for production, Vite uses Rollup to bundle your code with tree-shaking and lazy-loading features.

Getting Started with Vite:​

To create a new project with Vite, you can use the following command:

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

This command scaffolds a new Vite project. You can replace vanilla with other templates like vue, react, svelte, etc., depending on the framework you want to use.

Running the Vite Project:​

After creating the project, navigate to the project directory and install the dependencies:

cd my-vite-app
npm install

Then, you can start the development server with:

npm run dev

Basic Example of a Vite Project:​

Here's what a simple main.js file might look like in a vanilla Vite project:

// main.js
import './style.css';

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/" target="_blank">Documentation</a>
`;

And the accompanying index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <script type="module" src="/main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Building for Production:​

To build the project for production, you can use:

npm run build

This command will generate a production-ready bundle in the dist directory.

Customizing Vite Configuration:​

Vite is highly configurable. You can create a vite.config.js file in your project root to customize the build process:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // Configuration options
  ...
});

Integrating with a Framework:​

If you're using a framework like React, your main.jsx might look like this:

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And for Vue, your main.js might look like:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Last word​

Vite is designed to provide a better and faster development experience for modern web projects. It's highly recommended for new projects due to its simplicity and speed. For more detailed information and advanced configurations, you can visit the official Vite documentation.