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-30 09:47:40Z

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, 2019 at 9:47

answered Jun 30, 2019 at 9:25

seahorsepip

4,9092 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Abdul Ahad Over a year ago

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?

seahorsepip Over a year ago

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.

Abdul Ahad Over a year ago

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.

seahorsepip Over a year ago

location / should match all urls (location = / matches root only) so that shouldn't be the issue.

Abdul Ahad Over a year ago

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.

|

Collectives™ on Stack Overflow

Cannot use url to navigate in react through nginx

UPDATE:

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related