Skip to main content
ConfigGenerator
Docker ComposeDockerfileKubernetesTerraformNginxGitHub Actions.env File

Nginx spa-routing Generator

The NGINX SPA Routing Generator creates static asset servers optimized for React, Vue, and Angular applications. It instantly solves the infamous '404 Page Not Found' error on page refresh by routing all requests to index.html.

Loading editor...

Fixes 404 Errors

Configures try_files to natively support React Router.

Asset Caching

Injects aggressive browser caching headers for JS/CSS files.

How it Works

1

Set Web Root - Define the directory where your built assets live (e.g. `/usr/share/nginx/html`).

2

Configure Caching - Enable browser caching for static assets.

3

Generate Config - Download the SPA-optimized server block.

Best Practices

SPA routing requires an explicit fallback mechanism using the try_files directive.

try_files

$uri $uri/ =404 (Returns error)

$uri $uri/ /index.html (Boots React)

Cache-Control

None (Slow loads)

max-age=31536000 for static assets

Example Output

Here is a real generated snippet matching the production best practices above:

server {
    listen 80;
    server_name app.example.com;
    root /usr/share/nginx/html;
    index index.html;

    # SPA Routing Fallback
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Aggressive Caching for Static Assets
    location ~* \.(?:css|js|jpg|svg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}

Advanced Configuration Logic

Single Page Applications (SPAs) like React handle routing entirely in the browser using Javascript. If a user navigates to `yoursite.com/dashboard` and hits refresh, the browser asks the NGINX server for a physical file named `dashboard`. Since it doesn't exist, NGINX returns a 404 error. The configuration must be explicitly programmed to intercept these missing files and serve `index.html` instead, allowing React to boot and handle the route.

Frequently Asked Questions

Technical troubleshooting and advanced configuration insights for your infrastructure.

Ready to automate your infrastructure?

Scroll back up to the generator and export your production-ready configuration in seconds.

Start Building