AWS Amplify Monorepo - amplify.yml - create react app

amplify.yml

version: 1
applications:
  - appRoot: app
    env:
    variables:
      SKIP_PREFLIGHT_CHECK: true
      DEV_REACT_APP_APPSYNC_API_ID: replace_with_your_value
      DEV_REACT_APP_APPSYNC_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_CALLBACK_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_RETURN_TO_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_CLIENT_ID: replace_with_your_value
      DEV_REACT_APP_AUTH0_DOMAIN: replace_with_your_value
      DEV_REACT_APP_ROLE_ARN: replace_with_your_value
      DEV_REACT_APP_S3_UPLOAD_BUCKET: replace_with_your_value
      PROD_REACT_APP_APPSYNC_API_ID: replace_with_your_value
      PROD_REACT_APP_APPSYNC_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_CALLBACK_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_RETURN_TO_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_CLIENT_ID: replace_with_your_value
      PROD_REACT_APP_AUTH0_DOMAIN: replace_with_your_value
      PROD_REACT_APP_ROLE_ARN: replace_with_your_value
      PROD_REACT_APP_S3_UPLOAD_BUCKET: replace_with_your_value
    frontend:
      phases:
        preBuild:
          commands:
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_APPSYNC_API_ID=${DEV_REACT_APP_APPSYNC_API_ID}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_APPSYNC_URL=${DEV_REACT_APP_APPSYNC_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_CALLBACK_URL=${DEV_REACT_APP_AUTH0_CALLBACK_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_CLIENT_ID=${DEV_REACT_APP_AUTH0_CLIENT_ID}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_DOMAIN=${DEV_REACT_APP_AUTH0_DOMAIN}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_RETURN_TO_URL=${DEV_REACT_APP_AUTH0_RETURN_TO_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_ROLE_ARN=${DEV_REACT_APP_ROLE_ARN}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_S3_UPLOAD_BUCKET=${DEV_REACT_APP_S3_UPLOAD_BUCKET}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_APPSYNC_API_ID=${PROD_REACT_APP_APPSYNC_API_ID}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_APPSYNC_URL=${PROD_REACT_APP_APPSYNC_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_CALLBACK_URL=${PROD_REACT_APP_AUTH0_CALLBACK_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_CLIENT_ID=${PROD_REACT_APP_AUTH0_CLIENT_ID}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_DOMAIN=${PROD_REACT_APP_AUTH0_DOMAIN}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_RETURN_TO_URL=${PROD_REACT_APP_AUTH0_RETURN_TO_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_ROLE_ARN=${PROD_REACT_APP_ROLE_ARN}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_S3_UPLOAD_BUCKET=${PROD_REACT_APP_S3_UPLOAD_BUCKET}; fi
            - yarn install
            - yarn lint
            - yarn test
        build:
          commands:
            - yarn build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
    cache:
      paths:
        - node_modules/**/*
  - appRoot: home
    env:
    variables:
      SKIP_PREFLIGHT_CHECK: true
      DEV_REACT_APP_APPSYNC_API_ID: replace_with_your_value
      DEV_REACT_APP_APPSYNC_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_CALLBACK_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_RETURN_TO_URL: replace_with_your_value
      DEV_REACT_APP_AUTH0_CLIENT_ID: replace_with_your_value
      DEV_REACT_APP_AUTH0_DOMAIN: replace_with_your_value
      DEV_REACT_APP_ROLE_ARN: replace_with_your_value
      DEV_REACT_APP_S3_UPLOAD_BUCKET: replace_with_your_value
      PROD_REACT_APP_APPSYNC_API_ID: replace_with_your_value
      PROD_REACT_APP_APPSYNC_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_CALLBACK_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_RETURN_TO_URL: replace_with_your_value
      PROD_REACT_APP_AUTH0_CLIENT_ID: replace_with_your_value
      PROD_REACT_APP_AUTH0_DOMAIN: replace_with_your_value
      PROD_REACT_APP_ROLE_ARN: replace_with_your_value
      PROD_REACT_APP_S3_UPLOAD_BUCKET: replace_with_your_value
    frontend:
      phases:
        preBuild:
          commands:
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_APPSYNC_API_ID=${DEV_REACT_APP_APPSYNC_API_ID}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_APPSYNC_URL=${DEV_REACT_APP_APPSYNC_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_CALLBACK_URL=${DEV_REACT_APP_AUTH0_CALLBACK_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_CLIENT_ID=${DEV_REACT_APP_AUTH0_CLIENT_ID}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_DOMAIN=${DEV_REACT_APP_AUTH0_DOMAIN}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_AUTH0_RETURN_TO_URL=${DEV_REACT_APP_AUTH0_RETURN_TO_URL}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_ROLE_ARN=${DEV_REACT_APP_ROLE_ARN}; fi
            - if [ "${AWS_BRANCH}" = "master" ]; then export REACT_APP_S3_UPLOAD_BUCKET=${DEV_REACT_APP_S3_UPLOAD_BUCKET}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_APPSYNC_API_ID=${PROD_REACT_APP_APPSYNC_API_ID}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_APPSYNC_URL=${PROD_REACT_APP_APPSYNC_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_CALLBACK_URL=${PROD_REACT_APP_AUTH0_CALLBACK_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_CLIENT_ID=${PROD_REACT_APP_AUTH0_CLIENT_ID}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_DOMAIN=${PROD_REACT_APP_AUTH0_DOMAIN}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_AUTH0_RETURN_TO_URL=${PROD_REACT_APP_AUTH0_RETURN_TO_URL}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_ROLE_ARN=${PROD_REACT_APP_ROLE_ARN}; fi
            - if [ "${AWS_BRANCH}" = "prod" ]; then export REACT_APP_S3_UPLOAD_BUCKET=${PROD_REACT_APP_S3_UPLOAD_BUCKET}; fi
            - yarn install
            - yarn lint
            - yarn test
        build:
          commands:
            - yarn build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
    cache:
      paths:
        - node_modules/**/*

This is a properly formatted example of a working amplify.yml for monorepos.

This has 2 create-react-app in 2 sibling folders, and one common components folder which the code is shared (Note that the shared components folder is not specified in the .yml.

Please note the following:

1. Indentation is extremely important. AWS will silently fail and it will display other unrelated errors if they are not properly formatted.
2. Note how the artifacts key is at the same level as the phases one.
3. Both app and home are at the root level directory of my repo. Remember to respect paths. They do not necessarily need to be in root,
4. Yes, you can safely reference local packages, and they will get installed successfully. I've done them using the file:../ directive.

Here's my folder structure

Other notes:

• If you receive a There was an issue connecting to your repo provider, click "Re-authenticate app" in General Settings, and then try your build again. It's a YAML formatting error. You do not need to re-authenticate your app again.