CODEWITHSUNDEEP
reactjsnginx
Sunil tc
Sunil tc

Reputation: 2592

react.js application showing 404 not found in nginx server

I uploaded react.js application to a server. I'm using nginx server. Application is working fine. But when I go to another page & refresh, the site is not working. It's showing a 404 Not found error.

How can I solve this?

Upvotes: 99

Views: 124755

Answers (13)

Aniruddha Mukherjee
Aniruddha Mukherjee

Reputation: 1

If you encounter the same issue with your React application on Nginx, where the reload button doesn't work but navigation within the app functions correctly, you can try this solution:

listen  [::]:80;
server_name  localhost;
location / {
   root   html;
   index  index.html index.htm;
}

Upvotes: 0

Tiwari
Tiwari

Reputation: 50

Alternative option for Reac-JS
you can use HashRouter instead of BrowserRouter.

HashRouter
<HashRouter> is for use in web browsers when the URL should not (or cannot) be sent to the server for some reason. This may happen in some shared hosting scenarios where you do not have full control over the server. In these situations, <HashRouter> makes it possible to store the current location in the hash portion of the current URL, so it is never sent to the server.

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 9913

I was facing the same issue and fixed it. I was facing this when I deployed my app on AWS EC2, the App was running but after refers it was showing the error "404 not found".

Solution: It might be possible that your system or EC2 doesn't have the nginx installed.

Step 1: First you need to install the nginx by using the below command:

sudo apt update
sudo apt install nginx

Step 2: Restart the nginx by command sudo service nginx restart

Step 3: Go to your react app and create a nginx.conf file and write the below codes:

server {
    listen       80;
    server_name  localhost;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Step 4: Update your dockerfile, and add the COPY command to copy the nginx.conf file to /etc/nginx/conf.d/default.conf. Here are the full Dockerfile codes:

FROM node:14 as builder
WORKDIR /app
COPY package.json .
RUN npm i --production
COPY . .
RUN npm run build

FROM nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Step 5: Now build your app using whatever technique, whether CI/CD or manually, and see the changes, It will work.

Upvotes: 0

Nabin Kumar Khatiwada
Nabin Kumar Khatiwada

Reputation: 1646

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ /index.html  =404;
        } }

In location /index.html points to index.html on reload.

Upvotes: 0

ding van
ding van

Reputation: 315

If your are using nextjs like I am, maybe you need add this to next.config.js

module.exports = {
  trailingSlash: true,
}

And build your project again.

For reference: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

Upvotes: 0

Elijah Baraza
Elijah Baraza

Reputation: 311

This worked for me while using nginx to serve react:

Edit the location section of the nginx.conf(or can also be default.conf) file to be as below. The nginx.conf file is found somewhere in /etc/nginx/sites-available/yoursite

location / {
   # First attempt to serve request as file, then
   # as directory, then redirect to index(angular) if no file found.
   try_files $uri $uri/ /index.html;
}

The full nginx.conf configuration will therefore be as below:

   server {
        listen 80 default_server;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;

        location /{
            try_files $uri $uri/ /index.html;
        }
    }

Upvotes: 7

Panther
Panther

Reputation: 9408

When your react.js app loads, the routes are handled on the frontend by the react-router. Say for example you are at http://a.com. Then on the page you navigate to http://a.com/b. This route change is handled in the browser itself. Now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.

To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately

location / {
 try_files $uri /index.html;
}

This tells nginx to look for the specified $uri, if it cannot find one then it send index.html back to the browser. (See https://serverfault.com/questions/329592/how-does-try-files-work for more details)

Upvotes: 271

Ricardo Luiz Pereira
Ricardo Luiz Pereira

Reputation: 759

For me the solution was:

location / {
            root /var/www/myapp/build;
            index index.html;
            try_files $uri /index.html$is_args$args =404;
    }

Upvotes: 45

Elizandro - SparcBR
Elizandro - SparcBR

Reputation: 359

After many hours I finally got this working with:

try_files $uri /index.html$is_args$args =404;

The last arg (=404) is what made this work.

Upvotes: 11

Mahi
Mahi

Reputation: 107

This worked for me

location /{
try_files $uri $uri/ /index.html$is_args$args;
}

Upvotes: 1

Codemaker2015
Codemaker2015

Reputation: 1

The problem comes when you are in a path for eg http:///some/path and you hit refresh you get a 404 error page. This extra line in the ngnix configuration could solve the issue.

location /{
                try_files $uri $uri/ /index.html?/$request_uri;
          }

After adding do a nginx service restart.

Upvotes: 2

Keet Sugathadasa
Keet Sugathadasa

Reputation: 13502

The answers given here are correct. But, I was struggling with this when trying to deploy my React Application in a docker container. The problem was on, how to change the nginx configs inside a docker container.

Step 1: Prepare your Dockerfile

# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

See line with command: COPY nginx.conf /etc/nginx/conf.d/default.conf. Here, we are telling Docker to copy the nginx.conf file from the docker host, to the docker container.

Step 2: Have a nginx.conf file in your application root folder

server {
    listen       80;
    server_name  localhost;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Step 3: Now build the docker image and run it

$ docker build . -t react-docker

This should build your docker image successfully. To check that, run 

$ docker images

Now run 

$ docker run -p 8000:80 react-docker

and navigate to http://localhost:8000

This was inspired by this blog.

Upvotes: 74

Anupam Maurya
Anupam Maurya

Reputation: 2201

try using following commands in sites-enabled

sudo nano /etc/nginx/sites-available/Your_WEB_Folder

try_files $uri $uri/ /index.html;

Get me some towers now!

Upvotes: -3

Related Questions