Deploying React Applications on GitHub pages

In this article, we will look at how we can deploy react applications using GitHub pages in a very short time. GitHub pages are an elegant way to turn repositories into websites and showcase our portfolio, web applications, or documentation. The icing on the cake is that minimum code is required and involves no database or server configuration. Since most of us prefer to manage projects on GitHub, deploying it on the same platform can help to take leverage of the ecosystem.

For demonstration, we will create a simple react application first and take the necessary actions to deploy it on GitHub. If you already have a project ready then you can skip these steps. So first let's run the command to create react application

npx create-react-app react-github-pages

Next, create a GitHub repository and push project files to the repository. Please note that the repository must be public if the account that owns the repository uses GitHub Free or GitHub Free for organizations.

Next, we need to make a few changes to package.json the file. The first one is to specify the home page as shown below.

// inside package.json
"homepage": "https://yourgithubusername.github.io/app-name"

Replace yourgithubusername with your GitHub username and app-name with your GitHub repository name. Visit your GitHub repository to know the username and app name.

Next, we need to install the GitHub pages package that is needed for deploying. So go ahead and run the following command

npm install --save gh-pages

Now that the required package has been installed we need to provide the script for deploying. Again inside package.json the file under scripts the property add the following commands.

"scripts": { 
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build",
}

With the addition of these scripts, we are almost done. We just need to run the following command and our react application is deployed on GitHub.

npm run deploy

With this the react application is deployed. It may take a minute before it's reflected on the web. You can check by visiting the link that we set under homepage property inside package.json file or alternatively visit the deployed GitHub repository, navigate to the settings tab, and on the pages menu under codes and automation, you can see the details as shown in the image below.

I hope you found this article helpful and can now start sharing your awesome react works using GitHub.