Surge-deployed React app - getting 404 Page Not Found

I have an app that is running on (http://simple-pen.surge.sh). This is built with React/Redux for Front-end and Rails for back-end. When I get on the site, I can either sign-up or sign-in and issue a JWT token for the user. Once logged in, I have a set of notebooks I can view. However, it's only when clicking on a notebook, I get redirected to a 404 Page Not Found error.

I'm not sure why I get an error when making the GET request to certain pages. Trying to access "http://simple-pen.surge.sh/notebooks/1/notes" url, but fails. In one scenario, I have it set so if the user is logged in, the "simple-pen.surge.sh" root path redirects the user to their notebooks route i.e. "http://simple-pen.surge.sh/notebooks" which renders the page, but when I make an actual request for this URL directly, I then get the error.

Below are links to GitHub repos for React and Rails app respectively. https://github.com/jamesvphan/simplepen-react https://github.com/jamesvphan/simplepen

Any help or knowledge as to why this is occurring would be great!

Solution

You can't access your routes directly. you have to do this little hack for that.

After you run the npm run build command you have to go to the build folder of your react application folder.
Take a copy of index.html file. then past it in the same place and rename it as 200.html now it will work as we wish. This is all for today.