Text & documents
Numbers & maths
Data & formats
Security
Development & DevOps
Artificial Intelligence
Finance
Health & Wellness
Productivity
Games & Entertainment
Multimedia & design
Business
How to use
What it is and what it's for

Generates the web-server configuration file a SPA (Single Page App) needs to work correctly: any path the server doesn't recognize as a real file is rewritten to the entry file (index.html by default), and from there the client-side router (Angular, React, Vue…) takes over. Pick a server, tweak the options and the output updates live; then copy it and paste it into your server.

Why a SPA needs this rewrite

In a SPA there is only one real HTML file (index.html); paths like /tools/hamming or /profile/42 are made up by the JavaScript router — they are not folders or files on disk.

• If the user navigates inside the app, all is well: the router renders the view without reloading.
• But if they reload the page, arrive via a direct link or share that URL, the browser requests it as-is from the server. The server looks for that file, doesn't find it and responds 404.

The fix is to tell the server: "if the path is not a real file or folder, serve index.html". That way the router boots and resolves the route on the client. That is exactly what this tool generates.

How to use it (step by step)

1. Pick the server you'll deploy on (Nginx or Apache).
2. Enter the Base path where the app lives (leave it as / if it's at the domain root).
3. Adjust the Fallback file if your entry point isn't index.html.
4. Enable the extras you want: HTTPS redirect, compression and cache.
5. The configuration is generated below instantly; press Copy and paste it into the matching file on your server.

Server: Nginx

Generates a server

Server: Apache (.htaccess)

Generates a .htaccess file you drop into the app's root folder (next to index.html). It uses mod_rewrite: RewriteEngine On, a RewriteBase with your base path and two conditions — !-f (not a file) and !-d (not a folder) — that rewrite any other path to the fallback with RewriteRule ^ [L]. It requires Apache to have mod_rewrite enabled and allow AllowOverride All in that directory.

Base path and fallback file

Base path — the path where the app is deployed. It's / if it lives at the domain root, or something like /tools/es/ if it's in a subfolder. It's normalized to end in / and is used in Nginx's location/try_files and in Apache's RewriteBase.
Fallback file — the entry file everything is rewritten to (index.html by default). Change it only if your build produces a different entry point.

HTTPS redirect

Adds the HTTP-to-HTTPS redirect (301 code) so all traffic uses TLS. On Nginx it splits the config into two blocks: one on port 80 that redirects, and another on 443 ssl http2 with ssl_certificate / ssl_certificate_key placeholders you must point at your certificates. On Apache it adds a rule with RewriteCond %

Compression and cache

Two optional performance extras:

gzip/deflate compression — compresses HTML, CSS, JS and JSON before sending them, so they download faster (gzip on on Nginx; mod_deflate on Apache).
Static-asset cache (1 year) — tells the browser to keep images, fonts, CSS and JS for 1 year (expires 1y + Cache-Control public, immutable on Nginx; mod_expires on Apache). Ideal when your files carry a hash in the name; otherwise a new version could take a while to show up.

Copy and deploy

The output header shows the target file name (nginx.conf or .htaccess). Press the copy button to send the whole configuration to the clipboard and paste it into that file on your server. Remember to reload the server after applying the changes for them to take effect.

Nginx/Apache SPA configGenerate config to serve a SPA
Nginx / Apache SPA configGenerate the config to serve a SPA (Single Page App)
Server:
Path where the app is deployed
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;
    }
}