React-router issues with deploying github pages, with create-react-app

Question

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... :(

Solution

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.

Comments

[user7024499]

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.

[Khang Lu]

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.

[Khang Lu]

There are solutions in the same create-react-app tutorial sections as well. You can switch to using hashHistory instead of browserHistory in your <Router> component, or handle 404 by redirecting to your index.html.

[user7024499]

I am using browserHistory from react-router. Just found the docs that say " Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."

[Khang Lu]

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.

[xiaofan2406]

@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

[supritshah1289]

This is the best explanation on how to deploy react app to Github pages. It also shows how to do it with Surge. Deploying React app on surge is piece of cake. Deploying oh ghpages and surge

[Todd Chaffee]

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

[randomguy04]

You can now get your navigation working with BrowserRouter by passing a baseName prop with the value of process.env.PUBLIC_URL, checkout this SO Asnwer, you can see a working example here