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

Katinka Hesselink
  • 3,961
  • 4
  • 20
  • 26
user7024499
  • 951
  • 1
  • 10
  • 24

1 Answers1

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.

brc-dd
  • 10,788
  • 3
  • 47
  • 67
Khang Lu
  • 959
  • 9
  • 12
  • 1
    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. – user7024499 Nov 04 '16 at 01:59
  • 1
    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](https://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing) explains the concepts very well. – Khang Lu Nov 04 '16 at 03:11
  • There are solutions in the same create-react-app tutorial sections as well. You can switch to using hashHistory instead of browserHistory in your component, or handle 404 by redirecting to your index.html. – Khang Lu Nov 04 '16 at 03:13
  • 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." – user7024499 Nov 04 '16 at 03:14
  • 1
    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. – Khang Lu Nov 04 '16 at 03:25
  • 1
    @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` – xiaofan2406 Nov 04 '16 at 05:08
  • 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](https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089) – supritshah1289 Oct 04 '17 at 17:47
  • 3
    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." https://stackoverflow.com/help/how-to-answer – Todd Chaffee Oct 20 '17 at 12:28
  • 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](https://stackoverflow.com/questions/40776651/can-i-create-routes-with-react-router-for-a-github-pages-site/47420338#47420338), you can see a [working example here](https://valecarlos.github.io/admin-dashboard/) – Carlos Valencia Nov 21 '17 at 18:41