Hosting Blazor Standalone WASM on NGINX

I'm having some issues hosting blazor WASM standalone (without an asp.net core project as host) behind nginx as a reverse proxy.

Here is my Nginx default config file:

server {
        listen 80;
        listen [::]:80;

        server_name localhost;

        location / {
                root /var/www/web/BlazorApp/wwwroot;
                try_files $uri $uri/ index.html =404;

                include /etc/nginx/mime.types;
                types {
                        application/wasm wasm;
                }
                default_type application/octet-stream;
        }

        location /service1/ {
                proxy_pass http://localhost:5001/;
                proxy_http_version 1.1;
                proxy_set_header   Upgrade $http_upgrade;
                proxy_set_header   Connection keep-alive;
                proxy_set_header   Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header   X-Forwarded-Proto $scheme;
        }

        location /service2/ {
                proxy_pass http://localhost:5002/;
                proxy_http_version 1.1;
                proxy_set_header   Upgrade $http_upgrade;
                proxy_set_header   Connection keep-alive;
                proxy_set_header   Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header   X-Forwarded-Proto $scheme;
        }

        location /service3/ {
                proxy_pass http://localhost:5003/;
                proxy_http_version 1.1;
                proxy_set_header   Upgrade $http_upgrade;
                proxy_set_header   Connection keep-alive;
                proxy_set_header   Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header   X-Forwarded-Proto $scheme;
        }
}

This Configuration works in the sense that I can access my blazor app using

http://{server-ip-address}

and my other services using

http://{server-ip-address}/serviceX

where X would refer to service 1,2 and 3 respectively

First issue: when I navigate in my blazor app for example to http://{server-ip-address}/My-Blazor-Page and I refresh the page I get a 404 not found error.

for it to work back again I need to go back to the base address http://{server-ip-address} and navigate back to My-Blazor-Page. I cannot refresh a page and go back to the same page.

Second issue: I would like my blazor app to have a different location. I would like to use http://{server-ip-address}/Blazor rather than http://{server-ip-address}/.

I tried everything to get it right but this is the only config that semi-works

Many thanks for your help!

From the ASP.NET documentation:

The following nginx.conf file is simplified to show how to configure Nginx to send the index.html file whenever it can't find a corresponding file on disk.

When setting the NGINX burst rate limit with limit_req, Blazor WebAssembly apps may require a large burst parameter value to accommodate the relatively large number of requests made by an app. Initially, set the value to at least 60:

Increase the value if browser developer tools or a network traffic tool indicates that requests are receiving a 503 - Service Unavailable status code.

For more information on production Nginx web server configuration, see Creating NGINX Plus and NGINX Configuration Files.

The above will try the URL, and if no file matches, it'll serve index.html instead. This is the way.

For your second issue, you should set the base attribute value to "Blazor" and put all files in the Blazor directory (the config needs to match this). You can also route differently, but this is the easiest.