Texto y documentos
Números y cálculo
Datos y formatos
Seguridad
Desarrollo y DevOps
Inteligencia Artificial
Finanzas
Salud y bienestar
Productividad
Juegos y entretenimiento
Multimedia y diseño
Empresa
Guía de uso
Qué es y para qué sirve

Genera el fichero de configuración del servidor web que necesita una SPA (Single Page App, aplicación de una sola página) para funcionar bien: cualquier ruta que el servidor no reconozca como fichero real se reescribe al fichero de entrada (por defecto index.html), y a partir de ahí el enrutado del lado cliente (Angular, React, Vue…) toma el control. Elige servidor, ajusta las opciones y la salida se actualiza en vivo; luego cópiala y pégala en tu servidor.

Por qué una SPA necesita esta reescritura

En una SPA solo existe un fichero HTML real (index.html); rutas como /tools/hamming o /perfil/42 las inventa el router en JavaScript, no son carpetas ni ficheros en el disco.

• Si el usuario navega dentro de la app, todo va bien: el router pinta la vista sin recargar.
• Pero si recarga la página, entra por un enlace directo o comparte esa URL, el navegador la pide tal cual al servidor. El servidor busca ese fichero, no lo encuentra y responde 404.

La solución es decirle al servidor: «si la ruta no es un fichero ni una carpeta reales, sirve index.html». Así el router arranca y resuelve la ruta en el cliente. Eso es exactamente lo que genera esta herramienta.

Cómo se usa (paso a paso)

1. Elige el servidor donde desplegarás (Nginx o Apache).
2. Escribe la Ruta base donde vive la app (déjala en / si está en la raíz del dominio).
3. Ajusta el Fichero fallback si tu entrada no es index.html.
4. Activa los extras que quieras: redirección HTTPS, compresión y cache.
5. La configuración se genera abajo al instante; pulsa Copiar y pégala en el fichero correspondiente de tu servidor.

Servidor: Nginx

Genera un bloque server { … } para tu nginx.conf (o el fichero del sitio en /etc/nginx/sites-available/). Trae listen 80, un server_name y root de ejemplo (ajústalos), y la clave del asunto: un bloque location con try_files $uri $uri/ <ruta><fallback>; — Nginx intenta servir el fichero o la carpeta pedidos y, si no existen, cae al fichero de entrada. Tras pegarlo, recarga con nginx -s reload.

Servidor: Apache (.htaccess)

Genera un fichero .htaccess que colocas en la carpeta raíz de la app (junto a index.html). Usa mod_rewrite: RewriteEngine On, un RewriteBase con tu ruta base y dos condiciones — !-f (no es fichero) y !-d (no es carpeta) — que reescriben cualquier otra ruta al fallback con RewriteRule ^ <fallback> [L]. Requiere que Apache tenga mod_rewrite activo y permita AllowOverride All en ese directorio.

Ruta base y fichero fallback

Ruta base — la ruta donde está desplegada la app. Es / si vive en la raíz del dominio, o algo como /tools/es/ si está en una subcarpeta. Se normaliza para acabar en / y se usa en el location/try_files de Nginx y en el RewriteBase de Apache.
Fichero fallback — el fichero de entrada al que se reescribe todo (por defecto index.html). Cámbialo solo si tu build genera otro punto de entrada.

Redirección HTTPS

Añade la redirección de HTTP a HTTPS (código 301) para que todo el tráfico use TLS. En Nginx separa la configuración en dos bloques: uno en el puerto 80 que redirige, y otro en el 443 ssl http2 con marcadores ssl_certificate / ssl_certificate_key que debes apuntar a tus certificados. En Apache añade una regla con RewriteCond %{HTTPS} off. Actívalo solo si ya tienes certificado TLS instalado.

Compresión y cache

Dos extras de rendimiento opcionales:

Compresión gzip/deflate — comprime HTML, CSS, JS y JSON antes de enviarlos, para que descarguen más rápido (gzip on en Nginx; mod_deflate en Apache).
Cache de assets estáticos (1 año) — dice al navegador que guarde imágenes, fuentes, CSS y JS durante 1 año (expires 1y + Cache-Control public, immutable en Nginx; mod_expires en Apache). Ideal cuando tus ficheros llevan hash en el nombre; si no, una versión nueva podría tardar en verse.

Copiar y desplegar

La cabecera de la salida muestra el nombre del fichero destino (nginx.conf o .htaccess). Pulsa el botón de copiar para llevar toda la configuración al portapapeles y pégala en ese fichero de tu servidor. Recuerda recargar el servidor tras aplicar los cambios para que surtan efecto.

Config Nginx/Apache SPAGenera configuración para servir una SPA
Config Nginx / Apache SPAGenera la configuración para servir una SPA (Single Page App)
Servidor:
Ruta donde está desplegada la app
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;
    }
}