I was building a toy TypeScript create-react-app App, PetCalendar that used the Unsplash Image API to fetch HD pet images for the user, and deploying it into Azure Pipeline.

The challenge I met was with using secret environmental variables for the ACCESS KEY of UNSPLASH API.
For local built, it was a easy task - adding the variable REACT_APP_UNSPLASH_ACCESS_KEY into the .env file and create-react-app takes care of accessing the variables.
For deployment, I learnt from this StackOverflow post that Azure has a feature called “variable group” that perfectly suits my need.
The documentation for Variable Groups can be found here at Microsoft docs.

Creating Variable Group

I could even choose to make the secret variables secret:

Accessing Variable Group

In order to use the variable group from my Pipeline, I need to include the group in the variables in the azure-pipelines.yml file:

1
2
3
4
5
6
variables:
  - group: Unsplash
  - name: rootDir
    value: "pet-calendar"
  - name: buildDir
    value: "$(rootDir)/build"

Then use the variable just like how I use other variables.
Appending custom environment variables for create-react-app could be found in the create-react-app documentation.

1
2
3
4
5
6
- script: |
    cd $(rootDir)
    npm install
    REACT_APP_UNSPLASH_ACCESS_KEY=$(REACT_APP_UNSPLASH_ACCESS_KEY) REACT_APP_NAME=$(REACT_APP_NAME) npm run build
    cd ..
  displayName: "npm install and build"