React Github Workflow

Now that everything clicks we need to configure our workflow for build and deployments. This would make our life easier and make sure server deployment is seamless.

So we are going to implement the same approach we did for our Go API. One action for build and another for deploy. To quickly recap we had our build triggered when we create a PR and deployment when we merge to main branch.

React Build

The first part is to create a build action on PR, to verify that our code is correct

name: Build and Test

on:
  pull_request:
    branches:
      - main
    paths:
      - 'fe/**'

jobs:
  build_and_test:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16.x'

      - name: Install dependencies
        run: npm install
        working-directory: ./fe

      - name: Build and Test
        run: npm run build
        #npm run test
        working-directory: ./fe

So this will trigger for fe module on PR

React Deploy

And the second part will actually deploy our react app to our server

name: Build and Test

on:
  push:
    branches:
      - main
    paths:
      - 'fe/**'

jobs:
  deploy:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16.x'

      - name: Install dependencies
        run: npm install
        working-directory: ./fe

      - name: Upgrade SSH
        run: |
          sudo apt-get update
          sudo apt-get install -y openssh-client

      - name: Setup SSH
        run: |
          mkdir -p ~/.ssh/
          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan 165.22.233.166 >> ~/.ssh/known_hosts    

      - name: Install SSH Agent
        run: |
          eval "$(ssh-agent -s)"
          ssh-add ~/.ssh/id_rsa

      - name: Build and Deploy
        run: |
          npm run build
          ssh ${{ secrets.USERNAME }}@165.22.233.166 "rm -rf ${{ secrets.FE_APP_DIRECTORY }}/build"
          scp -r build/ ${{ secrets.USERNAME }}@165.22.233.166:${{ secrets.FE_APP_DIRECTORY }}
        working-directory: ./fe

After we are done, we test our actions by committing and pushing and voila. We have an infrastructure that enables frontend and backend HTTPS communication and easily server deployment for each module in our repo.