reactjscontinuous-integrationyamlgithub-actionsbrightcove

GitHub Actions Deployment building with errors


My GitHub Actions completes successfully, but when I go to my website all I see is a blank white page. From the chrome dev tools I check the console and I see this error:

react-dom.production.min.js:216 Error: accountId is required
    at Z (brightcove-react-player-loader.es.js:950)
    at Q (brightcove-react-player-loader.es.js:1061)
    at X (brightcove-react-player-loader.es.js:1126)
    at r.o.loadPlayer (brightcove-react-player-loader.es.js:1350)
    at r.o.componentDidMount (brightcove-react-player-loader.es.js:1519)
    at hu (react-dom.production.min.js:219)
    at As (react-dom.production.min.js:259)
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at Ha (react-dom.production.min.js:122)
    at Ts (react-dom.production.min.js:252)
uu @ react-dom.production.min.js:216

The following is my yaml file which creates a .env file including the BrightCove ID but it isn't getting the ID from the .env for some reason...

# This is a basic workflow to help you get started with Actions

name: Deploy React Dev

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ development ]
  pull_request:
    branches: [ development ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

env:
  REACT_APP_BRIGHTCOVE_ID: ${{ secrets.REACT_APP_BRIGHTCOVE_ID }}

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./app
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2.3.4
      # Create .env
      - name: Create env file
        run: |
          touch .env
          echo REACT_APP_AUTH0_DOMAIN=${{ secrets.REACT_APP_AUTH0_DOMAIN }} >> .env
          echo REACT_APP_AUTH0_CLIENT_ID=${{ secrets.REACT_APP_AUTH0_CLIENT_ID }} >> .env
          echo REACT_APP_AUTH0_AUDIENCE=${{ secrets.REACT_APP_AUTH0_AUDIENCE }} >> .env
          echo REACT_APP_VIDEO_URL=${{ secrets.REACT_APP_VIDEO_URL }} >> .env
          echo REACT_APP_STORE_NAME=${{ secrets.REACT_APP_STORE_NAME }} >> .env
          echo REACT_APP_PAYPAL_CLIENT_ID=${{ secrets.REACT_APP_PAYPAL_CLIENT_ID }} >> .env
          echo REACT_APP_HASURA_GRAPHQL_ENDPOINT=${{ secrets.REACT_APP_HASURA_GRAPHQL_ENDPOINT }} >> .env
          echo REACT_APP_BRIGHTCOVE_ID=${{ secrets.REACT_APP_BRIGHTCOVE_ID }} >> .env
          echo HASURA_GRAPHQL_ADMIN_SECRET=${{ secrets.HASURA_GRAPHQL_ADMIN_SECRET }} >> .env
      # Set up Node JS
      - uses: actions/setup-node@master
        with:
          node-version: '16.x'
          cache: 'yarn'
          cache-dependency-path: app/yarn.lock
      # Use cached node_modules directory
      - uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      # Install & build
      - run: yarn install
      - run: yarn build
      # Upload artifact
      - name: Upload artifact
        uses: actions/upload-artifact@v2
        with:
          name: webapp
          path: app/build
  deploy:
    runs-on: ubuntu-latest
    environment: Orange Develop
    needs: build
    steps: 
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: webapp
      # Deploy webapp to Orange server
      - name: SCP deployment to Orange
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USER }}
          key: ${{ secrets.FTP_KEY }}
          source: '.'
          target: '/opt/media-exchange/app/build'
          rm: true`

Solution

  • Found the answer on this stackoverflow question: https://stackoverflow.com/a/66929604/14502018

    I needed to set the environment that my secrets are stored in. Inside the build job I added this line:

    build:
        runs-on: ubuntu-latest
        environment: Orange Develop #MISSING LINE