Can I pass environment variables from Gitlab .gitlab-ci.yml to a React app?

Question

I'm trying to set environment variables dynamically using the gitlab CI pipeline. What I am trying to achieve is to inject the right API keys and URLs depending on the stage I am deploying to (stage, prod).

In my React app I access the variables using process.env.REACT_APP_APPSYNC_URL as decribed in the react documentation.

So far I have tried setting the variables in the gitlab UI and referencing them in my .gitlab-ci.yml file (see code below).

Unfortunately I cannot access the variables this way, so I would be very thankful for any help.

I'm just getting started on CI/CD and different environments, so if I am generally using a bad approach here please let me know!

Here's the .gitlab-ci.yml:

image: nikolaik/python-nodejs:latest

stages:
  - install
  - test
  - deploy

install:
  stage: install
  script:
    - npm install
    - npm run build
  artifacts:
    untracked: true
  only:
    - stage
    - master

test:
  stage: test
  dependencies:
    - install
  script:
    - npm run test
  artifacts:
    untracked: true
  only:
    - stage
    - master

deployDev:
  stage: deploy
  only:
    - stage
  dependencies:
    - install
    - test
  script:
    - pip3 install awscli
    - aws configure set aws_access_key_id "$DEV_AWS_KEY"
    - aws configure set aws_secret_access_key "$DEV_AWS_SECRET"
    - aws s3 sync ./build/ s3://example.dev
  variables:
    REACT_APP_COGNITO_REGION: $DEV_COGNITO_REGION
    REACT_APP_COGNITO_USER_POOL_ID: $DEV_COGNITO_USER_POOL_ID
    REACT_APP_COGNITO_APP_CLIENT_ID: $DEV_COGNITO_APP_CLIENT_ID
    REACT_APP_COGNITO_IDENTITY_POOL_ID: $DEV_COGNITO_IDENTITY_POOL_ID
    REACT_APP_APPSYNC_URL: $DEV_APPSYNC_URL
    REACT_APP_APPSYNC_REGION: $DEV_APPSYNC_REGION
    REACT_APP_APPSYNC_AUTHENTIACTION_TYPE: $DEV_APPSYNC_AUTHENTIACTION_TYPE
deployProd:
  stage: deploy
  only:
    - master
  dependencies:
    - install
    - test
  script:
    - pip3 install awscli
    - aws configure set aws_access_key_id "$PROD_AWS_KEY"
    - aws configure set aws_secret_access_key "$PROD_AWS_SECRET"
    - aws s3 sync ./build/ s3://example.com

Cheers!

Answer 1

This line from CRA docs is important: The environment variables are embedded during the build time. So set the variables before running build command.

image: node:10.16.0-alpine

stages:
  - build
  - deploy

build_app:
  stage: build
  script:
    - export REACT_APP_SECRET_API_KEY=$API_KEY # set REACT_APP variables before build command
    - yarn install
    - yarn build
  artifacts:
    name: "$CI_PIPELINE_ID"
    paths:
      - build
    when: on_success

deploy_app:
  stage: deploy
  dependencies:
    - build_app
  script:
    - echo "Set deployment variables"
    - echo "Deployment scripts"