aws amplify - process.env.API_KEY is undefined

Question

I add to amplify build setting:

I also add to amplify.yml in the code

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run export
        **- REACT_APP_ENV_API=${REACT_APP_ENV_API}**
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

I add to the amplify env vars my react env var here:

and still I get undefined when I trying to use process.env.REACT_APP_ENV_API.

Answer 1

You're missing export :

- export REACT_APP_ENV_API=${REACT_APP_ENV_API}

Also, as per Julio's comments, if you're using Next.js, do make sure you're doing as documented for exposing env vars to the browser: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

Answer 2

I got it working by first adding the environment variables to the AWS Amplify console via App Settings > Environment Variables.

Then I went to App Settings > Build Settings and modified the amplify.yml config file to include the variable definitions.

Eg:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - echo "GITHUB_CLIENT_ID=$GITHUB_CLIENT_ID" >> .env
        - echo "GITHUB_CLIENT_SECRET=$GITHUB_CLIENT_SECRET" >> .env
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*