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 macht

Erzeugt eine Konfigurationsdatei, um eine SPA (Single Page App) auszuliefern, sodass jede unbekannte Route auf die Einstiegsdatei umgeschrieben wird und das clientseitige Routing funktioniert. Die Ausgabe wird live entsprechend den Optionen aktualisiert.

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.

Optionen

Basispfad ist der Pfad, unter dem die App bereitgestellt ist (z. B. /tools/es/) und Fallback-Datei das Ziel der Umschreibung (standardmäßig index.html). Die Schalter fügen HTTPS-Weiterleitung, gzip/deflate-Kompression und Cache für statische Assets (1 Jahr) hinzu.

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

Drücke den content_copy-Button, um die erzeugte Konfiguration in die Zwischenablage zu kopieren und sie in deinen Server einzufügen.

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;
    }
}