title: Can I pass environment variables from Gitlab .gitlab-ci.yml to a React app?
body: <p>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).</p>
  
  <p>In my React app I access the variables using <code>process.env.REACT_APP_APPSYNC_URL</code> as decribed in the <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/" rel="noreferrer">react documentation</a>. </p>
  
  <p>So far I have tried setting the variables in the <a href="https://docs.gitlab.com/ee/ci/variables/#via-the-ui" rel="noreferrer">gitlab UI</a> and referencing them in my <code>.gitlab-ci.yml</code> file (see code below). </p>
  
  <p>Unfortunately I cannot access the variables this way, so I would be very thankful for any help. </p>
  
  <p>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!</p>
  
  <p>Here's the .gitlab-ci.yml:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Cheers!</p>