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

Understanding React deployment

Choosing the correct server

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:

  • 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

Step 2: Add homepage property to package.json file

“homepage”: “http://{Github-username}.github.io/{Github-repo-name}"

package.json file after adding the homepage property

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

“scripts”:{
...
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
...
}
package.json script object after deploying scripts

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

Initialize: git init

Add it as remote: git remote add origin your-github-repository-url.git

Step 5: Now deploy it to GitHub Pages

Terminal screenshot while deployment

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)

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:

  • Sensitive information (eg .env files) should not be pushed to your online repository. My workaround is usually to git ignore the .env or configfile before pushing to my remote repository, when this is done I then allow git to track the .env or config file before running yarn 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.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store