Cannot use url to navigate in react through nginx

Question

I am serving my static file using nginx(react frontend). I have used different urls like /login /user /home for each page.

My nginx doesn't redirect these to my index.html file.

I made some changes and now I cannot get my main page either. It returns cannot get /.

This is my nginx.conf file. I am running it on windows. My index.html is inside the build folder. How do I get my nginx to use Router and Link in reactjs, so that I can get the page by referring to the link or through navigation bar?

worker_processes  5;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


    server {
        listen   80;
        server_name  ip;

        location / {
            root   /Users/username/projectfolder/build;    
            index  index.html index.htm;
            try_files $uri $uri/ index.html;
            proxy_pass http://ipaddress:portnumber;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
         }
     }
 }

UPDATE:

I have tried the following configuration

server {
        listen some_port;
        server_name some_ip;
        root C:\\nginx-1.17.1\\build\\;
        index  index.html index.htm;
        location /test/ {   
            alias C:\\nginx-1.17.1\\build\\;
            index  index.html index.htm;
            try_files $uri \\index.html;
            #internal;

            #return index;
        }
        location = /index.html {
        # no try_files here
        return 502;
    }
        location / {  
            #root   C:\\Users\\DEV-a0a02yc\\insurance_automation\\build;
            try_files $uri $uri\ \index.html?$args;
            #try_files $uri/ index.html;
            proxy_pass http://some_ip:some_port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }

In the /test/ url I am getting a blank page and a rewrite/internal redirection error saying :

2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"

This is my network tab:

How do I serve my index.html file here to handle redirection when entering this url?

seahorsepip · Accepted Answer · 2019-06-30T09:47:40.140

5

What are the proxy lines for in your configuration?

Shouldn't you either serve from html files or proxy pass to a different address?

I would suggest trying to remove the proxy lines from the configuration.

Also on an unrelated note the proxy_pass line is invalid. The server address "ipaddress" is a far stretch (though not impossible with dns) and the port "portnumber" is definitely invalid.

So the minimum required configuration is the following:

location / {
    root /folder/subfolder/build;
    try_files $uri /index.html;
}

root defines your react build folder location and try_files defines that nginx should look if the requested file exists, if not it serves the index.html.

edited Jun 30 '19 at 09:47

answered Jun 30 '19 at 09:25

seahorsepip

4,519
1
19
30

ipaddress and port number indicate numbers in my original file. I have just given them for reference here. And removing the proxy lines doesn't work. What is the general way of enabling the use of routing in react through nginx? – Abdul Ahad Jun 30 '19 at 09:34
I've added the minimal configuration required to my answer, the root option points at your react build location and the try_files option first looks if the file exists that's requested in the uri, if not it will serve index.html. – seahorsepip Jun 30 '19 at 09:49
That is the issue, urls show a 404 message, I just now tried replacing location / with location * and it worked and then when I restarted it, it stopped again. – Abdul Ahad Jun 30 '19 at 09:54
```location /``` should match all urls (```location = /``` matches root only) so that shouldn't be the issue. – seahorsepip Jun 30 '19 at 10:03
All I want is that when I type something/login, I should go to login Right now if I click on login button it does take me to that page but if I type the same and hit enter I get 404 nginx error. Also, interestingly, all this works on localhost but not on the ip I specified. – Abdul Ahad Jun 30 '19 at 10:10
When you run it on localhost (npm start), a minimal server is running in a node instance that does this routing for you. For a production server, you configure it yourself with nginx. Make sure that index.html does actually exist at that root location and not in a subdirectory or has a different name like index.htm instead. – seahorsepip Jun 30 '19 at 10:14
It surely exists there as now I am getting the main page through the ip. Only when I type in a specific url, I get the 404 error. – Abdul Ahad Jun 30 '19 at 10:17
Hmm, you can try ```try_files $uri $uri/ /index.html;```. – seahorsepip Jun 30 '19 at 10:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195757/discussion-between-seahorsepip-and-abdul-ahad). – seahorsepip Jun 30 '19 at 10:20
It worked. I was adding proxy_pass inside location /. I defined separate paths for location / (no proxy_pass here as mentioned in the answer) and for my api calls ( included proxy_pass in it). And it worked. – Abdul Ahad Jul 01 '19 at 10:02

Cannot use url to navigate in react through nginx

UPDATE:

1 Answers1