CODEWITHSUNDEEP
javascriptreactjsazureazure-devopsazure-pipelines
Ondřej Ševčík
Ondřej Ševčík

Reputation: 1599

How to use Azure Pipeline variable in JavaScript (React) project?

How do I use variable defined for the pipeline in React Project?

Currently, I have build variable defined in the .yml file like that

variables:
  src: "virtual-furnace-app"
  dest: "$(src)/build"
  REACT_APP_VERSION: $(Build.BuildNumber)

and in the front end code, I have tried to accessing it like that but it is undefined

export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;

Upvotes: 3

Views: 4198

Answers (2)

Ondřej Ševčík
Ondřej Ševčík

Reputation: 1599

After while I found solution myself.

So in the code, I check if we are on localhost NODE_ENV === development and if not I will read variable injected to React script process.env.REACT_APP_VERSION

import pjson from "../../package.json"
export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;

Azure Pipeline yml code

REACT_APP_VERSION=$(BuildID) yarn build

Upvotes: 2

Leo Liu
Leo Liu

Reputation: 76770

How to use Azure Pipeline variable in JavaScript (React) project?

You could try to use a .env file to store the variables, then use them in a React Native app.

You can reference this blog for details : How to gracefully use Environment Variables in a React Native app.

Also find some similar threads in SO, you can reference them can check if that helps:

Besides, you could also try to set REACT_APP_VERSION in the start of your script as well, e.g. "scripts": { "start": "cross-env REACT_APP_VERSION=$REACT_APP_VERSION react-scripts start" }

Upvotes: 0

Related Questions