tech
Defaultdeesfrzh

Vite

Outil de build frontend ultra-rapide - serveur de dev instantane, builds optimises avec ESM natif

TL;DR

Quoi : Un outil de build frontend nouvelle génération pour un développement rapide.

Pourquoi : Démarrage serveur instantané, HMR ultra-rapide, builds optimisés, zéro configuration.

Quick Start

Créer un nouveau projet :

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Ou avec un framework spécifique :

npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template svelte

Ouvrez http://localhost:5173

Cheatsheet

CommandeDescription
npm run devDémarrer le serveur de dev
npm run buildBuild pour la production
npm run previewPrévisualiser le build de production
vite --hostExposer au réseau
vite --port 3000Port personnalisé

Templates disponibles :

  • vanilla, vanilla-ts
  • react, react-ts, react-swc, react-swc-ts
  • vue, vue-ts
  • svelte, svelte-ts
  • preact, preact-ts
  • solid, solid-ts

Gotchas

Environment variables

# .env
VITE_API_URL=https://api.example.com
// Access in code (must start with VITE_)
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);  // 'development' or 'production'

Static assets

// Import as URL
import imgUrl from './img.png';

// Import as raw string
import content from './file.txt?raw';

// Public folder (served at root)
// public/icon.png → /icon.png

Config file

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

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    outDir: 'build',
  },
});

CSS

// Automatically handled
import './style.css';
import styles from './style.module.css';  // CSS Modules
import './style.scss';  // Sass (npm install -D sass)

Next Steps