CODEWITHSUNDEEP
reactjssurge.sh
jamesvphan
jamesvphan

Reputation: 1985

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!

Upvotes: 15

Views: 14517

Answers (3)

isuruAb
isuruAb

Reputation: 2240

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

  1. After you run the npm run build command you have to go to the build folder of your react application folder.
  2. 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.

read more about this issue: here

Upvotes: 14

Shubham Prakash
Shubham Prakash

Reputation: 413

Follow below step to resolve(only 4 surge):

  1. npm run build
  2. cd build
  3. cp index.html 200.html
  4. surge

From here you can continue as usual

Upvotes: 33

Kyle Pennell
Kyle Pennell

Reputation: 6117

Change your build step in package.json

"build": "react-scripts build && cp build/index.html build/200.html"

Source: https://medium.com/superhighfives/serving-client-side-routing-with-surge-sh-7b705542cf3

Upvotes: 7

Related Questions