👨‍🔧Deploy your React app on GitHub. [fixing routes problems]🔥

Antonio Goeminne — Wed, 11 Aug 2021 20:42:57 +0000

Before we start.

I will be direct, there are a lot of information of how to deploy a react app on github using the gh-pages dependency, so i am going to give quickly instruccions of that. i will explain better the part that allows you to not have problems with routes.

Intro

I needed do this post because of when i had this problem i didn't find any solution, every post were about deploying an app in the begining but no one fixed my problem with Routes.
In react you can use(you should have to) react-router-dom. It's a dependency that allows you configure a router to have in your development. I found myself creating a react app with more than five routes when i decided to deploy this on github and this was the result:

Nothing happened, the web was in white for a long time.

what do you have to do?

install gh -pages in the folder where is the repository.
make sure you got node .js , npm and react-router-dom in the last versions.
After having your repositorie commited you have to go the node dependencys in the top and write

"homepage": "https//*yourname*.github.io/*deployname*"
in the same archive go to the "script" and at the beginning write

pre-build:"npm run build" and build:"gh-pages -d build"

At this point just left one more command to deploy your app but that doesn`t fix the route problem.

the route problem

When you deploy your app on github you got to put your homepage with the deploy name, and this generate the white page that doesn`t load. So you have to make sure that your home route to the same name of your app.
Tip: like your app is not finding the route '/' it will show you a 404 error page, so it is a good note to configure your 404 error page. In react-router-dom you can do it quickly whit this route'*'.

let`s finish this

After do all , go to the folder repository and write
npm run deploy
and that`s all. you have to wait some minutes to this works.

if this doesn`t work

it could happen this does not work you, because in one of my deploys i had to add an extra pass that at these days i dont` know why i had to did it.
After you write npx bla bla and create your react app it comes with default folders and files, one of them are App.
For some reason i had to put the routes on this file (App.jsx) and after that it worked.

DEV Community: Antonio Goeminne