Vite – ein Bundler fürs Frontend

von

Wenn man Vite mit Node.js einsetzt, trennt man idealerweise Frontend und Backend in zwei Bereiche:

  • Frontend → Vite (z. B. Vue, React, Vanilla)
  • Backend → Node.js/Express

Vite arbeitet im Dev-Modus über einen eigenen Entwicklungsserver und liefert das Frontend schnell und mit HMR (Hot Module Replacement) aus. Das Backend läuft unabhängig davon über Node.js und verarbeitet API-Requests. In der Produktion baust du das Frontend über vite build und dein Node.js-Server liefert anschließend den fertigen dist/-Ordner aus.

Vite selbst wird über eine vite.config.js (oder .ts) gesteuert. Dort kannst du z. B. Aliases, Ports oder API-Proxys zum Node-Backend definieren. Das Backend nutzt seine eigenen Config-Files (z. B. server.js, routes/, .env). Eine klare Ordnerstruktur hilft dir, beide Bereiche sauber zu trennen.

Beschreibung:

BereichBeschreibungBeispiel / Befehl
InstallationNeues Projekt mit Vite aufsetzen
(Vite erzeugt ein reines frontend-Projekt)
(backend wird z.B. mit Express erzeugt)		npm create vite@latest frontend
Start Dev-ServerVite startet blitzschnell und aktualisiert Änderungen live (HMR).npm run dev
vite.config.jsKommunikation Frontend ↔ Backend
Steuert Port, Aliases, Plugins, Proxy zum Node-Backend.		Beispiel siehe unten
Typische DateistrukturSaubere Trennung von Frontend/Backend./backend und /frontend Verzeichnisse
src/Frontend-Quellcode (Components, Pages, Styles).src/main.js
src/assets/Bilder, Fonts, CSS, Audio etc.src/assets/images/logo.png
index.htmlEinstiegspunkt für Vite, enthält <script type="module">Liegt direkt im Frontend-Hauptordner
Build für ProduktionVite erstellt optimiertes Frontend im dist/-Ordner.npm run build
Build-Resultat ansehenInhalt von dist/ ansehennpm run preview
Backend startenNode.js/Express läuft unabhängig vom Vite-Dev-Server.node server.js oder npm run start
Serving im BackendNode.js liefert statische Dateien aus dist/ aus.app.use(express.static("dist"))

Typische Ordnerstruktur:

project/
│
├── backend/
│ ├── server.js             # Node/Express Backend
│ ├── routes/               # API-Routen
│ ├── controllers/
│ ├── package.json
│ └── .env
│
├── frontend/
│ ├── index.html
│ ├── vite.config.js        # Vite-Konfiguration
│ ├── src/
│ │ ├── main.js
│ │ ├── components/
│ │ └── assets/
│ └── package.json
│
└── README.md

Für die Produktion kommt hinzu:

backend/
└── dist/     # von Vite erzeugt (production files)

Beispiel-vite.config.js:

import { defineConfig } from 'vite'
import path from 'path';                         // erforderlich für Bildung absoluter Pfad
import vue from '@vitejs/plugin-vue'             // falls du Vue nutzt — optional
import tailwindcss from "@tailwindcss/vite";     // wenn tailwind mit npm geutzt wird

export default defineConfig({
  plugins: [vue(), tailwindcss()],               // installierte Projekt-Pugins
  root: "./",                                            // Ort root für build
  build: {
    outDir: path.resolve(__dirname, '../backend/dist',   // Ort Ablage build-Files
    emptyOutDir: true,                                   // vorhandenen Build-Ordner leeren vor build?
    rollupOptions: {
      input: {                                           // mehrere Subdomains verwenden
        main: path.resolve(__dirname, 'index.html'),
        pokedex: path.resolve(__dirname, 'pokedex.html'),
      },
    },
  },
  server: {
    port: 5173,                                  // port Browser in dev
    proxy: {
      '/api': 'http://localhost:3000'            // Weiterleitung ans Node-Backend
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/'),    // Deklaration shartcuts Projekt-Pfade
    }
  },
  
  build: {
    
  },
})

Beispiel-server.js (node):

import express from 'express'
import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const app = express()
const PORT = 3000

// API-Routen
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Node.js!' })
})

// Produktion: statische Dateien aus dist ausliefern
app.use(express.static('../frontend/dist'))

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/dist/index.html'))
})

app.listen(PORT, () => console.log(`Backend läuft auf http://localhost:${PORT}`))