deploy-frontend.yml

# GitHub action to deploy MartinBullmanApp frontend.
name: deploy-frontend

on:
  # trigger workflow on pushes to the main branch or pull requests targeting the main branch.
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  # set environment variables for node.js version and github context values.
  NODE_VERSION: 20
  FILENAME: "${{ github.sha }}-${{ github.run_id }}"
  GITHUB_SHA: ${{ github.sha }}
  GITHUB_REF: ${{ github.ref }}

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      # step 1: checkout the code from the repository.
      - name: Checkout Code
        uses: actions/checkout@v4

      # step 2: set up Node.js environment.
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      # step 3: install project dependencies.
      - name: Install Dependencies
        working-directory: ./frontend
        run: npm install

      # Step 4: Run ESLint to lint the code.
      - name: Run Lint
        working-directory: ./frontend
        run: npm run lint

  test:
    needs: lint
    runs-on: ubuntu-latest

    steps:
      # step 1: checkout the code from the repository.
      - name: Checkout Code
        uses: actions/checkout@v4

      # step 2: set up Node.js environment.
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      # step 3: install project dependencies.
      - name: Install Dependencies
        working-directory: ./frontend
        run: npm install

      # Step 4: Run ESLint to lint the code.
      - name: Run Tests
        working-directory: ./frontend
        run: npm run test

  build:
    needs: test
    runs-on: ubuntu-latest

    steps:
      # step 1: checkout the code from the repository.
      - name: Checkout Code
        uses: actions/checkout@v4

      # step 2: install project dependencies.
      - name: Install Dependencies
        working-directory: ./frontend
        run: npm install

      - name: Create .env File
        working-directory: ./frontend
        run: |
          echo "BASE_URL=${{ secrets.BASE_URL }}" >> .env
          echo "API_BASE_URL=${{ secrets.API_BASE_URL }}" >> .env
          echo "GOOGLE_RECAPTCHA_ID=${{ secrets.GOOGLE_RECAPTCHA_ID }}" >> .env
          echo "GOOGLE_RECAPTCHA_SITE_KEY=${{ secrets.GOOGLE_RECAPTCHA_SITE_KEY }}" >> .env

      # step 3: build the frontend application.
      - name: Build Application
        working-directory: ./frontend
        run: npm run build

      # step 4: archive the build output into a tarball.
      - name: Archive Artifacts
        working-directory: ./frontend/
        run: tar -czf ../${{ env.FILENAME }}.tar.gz .output

      # step 5: upload the archived artifacts for later use in deployment.
      - name: Store Artifacts
        uses: actions/upload-artifact@v4
        with:
          name: frontend-artifacts
          path: ${{ env.FILENAME }}.tar.gz

  deploy:
    # deployment job depends on the build job.
    needs: build
    runs-on: ubuntu-latest

    steps:
      # step 1: download the build artifacts from the build job.
      - name: Download Artifacts
        uses: actions/download-artifact@v4
        with:
          name: frontend-artifacts

      # step 3: copy the frontend artifacts to the remote server.
      - name: Deploy Artifacts
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.LIGHTSAIL_HOST }}
          username: ubuntu
          key: ${{ secrets.LIGHTSAIL_SSH_KEY }}
          target: /home/ubuntu
          source: ${{ env.FILENAME }}.tar.gz

      # step 4: extract the artifacts and restart the application.
      - name: Extract and Restart Frontend
        uses: appleboy/ssh-action@v0.1.8
        with:
          host: ${{ secrets.LIGHTSAIL_HOST }}
          username: ${{ secrets.LIGHTSAIL_USER }}
          key: ${{ secrets.LIGHTSAIL_SSH_KEY }}
          script: |
            mkdir -p frontend_releases/${{ env.FILENAME }}
            tar -xzf ${{ env.FILENAME }}.tar.gz -C frontend_releases/${{ env.FILENAME }}
            cp -r frontend_releases/${{ env.FILENAME }}/.output MartinBullmanApp/frontend
            rm -r ${{ env.GITHUB_SHA }}.tar.gz 
            
            # ensure node.js environment is loaded.
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
            nvm use 20.13.1
            
            # restart frontend application.
            .nvm/versions/node/v20.13.1/bin/pm2 restart all