Automatic Deployment on React App: Github Actions

Hello developers, hope you are doing good. While using Github pages for deployment, it has been tricky to set up continuous deployment in React Apps, which is automatic in HTML files.

Need for Github Actions

Many people use Netlify to get rid of this problem, but today I’m gonna show you how to set up continuous deployment on Push.

I am also a newbie in Github actions, so pardon me if I say something wrong along the way.
So, let's look at how we want to push the react app to Github.

How to deploy manually

First, we make sure that all the dependent packages are installed. We run npm install to install the packages.

We then have to build the react app so Github pages can deploy the static HTML file inside the build folder. We can do this operation by running npm run build.

Finally, we push it Github after committing changes using git push.

But, what if we have to make more changes? Or what if someone wants to make a PR and contribute to the repository?

We don’t want to manually build the react app, again and again, each time we commit. So let’s ease things out with the help of Github actions.

Continous Deployment using Github Actions

Add a folder named “.github” in the root directory, inside that folder add another folder named workflows. We can have multiple workflows, but in this blog, we only require one.

Inside the workflows folder, make a file named deploy.yml (any name but ext should be “.yml”)
Paste the below code there.

name: Github Page Deploy Workflow

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: crazy-max/ghaction-github-pages@v1
        with:
          target_branch: gh-pages
          build_dir: build
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Explaination

Let’s take a look at how it works.

• We are having a Github action named Github Page Deploy Workflow.

• The Github action gets triggered on push action on the main branch.

• We are having a job named deploy, we are running this on a ubuntu-latest system somewhere using cloud.
  
  
  

• Uses refer to the Github repositories we are using to run the commands which we will take a look at soon.

• We are using Node.js version “12.x”. We then run the commands
  1. npm ci - Equivalent to npm install which installs all the dependencies.
  2. npm run build - Which builds the build folder.
  
  
  

• We then deploy the project to the gh-pages branch by providing the directory as the build folder.

• Last but not the least, we authenticate the Github actions workflow using secret GITHUB_TOKEN.

Here is an example repository where I have implemented the same - https://github.com/FidalMathew/Poke-dex

Thank you for reading, I hope you liked it!😄

I would love to connect with you on -

• Twitter
• Linkedin
• Github