GitHub Actions Workflow for a React x Firebase app (includes Cloud Functions, Preview Channels)

ci-react-firebase.yaml

# https://twitter.com/farazamiruddin
# My GitHub Actions workflow for pull requests. Feel free to use this as inspiration.

name: CI React Firebase

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  web:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    defaults:
      run:
        working-directory: ./web

    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Cache node modules
        uses: actions/cache@v1
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Install node modules
        run: npm install

      - name: Lint
        run: npm run lint

      - name: Build
        run: npm run build
        env:
          # Firebase
          REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_DEV_FIREBASE_API_KEY }}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.REACT_APP_DEV_FIREBASE_AUTH_DOMAIN }}
          REACT_APP_FIREBASE_DATABASE_URL: ${{ secrets.REACT_APP_DEV_FIREBASE_DATABASE_URL }}
          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.REACT_APP_DEV_FIREBASE_PROJECT_ID }}
          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.REACT_APP_DEV_FIREBASE_STORAGE_BUCKET}}
          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_DEV_FIREBASE_MESSAGING_SENDER_ID }}
          REACT_APP_FIREBASE_APP_ID: ${{ secrets.REACT_APP_DEV_FIREBASE_APP_ID }}
          REACT_APP_FIREBASE_CLOUD_FUNCTIONS_URL: ${{ secrets.REACT_APP_DEV_FIREBASE_CLOUD_FUNCTIONS_URL }}
          REACT_APP_FIREBASE_MEASUREMENT_ID: ${{ secrets.REACT_APP_DEV_FIREBASE_MEASUREMENT_ID }}
          # Stripe
          REACT_APP_STRIPE_PUBLISHABLE_KEY: ${{ secrets.REACT_APP_DEV_STRIPE_PUBLISHABLE_KEY }}
          # Analytics
          REACT_APP_AMPLITUDE_API_KEY: ${{ secrets.REACT_APP_DEV_AMPLITUDE_API_KEY }}
          REACT_APP_OPTIMIZELY_SDK_KEY: ${{ secrets.REACT_APP_DEV_OPTIMIZELY_SDK_KEY }}

      - name: Test
        run: npm run test

      - name: Preview
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.DEV_FIREBASE_SERVICE_ACCOUNT }}"
          projectId: YOUR_PROJECT_ID
          entryPoint: ./web
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

  functions:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    defaults:
      run:
        working-directory: ./web/functions

    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Cache node modules
        uses: actions/cache@v1
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Install node modules
        run: npm install

      - name: Lint
        run: npm run lint

      - name: Build
        run: npm run build

      - name: Deploy cloud functions to staging
        uses: w9jds/firebase-action@master
        with:
          args: deploy --project dev --only functions
        env:
          FIREBASE_TOKEN: ${{ secrets.DEV_FIREBASE_TOKEN }}
          PROJECT_PATH: ./web