Text & Dokumente
Zahlen & Berechnung
Daten & Formate
Sicherheit
Entwicklung & DevOps
Künstliche Intelligenz
Finanzen
Gesundheit & Wohlbefinden
Produktivität
Spiele & Unterhaltung
Multimedia & Design
Unternehmen
Bedienungsanleitung
Was es ist und wofür es dient

Erzeugt die Webserver-Konfigurationsdatei, die eine SPA (Single Page App, Einzelseiten-Anwendung) braucht, um richtig zu funktionieren: Jeder Pfad, den der Server nicht als echte Datei erkennt, wird auf die Einstiegsdatei umgeschrieben (standardmäßig index.html), und von dort übernimmt das clientseitige Routing (Angular, React, Vue…) die Kontrolle. Wähle einen Server, passe die Optionen an, und die Ausgabe aktualisiert sich live; kopiere sie anschließend und füge sie in deinen Server ein.

Warum eine SPA diese Umschreibung braucht

In einer SPA gibt es nur eine echte HTML-Datei (index.html); Routen wie /tools/hamming oder /perfil/42 werden vom Router in JavaScript erfunden, es sind keine Ordner oder Dateien auf der Festplatte.

• Wenn der Nutzer innerhalb der App navigiert, läuft alles glatt: der Router zeichnet die Ansicht ohne Neuladen.
• Aber wenn er die Seite neu lädt, über einen direkten Link einsteigt oder diese URL teilt, fordert der Browser sie unverändert vom Server an. Der Server sucht diese Datei, findet sie nicht und antwortet mit 404.

Die Lösung besteht darin, dem Server zu sagen: „wenn der Pfad weder eine echte Datei noch ein echter Ordner ist, liefere index.html aus“. So startet der Router und löst die Route auf dem Client auf. Genau das erzeugt dieses Tool.

So wird es benutzt (Schritt für Schritt)

1. Wähle den Server, auf dem du deployst (Nginx oder Apache).
2. Gib den Basispfad ein, unter dem die App läuft (lass ihn bei /, wenn sie im Root der Domain liegt).
3. Passe die Fallback-Datei an, falls dein Einstiegspunkt nicht index.html heißt.
4. Aktiviere die gewünschten Extras: HTTPS-Weiterleitung, Komprimierung und Cache.
5. Die Konfiguration wird unten sofort erzeugt; klicke auf Kopieren und füge sie in die entsprechende Datei deines Servers ein.

Server: Nginx

Erzeugt einen server

Server: Apache (.htaccess)

Erzeugt eine .htaccess-Datei, die du im Root-Ordner der App ablegst (neben index.html). Verwendet mod_rewrite: RewriteEngine On, eine RewriteBase mit deinem Basispfad und zwei Bedingungen — !-f (keine Datei) und !-d (kein Ordner) —, die jeden anderen Pfad mit RewriteRule ^ <fallback> [L] auf den Fallback umschreiben. Erfordert, dass Apache mod_rewrite aktiviert hat und AllowOverride All in diesem Verzeichnis erlaubt.

Basispfad und Fallback-Datei

• Basispfad — der Pfad, unter dem die App bereitgestellt ist. Er ist /, wenn sie an der Domain-Wurzel liegt, oder etwas wie /tools/es/, wenn sie in einem Unterordner liegt. Er wird normalisiert, um mit / zu enden, und wird in Nginx' location/try_files und in Apaches RewriteBase verwendet.
• Fallback-Datei — die Einstiegsdatei, auf die alles umgeschrieben wird (standardmäßig index.html). Ändere sie nur, wenn dein Build einen anderen Einstiegspunkt erzeugt.

HTTPS-Weiterleitung

Fügt die Weiterleitung von HTTP zu HTTPS hinzu (Code 301), damit der gesamte Verkehr TLS nutzt. In Nginx wird die Konfiguration in zwei Blöcke aufgeteilt: einer auf Port 80, der weiterleitet, und ein anderer auf 443 ssl http2 mit Platzhaltern ssl_certificate / ssl_certificate_key, die du auf deine Zertifikate zeigen lassen musst. In Apache wird eine Regel mit RewriteCond %

Komprimierung und Cache

Zwei optionale Performance-Extras:

• gzip/deflate-Komprimierung — komprimiert HTML, CSS, JS und JSON vor dem Senden, damit sie schneller geladen werden (gzip on in Nginx; mod_deflate in Apache).
• Cache für statische Assets (1 Jahr) — weist den Browser an, Bilder, Schriften, CSS und JS 1 Jahr lang zu speichern (expires 1y + Cache-Control public, immutable in Nginx; mod_expires in Apache). Ideal, wenn deine Dateien einen Hash im Namen tragen; sonst könnte eine neue Version verzögert sichtbar werden.

Kopieren und bereitstellen

Die Kopfzeile der Ausgabe zeigt den Namen der Zieldatei (nginx.conf oder .htaccess). Drück den Kopieren-Button, um die gesamte Konfiguration in die Zwischenablage zu übertragen, und füge sie in diese Datei auf deinem Server ein. Denk daran, den Server neu zu laden, nachdem du die Änderungen angewendet hast, damit sie wirksam werden.

Nginx/Apache-SPA-KonfigurationErzeuge eine Konfiguration zum Bereitstellen einer SPA
Nginx-/Apache-SPA-KonfigurationGeneriere die Konfiguration zum Ausliefern einer SPA (Single Page App)
Server:
Pfad, unter dem die App bereitgestellt ist
nginx.conf
server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # Redirect HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    http2 on;   # nginx ≥ 1.25.1; en versiones anteriores: listen 443 ssl http2;
    server_name example.com;
    root /var/www/html;

    ssl_certificate     /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;

    # Security headers (no rompen una SPA; una CSP completa depende de tu app)
    server_tokens off;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header X-Frame-Options "DENY" always;
    add_header Content-Security-Policy "frame-ancestors 'none'; object-src 'none'; base-uri 'self'" always;
    add_header Strict-Transport-Security "max-age=31536000" always;   # añade includeSubDomains cuando TODOS los subdominios vayan por https

    # Nunca servir ficheros ocultos: .git/, .env, .htpasswd… (salvo .well-known)
    location ~ /\.(?!well-known) {
        deny all;
    }

    # Gzip compression
    gzip on;
    gzip_vary on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

    # Cache static assets — «immutable» solo es correcto si el nombre lleva hash (main-3F2A1B.js)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        # Repetidas: un add_header aquí anula las del server
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'; object-src 'none'; base-uri 'self'" always;
        add_header Strict-Transport-Security "max-age=31536000" always;   # añade includeSubDomains cuando TODOS los subdominios vayan por https
    }

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