frontend.yml

name: Frontend

# Suppress Spinner because it appears as warnings
env:
  SUPPRESS_SPINNER: true

# Controls when the action will run. Triggers the workflow on push or pull request
on:
  push:
    branches:
      - 'master'
    paths:
      - '*'
      - '.github/workflows/frontend.yml'
      - 'common/**'
      - 'frontend/**'

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build_and_deploy_frontend_projects:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # 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
        with:
          fetch-depth: 0 # Required to retrieve git history
      
      # Get repo metadata so we can use it in the build scripts
      - name: Repo metadata
        id: repo
        uses: actions/github-script@v5
        with:
          script: |
            const repo = await github.rest.repos.get({owner: context.repo.owner, repo: context.repo.repo})
            return repo.data

      # Caching
      - name: Cache Rush temp files
        uses: actions/cache@v2
        with:
          path: |
            common/temp
          key: ${{ runner.os }}-rush-${{ hashFiles('common/config/rush/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-rush-

      - name: Cache NPM
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Cache Yarn
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # Setup Environments
      - name: Setup Node
        uses: actions/setup-node@v2.5.1
        with:
          node-version: '14'
      
      # Install Node dependencies
      - name: Rush Update
        run: node common/scripts/install-run-rush.js update

      # Build the projects
      - name: Rush Client Projects
        run: node common/scripts/install-run-rush.js build -T webapp --verbose
        env:
          CI: false
      
      # Build and deploy the UI components Storybook
      - name: Build Storybook
        run: node common/scripts/install-run-rush.js storybook:deploy
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
      
      # Setup for Docker build
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v1
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1
      - name: Login to DockerHub
        if: github.event_name != 'pull_request'
        uses: docker/login-action@v1 
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      
      # Cache Docker layers
      - name: Cache Docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-buildx-

      # Set some output variables based on the repo metadata
      - name: Prepare Webapp Docker Image
        id: prep_webapp_docker
        run: |
          DOCKER_IMAGE=savantly/sprout-webapp
          VERSION=noop
          if [ "${{ github.event_name }}" = "schedule" ]; then
            VERSION=nightly
          elif [[ $GITHUB_REF == refs/tags/* ]]; then
            VERSION=${GITHUB_REF#refs/tags/}
          elif [[ $GITHUB_REF == refs/heads/* ]]; then
            VERSION=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
            if [ "${{ github.event.repository.default_branch }}" = "$VERSION" ]; then
              VERSION=latest
            fi
          elif [[ $GITHUB_REF == refs/pull/* ]]; then
            VERSION=pr-${{ github.event.number }}
          fi
          TAGS="${DOCKER_IMAGE}:${VERSION}"
          if [[ $VERSION =~ ^v[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
            MINOR=${VERSION%.*}
            MAJOR=${MINOR%.*}
            TAGS="$TAGS,${DOCKER_IMAGE}:${MINOR},${DOCKER_IMAGE}:${MAJOR},${DOCKER_IMAGE}:latest"
          elif [ "${{ github.event_name }}" = "push" ]; then
            TAGS="$TAGS,${DOCKER_IMAGE}:sha-${GITHUB_SHA::8}"
          fi
          echo ::set-output name=version::${VERSION}
          echo ::set-output name=tags::${TAGS}
          echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')

      - name: Build Webapp
        id: build_web_app
        run: cd ./frontend/apps/webapp && yarn build || echo 0
        env:
          CI: false

      # Release to Sentry.io
      - name: Release to Sentry.io
        run: cd ./frontend/apps/webapp && node ./scripts/sentry.js
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          REACT_APP_SENTRY_RELEASE: ${GITHUB_SHA::8}
      
      # Build and push web docker image
      - name: Build and push Webapp Image
        id: docker_build_webapp
        uses: docker/build-push-action@v2
        with:
          context: ./frontend
          file: ./frontend/Dockerfile
          platforms: linux/amd64,linux/arm64
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.prep_webapp_docker.outputs.tags }}
          labels: |
            org.opencontainers.image.title=${{ fromJson(steps.repo.outputs.result).name }}
            org.opencontainers.image.description=${{ fromJson(steps.repo.outputs.result).description }}
            org.opencontainers.image.url=${{ fromJson(steps.repo.outputs.result).html_url }}
            org.opencontainers.image.source=${{ fromJson(steps.repo.outputs.result).clone_url }}
            org.opencontainers.image.version=${{ steps.prep_webapp_docker.outputs.version }}
            org.opencontainers.image.created=${{ steps.prep_webapp_docker.outputs.created }}
            org.opencontainers.image.revision=${{ github.sha }}
            org.opencontainers.image.licenses=${{ fromJson(steps.repo.outputs.result).license.spdx_id }}
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache