Deploy React App With Github Pages

Koowoy
TIL

References: Youtube Tutorial by Telmo Sampaio Create-React-App Documentation

Although I thought the deployment part wouldn’t take that much time. But because of some minor mistakes I made in some stages, which was not explicitly explained by the create react app documentation, I had to start over a multiple times until I figured things out.

Basic Steps as explained by the documentation

1. Add homepage field to package.json

The field could be placed in order in the package.json file but for the simplicity and because this order works with absolute certainty, add the homepage field at the very top of the package.json file as so.

{
  "homepage": "http://[GITHUB_USERNAME].github.io/[REPO_NAME]",
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  ...
}

2. Install gh-pages and add deploy scripts to package.json

When installing, the documentation doesn’t instruct to download gh-pages as dev dependency, but in my experience, it only worked perfectly when I installed it as a dev dependency. So the following line should be run in the terminal.

npm install gh-pages --save-dev

And as the documentation suggests, add following scripts to the scripts in package.json to be used for deploying

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

By setting the scripts as so, when the command npm run deploy is ran, gh-pages automatically builds the app and deploys it directly to the github repository

3. Setup github repository and perform initial commit locally

The documentation does not specify how the repository should be set, to be ready for deployment, and skips to the deployment part. However, I personally screwed up at this stage and could not get the app up and running correctly. So the following steps might help clear things up.

  1. Create a new “public” repository, without checking any of the options when creating. (for create readme and etc.)
  2. DO NOT do anything to the repository just yet, apart from copying the command line for setting a remote repository. (for instance: git remote add origin https://github.com/username/my-app.git)
  3. On local terminal or bash, in the directory of the app, initialize git by running git init.
  4. Set the remote repository by running the command git remote add origin https://github.com/username/my-app.git, that was copied from the github repository’s initial instructions.
  5. Make first commit of the app by running git add . and git commit -m "initial commit". DON’T PUSH TO GITHUB just yet!

4. Run npm script deploy

Now finally run npm run deploy to build and deploy app to the github repository.

5. Setup pages in the github repository

The final step is to set (or actually check, since it is probably already automatically set) the settings for github pages on the repository. On the repository setting, there is a “pages” section. Check to see that the source is set to “gh-pages” branch. When everything is settled, on the top of the pages tab of the setting, a green box with a link will be available, showing where the app was deployed to. It might take a little while to deploy, so when the box on top is not green but blue, refresh the page a couple of times until the deployment is complete.