0

I have deployed my React App on a dedicated Windows Server. And I am using Nginx on it. When I write only the domain name in the address bar to access the Home Page, it is working fine. From the home page, I can go to any other URL by clicking on the buttons or any links. But when I directly write some URL other than the home page e.g. domain_name.com/login or domain_name.com/result?page=1, I am seeing a 404 page.

Here is the conf file


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name   domain_name.com www.domain_name.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\My_React_App\frontend\build;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

As I am using React, so there is only one file index.html which is to be served. How to write the location directive so if I directly write any valid URL other than the home page even with the query parameters in the address bar, I am not getting the 404 page?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Malina Dale
  • 153
  • 1
  • 3
  • 8
  • 1
    Use `try_files $uri /index.html;` directive in your `location / { ... }` block. Do you really need both `index.html` and `index.htm` as your index files? – Ivan Shatsky Oct 26 '21 at 19:50
  • So the directive now should look like this `location / { root C:\My_React_App\frontend\build; try_files $uri /index.html; }` or just this `location / { try_files $uri /index.html; }` – Malina Dale Oct 26 '21 at 19:56
  • Well, I actually don't know the difference. I just followed some tutorial of using React with Nginx and it was like this. – Malina Dale Oct 26 '21 at 19:58
  • 1
    You can place the `root` directive either at `server` or at `location` context (since you don't have other locations except the `location = /50x.html { ... }` which is definitely requires its own root). You will also need the `index` directive, and again, you can place it either at `server` or at `location` context. I just say that you don't need `index index.html index.htm`, only `index index.html` should be enough. – Ivan Shatsky Oct 26 '21 at 20:01
  • Got it. Thanks a lot. It is working fine now. – Malina Dale Oct 26 '21 at 20:07

0 Answers0