Deploy CRA to GitHub Pages using GitHub Actions
Tags: react, github, deploy
Published: 2020-05-08 10:22:23

This post is a step-by-step guide to deploy a CRA ***(create-react-app)*** on **GitHub Pages** with **GitHub Actions**.

I hope you are trying everything you can to stay safe and healthy in this global pandemic. I wish you a good day.

#<strong>Spin up a react application</strong>
The first thing we need is a React application of course. We will use `create-react-app` to build one.

> **Create React App** is a comfortable environment for learning React and is the best way to start building a new single-page application to [React](https://reactjs.org/docs/create-a-new-react-app.html).

To save you some time, I have published a `create-react-app` [repository](git@github.com:ajinkabeer/cra-gpages-actions-starting.git) on GitHub. It has `routing` and a basic `component` setup already. 

***Note***: Make sure you wrap the top-level component with `HashRouter` instead of the normal `BrowserRouter`. `GitHub Pages` does not work well with `BrowserRouter`.

#<strong>Deploy to GitHub Pages</strong>
Before using `GitHub Actions` to deploy our app, let's first deploy it manually. We will use the `gh-pages` package, which does all the heavy lifting for us.
```
yarn add gh-pages
```
It's time to configure the `package.json` file. 

```json
{
  "name": "cra-gpages-actions",
  "version": "0.1.0",
  "private": true,
  "homepage": "/cra-gpages-actions-starting",
   /* Rest of config */
  "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  /* Rest of config */
}
```
We have added ``predeploy``, ``deploy`` scripts and ``homepage`` to our `package.json` file. 

***Note***: Make sure you put the correct repository name for ``homepage``.

Looking good. It's time to deploy our application on GitHub Pages. 

```
npm run deploy
```
You have now successfully deployed the production build of your react application on GitHub pages. To view it, simply go the `settings` tab of your repository and scroll down until you find the link.

So, from now on you can deploy the latest changes on your react application to GitHub pages with just `npm run deploy`. 

Here comes `GitHub Actions`, with this you can just push the changes to your master branch and it will automatically create a production build and deploy it to GitHub pages.

#<strong>Add GitHub Actions to your workflow</strong>

> GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

The above quote is pulled straight from their homepage :)

Since we already have configured our project to work with `GitHub` pages, setting `Actions` is a walk in the park. 

From your project folder, start by creating a new directory to hold the .`yml` file. This file will hold the configuration for our `GitHub Actions`. You have to create this file using this path.

```
mkdir .github/workflows/
cd .github/workflows
touch deploy.yml
```
Add this configuration code to ``deploy.yml`` file.

```yml
name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build
```
To explain this configuration simply, on each and every push to the master branch, `GitHub Actions` will performs these set of tasks. 

If you look closely, you will notice that we are using a `deploy_key` variable. If you have already enabled `ssh` for your `GitHub` account, you can use that public/private key pair. Else you will need to create a new one. 

You can create a public/private key like this.

```
cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages-actions -N ""
```
Don't forget to replace `user.email` with your e-mail address. After generating the keys, it's time to add them to our repository. Go to the `settings` tab of your repository. Select `deploy keys` from the sidebar. 

You need to insert the public key you have generated into the text-area. Insert `Public key of ACTIONS_DEPLOY_KEY` for the title input field. Check `Allow write access` and click on the `Add key` button.

To view the public key, you can run

```
cat ~/.ssh/gh-pages-actions.pub 
```
Next, up go to the `secrets` tab and add a new secret key. This is the private ssh key that you generated. You can view it like this. In the name field, add ``ACTIONS_DEPLOY_KEY``. It's important.

```
cat ~/.ssh/gh-pages-actions
```
That is it. We have integrated `GitHub Actions` into your workflow. To test it, make some changes in your components and push it to master. To see it live, go to the GitHub Actions tab in your project repository. It will look like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yrbr18602yqu5n1mkvfp.PNG)

# <strong>Congratulations! 🎉</strong>

If you manage to reach this far, then I hope you have successfully integrated the GitHub Actions into your workflow. If you run into any trouble, shoot a comment below.

Here is a link to my [repository](https://github.com/ajinkabeer/cra-gpages-actions) on GitHub.

Thank you!