Vite: nový frontend projekt za pár minut a jak ho nastavit

Vite je dnes výchozí volba pro nové frontendové projekty – ať už píšete v Reactu, Vue, Svelte nebo čistém JavaScriptu. Vývojový server startuje téměř okamžitě, protože během vývoje servíruje nativní ES moduly a nebalí celou aplikaci. Pro produkci pak vytvoří optimalizovaný build. Ukážeme si celý postup od založení po nasazení.

Založení projektu

Potřebujete Node.js (aktuální verze Vite vyžadují Node 20.19+ nebo 22.12+; přesný požadavek najdete v dokumentaci vaší verze).

npm create vite@latest moje-app

Průvodce se zeptá na framework (Vanilla, Vue, React, Preact, Lit, Svelte, Solid…) a variantu (TypeScript/JavaScript). Bez dotazů:

npm create vite@latest moje-app -- --template react-ts
cd moje-app
npm install
npm run dev

Dvojité -- je u npm nutné, aby se parametr předal Vite, ne npm. Aplikace běží na http://localhost:5173.

Struktura projektu

moje-app/
├── index.html        ← vstupní bod (není ve složce public!)
├── public/           ← soubory kopírované beze změny (favicon, robots.txt)
├── src/
│   ├── main.tsx
│   └── App.tsx
├── vite.config.ts
└── package.json

Odlišnost od starších nástrojů: index.html je v kořeni a Vite ho zpracovává jako součást grafu modulů. Skript se načítá přes <script type="module" src="/src/main.tsx">.

Soubory v public/ se odkazují absolutní cestou (/logo.svg) a nezahashují se. Obrázky, které importujete v kódu (import logo from './logo.svg'), Vite zpracuje, zahashuje název a vloží správnou URL.

Skripty v package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

• npm run dev – vývojový server s Hot Module Replacement,
• npm run build – produkční build do dist/,
• npm run preview – lokální náhled buildu (není určen pro produkční provoz).

Vite sám typy nekontroluje, jen je odstraní. Proto šablona volá před buildem tsc.

Proměnné prostředí

Vite načítá soubory .env, .env.local, .env.production apod. Do klientského kódu se dostanou jen proměnné s prefixem VITE_:

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=tajne   # do prohlížeče se NEdostane

const apiUrl = import.meta.env.VITE_API_URL;
if (import.meta.env.DEV) console.log('vývojový režim');

Důležité: cokoli s prefixem VITE_ skončí v JavaScriptu, který si stáhne každý návštěvník. Nikdy tam nedávejte API klíče ani hesla. .env.local patří do .gitignore.

Pro TypeScript doplňte typy do src/vite-env.d.ts:

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
}

Proxy na backend a CORS

Frontend běží na portu 5173, backend třeba na 8000. Místo nastavování CORS přesměrujte požadavky přes vývojový server:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

Kód pak volá fetch('/api/users') a ve vývoji i v produkci (kde backend běží za stejnou doménou) funguje bez změn.

Aliasy cest

Místo ../../../components/Button psát @/components/Button:

// vite.config.ts
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
  },
});

TypeScript se o aliasu musí dozvědět zvlášť v tsconfig.app.json (nebo tsconfig.json):

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

Build a nasazení na vlastní server

npm run build

Ve složce dist/ je čistě statický web – HTML, JS, CSS a assety. Stačí ho nahrát na libovolný webserver:

rsync -avz --delete dist/ uzivatel@server:/var/www/moje-app/

Pokud aplikace používá klientský router (React Router, Vue Router v režimu history), musí server všechny neznámé cesty vracet na index.html. Pro Nginx:

server {
    listen 80;
    server_name app.example.cz;
    root /var/www/moje-app;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Soubory v /assets/ mají v názvu hash obsahu, takže je můžete cachovat na rok – při změně vznikne nový název.

Nasazujete do podsložky (example.cz/app/)? Nastavte v konfiguraci base: '/app/', jinak budou odkazy na assety mířit do kořene domény.

Časté problémy

• Prázdná stránka po nasazení – špatné base nebo chybějící try_files. Podívejte se do konzole a záložky Network.
• process is not defined – ve Vite se používá import.meta.env, ne process.env.
• Proměnná je undefined – chybí prefix VITE_ nebo jste po úpravě .env nerestartovali dev server.
• Velký bundle – Vite vypíše varování nad 500 kB. Rozdělte kód dynamickým import() nebo nastavte build.rollupOptions.output.manualChunks.

Nasazení na VPS můžete udělat i z ColdHost AI: po připojení serveru přes SSH vám AI v režimu Server a DevOps navrhne konfiguraci Nginx a příkazy, každý z nich před spuštěním schválíte kliknutím.