Deploying your react app using Github pages

So you have created a react app and you’re excited to show your new application to your friends so they can see the cool new application you just built, but it's not easy to have each of them view it on your personal device and you’ll love it if every one of them can view your application on their laptops or their mobile phones. One way to do this is using github pages, it’s totally free and easy to use. In this article I will explain how to deploy your react app using github pages and in no time you will be able to show everyone your application and they will be able to view it on their personal devices.

STEP 1: The first thing you do is go to your project folder, open package.json in your text editor and add homepage to it. Basically what you’re doing is adding this line of code

“homepage” : "https://{your-git-hub username}.github.io/{name of your project’s repository}."

In the image above the github username is Quadrizz and the name of the project’s repository is Updated_Robofriends. Once you’re done with this you can now move on to the next step

STEP 2: The next thing to do is open your terminal, and navigate to your project folder. Run one of the following command depending on the terminal you're using “npm install –save gh-pages” or “yarn add gh-pages”. Once the installation is done, proceed to step 3.

STEP 3: After installing github pages, open package.json and move to the scripts section of the code, add the following line of code to the script section.

“predeploy “ : “npm run build”, “deploy” : "gh-pages -d build" What the pre-deploy script does is that it builds our project by creating a production version of the project and creating a build folder.

STEP 4: Now that we have added to our package.json all you have to do is run the following command.

npm run deploy

When it is done, you will see a message that says "Published". Move to your repository on github and click on settings, scroll down to github pages and change the source to gh-pages branch. It takes a while before the changes is applied or you have to refresh the page to ensure that the settings has been updated. If all goes well you'll see a link a link to your deployed app.

That way you have a production ready app and you can go ahead to share your app with all your friends to view it.