React JS router not working on Nginx docker container

Problem Statement

I developed a simple ReactJS application where I have used BrowserRouter, and have 4-5 different url paths, which was working fine on development server. I prepared a build using npm run build, and it created a build folder which can be served on an nginx server.

I have a Dockerfile which just take a Nginx base docker image and copy my build folder into it.

FROM nginx

COPY ./build /usr/share/nginx/html

I make a docker image using:

docker build -t my-test-app:latest .

But, when I ran it. Home page opens perfectly fine.

But, not other pages. As I clicked on other routes. I got a 404 page.

Solution

Since apps made by reactjs are single page app. All the routing is being handled by index.html page. But, nginx doesn’t know about this. It simply tries to find the file by that name, and the file doesn’t found. Hence the 404 error.

I had to change the default configuration of nginx. I ran the container again, copy the default configuration to my local copy.

docker cp <container_id>:/etc/nginx/conf.d/default.conf .

Look for the area where location / is defined. In my case, it was:

location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
}

I had to tell nginx, that put all reqeust to index.html.

The change I did to default.conf

location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri /index.html;
}

What is try_files

It accepts a param $uri, the path coming in request. It checks, if it exists or not. If yes, pass it there. If not exists, try the URL we are passing.

Now my Dockerfile looks like:

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./build /usr/share/nginx/html

And, now prepare docker image, run it. And, it runs as expected.