DEV Community 👩‍💻👨‍💻

Aditya Chukka
Aditya Chukka

Posted on • Updated on

Deploy React App using GitHub Actions

GitHub Actions

In this post, we will see to how to deploy react application using GitHub Actions to GitHub Pages

We will be deploying todolist, a react app we have create in an earlier post

Step 1: Add homepage to package.json

"homepage": "https://<githubusername>.github.io/<app>"
Enter fullscreen mode Exit fullscreen mode

For todolist, this would be

"homepage": "https://achukka.github.io/todolist"
Enter fullscreen mode Exit fullscreen mode

Step 2: Enable GitHub Pages

Create a branch to deploy from (ex: gh-pages)

This helps use keep our source code separate from the static website

Set your source branch (Example: gh-pages) in Settings -> Pages section

GitHub Pages

Step 3: Create SSH Deploy Key

Generate your deploy key

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f "<your-deploy-branch>" -N ""
Enter fullscreen mode Exit fullscreen mode

You should get two files 1) <deploy-branch>.pub (public key) and <deploy-branch> (private key)

Step 4: Add Keys to GitHub

Add public key to Settings -> Deploy Keys section and Enable Write Access

Public Key ACTIONS_DEPLOY_KEY

Add private key as ACTIONS_DEPLOY_KEY to Settings -> Secret Keys.

Step 5: Create workflow for deploy

Create a workflow similar to Build And Test workflow we created in the previous post

Add a step to deploy to gh-pages

- name: deploy to gh-pages
- uses: peaceiris/actions-gh-pages@v3
with:
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    publish_dir: ./build
Enter fullscreen mode Exit fullscreen mode

The above step, The GitHub Action peaceiris/actions-gh-pages uses deploy_key (which we created earlier) to publish files from publish_dir to github pages.

Repo linked here

The complete yaml would look like below

name: Deploy React Application

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build_test:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x] # We will deploy with only one version of node  

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm ci, build and test
        run: |
          npm ci
          npm run build --if-present
          npm test      
      - name: deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./build          
Enter fullscreen mode Exit fullscreen mode

Step 6: Commit your changes

  • Commit your changes to a new branch
  • Create a PR onto main branch

Please check this commit for cumulative changes.

If the GithHub Action run successfully ✔️

  • You should see A commit to your deploy branch (Ex: `gh-pages)

gh-pages commit

  • Your React app should be hosted on your homepage

Hosted App

Congratulations 👏. You have now setup a workflow to deploy your react application 👍.

Merge your PR if everything looks good 😉

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Top comments (4)

Collapse
devfredericfox profile image
dev-fredericfox • Edited on

For anyone having trouble generating the key, there is a typo with your-deploy-branch.
In the code-block they are backticks, but I believe you need to use apostrophies (')

Cheers and thanks for the great tutorial!

Collapse
achukka profile image
Aditya Chukka Author

Thanks for pointing it out @devfredericfox. Updated the command

Collapse
hidaytrahman profile image
Hidayt Rahman

Do we really need to create ssh key for the github action?

Collapse
achukka profile image
Aditya Chukka Author

It is not mandatory, but it would remove the hassle of authenticating with your password every time you make a commit

🌱 DEV runs on 100% open source code known as Forem.

 
Contribute to the codebase or learn how to host your own.