react.js app showing 404 when refreshing in nginx server configured on macos

Question

I have configured MacOS for nginx and deployed my react js app on it it successfully deployed and running but when i reresh any page it shows 404 not found.

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8080;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       8080 default_server;
        server_name  TESTAPP;
        root  /var/www/TESTAPP;
        index index.html index.htm;      
        location / {
            root /var/www/TESTAPP/static;
            index  index.html index.htm;
            try_files $uri /index.html$is_args$args =404;
        }
    }
    include servers/*;
}

this should help - https://stackoverflow.com/questions/43555282/react-js-application-showing-404-not-found-in-nginx-server — Shyam, Jun 02 '21 at 13:23
the config file looks normal. What do you mean by 404 when **refresh**? So all the pages can be accessed the first time? — Someone Special, Jun 02 '21 at 15:16
@SomeoneSpecial I have deployed react app as it is a single page app. When I open the app everything works fine like normal but when i refresh the page or manual enter any url and hit enter it shows 404. I think it's rewrite url problem but I don't know how to solve this. — Muhammad Noman, Jun 03 '21 at 05:41
I will assumed you have converted all your pages into .html files? — Someone Special, Jun 03 '21 at 06:00
@SomeoneSpecial its a react app build which only contain one index.html file and remaining are compiled js files. — Muhammad Noman, Jun 04 '21 at 14:39

Someone Special · Answer 1 · 2021-06-05T09:15:11.257

0

Can you try if the following works for you?

This is what I use for my SPA.

server {
        listen 8080 default_server;

        root  /var/www/TESTAPP;
        index index.html index.htm;   

        server_name TESTAPP;

        location / {
                try_files $uri $uri/ =404;
        }
}

edited Jun 05 '21 at 09:15

answered Jun 03 '21 at 05:58

Someone Special

12,479
7
45
76

react.js app showing 404 when refreshing in nginx server configured on macos

1 Answers1