Texte & documents
Nombres & calcul
Données & formats
Sécurité
Développement & DevOps
Intelligence artificielle
Finances
Santé et bien-être
Productivité
Jeux et divertissement
Multimédia & design
Entreprise
Guide d'utilisation
Ce qu'il fait

Génère un fichier de configuration pour servir une SPA (Single Page App), de sorte que toute route inconnue soit réécrite vers le fichier d'entrée et que le routage côté client fonctionne. Le résultat se met à jour en direct selon les options.

Pourquoi une SPA a besoin de cette réécriture

Dans une SPA il n'existe qu'un seul fichier HTML réel (index.html) ; des routes comme /tools/hamming ou /profil/42 sont inventées par le routeur en JavaScript, ce ne sont ni des dossiers ni des fichiers sur le disque.

• Si l'utilisateur navigue dans l'application, tout va bien : le routeur affiche la vue sans recharger.
• Mais s'il recharge la page, entre par un lien direct ou partage cette URL, le navigateur la demande telle quelle au serveur. Le serveur cherche ce fichier, ne le trouve pas et répond 404.

La solution consiste à dire au serveur : « si la route n'est ni un fichier ni un dossier réels, sers index.html ». Ainsi le routeur démarre et résout la route côté client. C'est exactement ce que génère cet outil.

Comment l'utiliser (étape par étape)

1. Choisissez le serveur où vous déploierez (Nginx ou Apache).
2. Écrivez le Chemin de base où vit l'application (laissez / si elle est à la racine du domaine).
3. Ajustez le Fichier de repli si votre point d'entrée n'est pas index.html.
4. Activez les extras souhaités : redirection HTTPS, compression et cache.
5. La configuration se génère en bas instantanément ; cliquez sur Copier et collez-la dans le fichier correspondant de votre serveur.

Serveur : Nginx

Génère un bloc server

Serveur : Apache (.htaccess)

Génère un fichier .htaccess que vous placez dans le dossier racine de l'application (à côté de index.html). Utilise mod_rewrite : RewriteEngine On, un RewriteBase avec votre chemin de base et deux conditions — !-f (n'est pas un fichier) et !-d (n'est pas un dossier) — qui réécrivent toute autre route vers le repli avec RewriteRule ^ <repli> [L]. Nécessite qu'Apache ait mod_rewrite actif et autorise AllowOverride All dans ce répertoire.

Options

Chemin de base est le chemin où l'app est déployée (p. ex. /tools/es/) et Fichier de repli la cible de la réécriture (par défaut index.html). Les interrupteurs ajoutent la redirection HTTPS, la compression gzip/deflate et le cache des assets statiques (1 an).

Redirection HTTPS

Ajoute la redirection de HTTP vers HTTPS (code 301) pour que tout le trafic utilise TLS. Sous Nginx, la configuration est séparée en deux blocs : un sur le port 80 qui redirige, et un autre sur le 443 ssl http2 avec des marqueurs ssl_certificate / ssl_certificate_key que vous devez pointer vers vos certificats. Sous Apache, ajoute une règle avec RewriteCond %

Compression et cache

Deux extras de performance optionnels :

Compression gzip/deflate — compresse HTML, CSS, JS et JSON avant de les envoyer, pour qu'ils se téléchargent plus vite (gzip on sous Nginx ; mod_deflate sous Apache).
Cache des assets statiques (1 an) — indique au navigateur de conserver images, polices, CSS et JS pendant 1 an (expires 1y + Cache-Control public, immutable sous Nginx ; mod_expires sous Apache). Idéal quand vos fichiers portent un hash dans le nom ; sinon, une nouvelle version pourrait tarder à apparaître.

Copier

Appuyez sur le bouton content_copy pour copier la configuration générée dans le presse-papiers et la coller sur votre serveur.

Config Nginx/Apache SPAGénérez une configuration pour servir une SPA
Config Nginx / Apache SPAGénérez la configuration pour servir une SPA (Single Page App)
Serveur :
Chemin où l'app est déployée
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;
    }
}