1

We have a single page application (created using create-react-app) that uses React in the browser and a nodejs/express server on the backend. The application allows users to register, login, and perform various functions. After a user registers with an email address, the React app (via our backend server) sends an email to the user with an email verification link. The user clicks on the link (e.g. example.com/accountVerification/:id) which is opened in the browser. Once opened the React app then verifies the email address with the backend server and the user is now allowed to login.

This all works fine without issues when running the React app using the development build, i.e. using 'npm start'.

However, in production, we deploy a production build generated using 'npm run build'. We serve the app using nginx. In this environment nginx has been configured to serve the index.html file that was generated in the build process. Again, things work fine, except when using the email verification link which gives a 404. It seems that any trailing page after the '/' in the url fails and results in a 404.

So the question is, how are email verification links supposed to work when using a production build of a React app? Or more generally, why does a browser refresh fail (404) when running a production build of a React app?

Matt Wenger
  • 31
  • 7
  • Does this answer your question? [React-router and nginx](https://stackoverflow.com/questions/43951720/react-router-and-nginx) – Pedro Rio Feb 12 '20 at 00:55
  • @pedro-rio, that partially answers my question. However, I'm still trying to figure out how to support the email verification link. – Matt Wenger Feb 13 '20 at 01:08
  • Sorry for the delay in responding! I did resolve my issue. It was because the email verification link had the wrong port. Hence it was failing. – Matt Wenger Jun 19 '20 at 20:54

1 Answers1

0

You have to configure nginx to serve the index.html for all routes, so add:

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

to your nginx config.

Pedro Rio
  • 66
  • 1
  • 6
  • Pedro, thanks for the response. That helped! With that change, when I reload the page, I don't get 404's anymore and the index.html file is loaded. However, the email verification issue still remains as nginx is serving index.html which is equivalent to '/'. How am able to pass the url to the React app so that it hits my verification component which then makes a call back to the backend server? – Matt Wenger Feb 12 '20 at 03:31