How to deploy React application to GitHub Pages

In this article, we will see how to deploy a react application GitHub pages.

This article assumes that you have a GitHub account, if not, create one here.

Creating the React App

Create a react app using the following command:

1npx create-react-app deploy-github-pages

Now install the gh-pages package as a development dependency. This helps in deploying the React app to GitHub pages.

1npm install gh-pages -D

Updating package.json

Open package.json and add the following line:

1"homepage": "https://<your_username>.github.io/<repo_name>"

Example:

1"homepage": "https://collegewap.github.io/deploy-github-pages"

This will be the URL of your application when you deploy it.

Now add the following scripts to package.json:

1"predeploy": "npm run build",
2"deploy": "gh-pages -d build",

Here we have added 2 scripts, one is to build the project locally and another to upload the build files to GitHub pages.

This is how the package.json would look now:

package.json

1{
2  "name": "deploy-github-pages",
3  "version": "0.1.0",
4  "homepage": "https://collegewap.github.io/deploy-github-pages",
5  "private": true,
6  "dependencies": {
7    "@testing-library/jest-dom": "^5.16.5",
8    "@testing-library/react": "^13.4.0",
9    "@testing-library/user-event": "^13.5.0",
10    "react": "^18.2.0",
11    "react-dom": "^18.2.0",
12    "react-scripts": "5.0.1",
13    "web-vitals": "^2.1.4"
14  },
15  "scripts": {
16    "predeploy": "npm run build",
17    "deploy": "gh-pages -d build",
18    "start": "react-scripts start",
19    "build": "react-scripts build",
20    "test": "react-scripts test",
21    "eject": "react-scripts eject"
22  },
23  "eslintConfig": {
24    "extends": ["react-app", "react-app/jest"]
25  },
26  "browserslist": {
27    "production": [">0.2%", "not dead", "not op_mini all"],
28    "development": [
29      "last 1 chrome version",
30      "last 1 firefox version",
31      "last 1 safari version"
32    ]
33  },
34  "devDependencies": {
35    "gh-pages": "^4.0.0"
36  }
37}

Pushing the code to GitHub

Create a public repository named deploy-github-pages in GitHub.

If you want to deploy a private GitHub repository to GitHub pages, then you will have to upgrade your account.

Now add the files and commit the changes in your project:

1git add *
2git commit -m "Adding GitHub Pages"

Now add and push the code to the remote repository:

1git remote add origin https://github.com/<username>/<repo_name>.git
2# git remote add origin https://github.com/collegewap/deploy-github-pages.git
3git push -u origin master # or main

Deploying to GitHub pages

Run the following command inside the project:

1npm run deploy

Now it will create a branch called gh-pages and push it to the remote repository.

Now open your GitHub repository and click on Settings:

In Settings, choose Pages.

In the Build and deployment section,

Choose source as Deploy from branch.
Branch as gh-pages.
Folder as /(root).
Click on Save.

Again run the deploy command inside your project:

1npm run deploy

Now your React application will be deployed to GitHub pages.

If you have liked article, do follow me on twitter to get more real time updates!

How to deploy React application to GitHub Pages

Table of Contents

Creating the React App

Updating package.json

Pushing the code to GitHub

Deploying to GitHub pages

Related Articles

Leave a Comment