Configure NGINX for client side routing - nginx

Question

I have a side made with React running on Digital Ocean and I'm trying to use client side routing but can't get it to work. This is my Nginx default file
upstream site {
server 123.456.78.90:8080;
keepalive 64;
}
server {
server_name site.xyz www.site.xyz;
try_files $uri /index.html;
location / {
index index.html;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
try_files $uri index.html;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_max_temp_file_size 0;
proxy_pass http://site/;
proxy_redirect off;
proxy_read_timeout 240s;
}
error_page 404 /index.html;
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/site.xyz/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/site.xyz/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.site.xyz) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = site.xyz) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name site.xyz www.site.xyz;
return 404; # managed by Certbot
}
I added the try_files line and the error_page 404 /index.html so that it would default to index.html where the route could be loaded from my code there but it doesn't work at all. I need the ssl certificate and I need the cors code for another function. I'm not sure why it doesn't direct how I want.

Answer 1

Here's what worked for me:
...
location / {
...
proxy_intercept_errors on;
error_page 404 = /index.html;
...
}