Nginx routes and refresh cause 404

Question

I've set up an Express and React website using nginx and Elastic Beanstalk. It works fine when navigating the website, but if I refresh on a route other than the home route, or try type in a specific route other than the home route it causes a 404.

I've found a lot of different solutions to do with changing the nginx.config , and think I'm one step away. This is my current nginx.config :

server {

      listen 80;
      server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
 
      root /var/www/leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
      index index.html;

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

I've seen a lot of solutions suggesting to use root /usr/share/nginx/html; , however when I use this instead of the root above every page links to the nginx index.html. So I changed to try the root as the path to the domain, which I think I have wrong, but don't know how to work out the path, and currently causes 500 internal error on every route including the home route.

Any help would be massively appreciated, thanks.

Answer 1

I think your nginx config has the wrong syntax. In the below nginx.conf, the / location points to your index.html in the folder /var/www/html

server {

      listen 80;
      server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
 
      location / {
        root /var/www/html;
        index index.html
        try_files $uri $uri/ /index.html;
      }
    }

You need to manually copy all the content of the client/build folder to /var/www/html - or you can just create a symlink (which is IMO not the very best solution, but it should work)

ln -s client/build /var/www/html

If you want to work with a symlink, make sure to remove the folder before creating the symlink otherwise you get an error