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

Question

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})` ;

these are never accessible in the front end. unless you send it specifially — Sujit.Warrier
– Sujit.Warrier, Commented Sep 25, 2020 at 6:44
Ok, is there any other way how to get build number in the Azure build displayed in frontend? — Ondřej Ševčík
– Ondřej Ševčík, Commented Sep 25, 2020 at 6:50
I assume you are serverside rendering. why dont you send the version number along with the HTML — Sujit.Warrier
– Sujit.Warrier, Commented Sep 25, 2020 at 7:02
You can consider setting a variable (e.g. APP_VERSION) in a .env file from your build pipeline. Then in app code load that using dotenv package. twilio.com/blog/… — krishg
– krishg, Commented Sep 25, 2020 at 9:31

Ondřej Ševčík · Accepted Answer · 2020-09-28 14:17:57Z

2

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

answered Sep 28, 2020 at 14:17

Ondřej Ševčík

1,6495 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leo Liu · Accepted Answer · 2020-09-28 03:31:34Z

0

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" }

answered Sep 28, 2020 at 3:31

Leo Liu

77.8k11 gold badges133 silver badges159 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related