Can I Pass Environment Variables From Gitlab .gitlab-ci.yml To A React App?
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
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"
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?