Build-time environment variables for web apps

Desired Behavior

It would be great if there was a built-in way to expose build-time environment variables to web/React/Angular projects.

Current Behavior

process.env is not exposed, so you have to jump through some hoops and craft a custom solution (e.g. copying files around in a build script, using babel-plugin-preval which comes with babel-loader caching issues, etc.) to read environment variables in web projects (as far as I can tell, anyway).

Other

Prior art for this exists in other popular web frameworks/libraries. create-react-app automatically embeds any environment variable prefixed with REACT_APP_ and Next.js includes an env key in the main config file (evaluated during build) that you can populate as you see fit.

Would either of these approaches be appropriate for Nx, or is there another way that would be even better? Or does an idiomatic way already exist?

Thanks.

[PrmJf]

I just lost over 2 hours of time because of the horrible implementation of this feature.

These env variables are passed at build time and used at the runtime of an app.

Build time variables MUST NOT be conflated with environment variables: they are simply not the same. It is unacceptable that process.env be replaced during build-time, because process.env is per definition runtime, i.e. in fact there even does not exist a process at build time.

If you want to replace variables at build time, this should be done through another api. Be it buildvars.MY_VAR or something else - I don’t care, but right now it is just plain confusing. People even go as far as to recommend process.env["NODE" + "_ENV"] to circumvent the nx compiler because of this conflated idea.

Apart from this behavior being counter-intuitive, it can also lead to security issues:

• Build artifacts might be stored on less-secure servers (ie inferior to production servers)
• Build artifacts might be accessible to devs, whilst a true production environment might not

Thirdly, it is also directly opposing other, established build configurations: for instance, converting a plain typescript / node.js application into an NX build might now lead to different behavior at runtime, because of unexpected compile-time code replacements.

Therefore, I really, really think the replacement of process.env at build time should be revisited. And I believe I’m not the only one, considering there are over 3 stackoverflow posts of confused people discussing this behavior.

[weblancaster]

@wKovacs64 @jdpearce @EranSch

We at Blackberry started working on this feature to be part of the framework.