How to build and deploy a React app to Github pages in less than 5 minutes

Understanding React deployment
After all your development and unit testing, there comes a time when you need to deploy your application on a testing or production server and ask yourself: “how?”.
Choosing the correct server
First thing you need to figure out is what kind of server / hosting environment will you need.
There’s generally one rule — if your app is using server-side rendering you must go with a node server.
In other cases, you can basically deploy your application on anything you want — apache, nginx, express or host it on a CDN like S3 (Amazon) or gh-pages. This article will focus on the last one i.e., deploying to Github pages.
- Deploy react application on Apache/ Nginx ( or production server)
- Deploy react application on Docker
- Deploy react applications using Netfly or buddy works
- Deploy react application using GitHub pages
Prerequisite:
- Github account and git installed
- Node.js and npm installed in your machine(Node 8.10.0 or later versions are accepted)
Fork the following GitHub repo to get the project files: https://github.com/anil-pace/react-toDoApp
Getting Started
Skip these steps and move to the deployment section if you’ve already built the React app
Step1: Create the React app: npx create-react-app your-app-name
Step2: Go to the project repo: cd your-app-name
Step3: Copy the src and public folder from the following repo https://github.com/anil-pace/react-toDoApp (You can customize the files according to your preferences) and substitute them in the your-app-name
folder.
Step4: Run your application: npm start
You can now see the app running in the localhost browser popup like this:
Congratulations, you’ve created your react app, let’s move to deployment for building a website out of it.
Deployment
Make sure your react app code is already pushed to the GitHub account under some {Github-repo-name}.
Step 1: Install the gh-pages
package as a “dev-dependency” of the app
npm install gh-pages — save-dev
Step 2: Add homepage property to package.json
file
Open package.json and add
“homepage”: “http://{Github-username}.github.io/{Github-repo-name}"

Note: If you are linking your domain name to your Github pages, this line would be a little different, it should be: "homepage": "your-custom-domain"
Step 3: Deploy scripts under package.json
file
In the existing scripts property, add a predeploy
property and a deploy
property, each having the values shown below:
“scripts”:{
...
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
...
}

The predeploy
command helps to bundle the react app while the deploy
command fires up the bundled file.
Step 4: Create a remote GitHub repository
(Skip this step if your remote GitHub repository is already initialized)
Initialize: git init
Add it as remote: git remote add origin your-github-repository-url.git
Step 5: Now deploy it to GitHub Pages
npm run deploy

This command will create a branch named gh-pages
at your GitHub repository. This branch hosts your app and homepage property you created in package.json file hold your link for a live preview.
Go to {your-GitHub-code-repository} -> settings -> GitHub pages section
and setup source to the gh-pages branch
.

Step 6: Update your repository code (optional)
Commit and push your updated code commit to GitHub
git add .
git commit -m “Your commit message”
git push origin master
That’s it! You have successfully deployed your app to the website URL defined in Step 2 of this Deployment section.
Note:
- Whilst hosting a more robust app, routing using on gh-pages does not work well with BrowserRouter or ReactRouter, make use of HashRouter from react-router-dom instead. So you’d
import { HashRouter } from 'react-router-dom'
as opposed to usingimport { BrowserRouter } from 'react-router-dom’
, this will, however, create a#
sign on your route. - Sensitive information (eg
.env
files) should not be pushed to your online repository. My workaround is usually to git ignore the.env
orconfig
file before pushing to my remote repository, when this is done I then allow git to track the.env
orconfig
file before runningyarn run deploy
, this makes my deployed app to have access to the necessary configuration files I need without compromising the security of the app.
Thanks for reading and I do hope you found this article somewhat helpful.