tech
Defaultdeesfrzh

Vite

Herramienta de build frontend ultrarapida - servidor dev instantaneo, builds optimizados con ESM nativo

TL;DR

Qué: Una herramienta de build frontend de próxima generación para desarrollo rápido.

Por qué: Inicio de servidor instantáneo, HMR ultrarrápido, builds optimizados, cero configuración.

Quick Start

Crear nuevo proyecto:

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

O con framework específico:

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

Abre http://localhost:5173

Cheatsheet

ComandoDescripción
npm run devIniciar servidor de dev
npm run buildBuild para producción
npm run previewPrevisualizar build de producción
vite --hostExponer a la red
vite --port 3000Puerto personalizado

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