17

I am having the hardest time deploying a simple react application to github pages. You move one file to a wrong directory and it throws the entire process off.

What do I do once I run npm run build?

That puts all my files into a build folder, but the browser still keeps giving me 404 errors, thinking that anything typed after the initial url route's "/" is looking for an actual file from a server. I just want to use whatever comes after the / as routes that I set up in my React Router... :(

Improve this question

1 Answer 1

Reset to default
23

Create-React-App has a detailed documentation on how to deploy your build to Github Pages and Heroku. You can read it here. Your specific issue is covered in "Notes on client-side routing" section.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Hey. Thanks for the response. This is the exact tutorial I followed. I'm thinking it has something to do with how the browser interprets the file. For instance, my app uses react-router, and when I want to go to a new route, i.e. /user/5/dashboard, I get an error 404 because I think the browser is looking for the root server, then a FOLDER it thinks that should be served called user, then a folder inside that called 5, then another inside that called dashboard. Tbh I followed the react tutorial to the TEE and the browser (chrome) still kept giving me error 404's. I don't know why.
React is for the frontend and therefore react-router offers frontend route solution only, so your backend has no idea about the route. This question and answers explains the concepts very well.
Yes, the problem is the server will serve your build in the root directory only. You need to configure your server to serve your build in other routes as well. This cannot be achieve with Github Pages since they don't support browserHistory option of react-router, you can fix it in a couple of ways I mentioned above. For Heroku you can setup a node.js + express server with the similar settings in react-router docs.
@user7024499 You can set up hash router with react router, or like Khang suggested, use heroku to setup a server that direct all the request to index.html
This answer should have more than just a link. "Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline." stackoverflow.com/help/how-to-answer
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.