Nx React inject environment variables at runtime

Question

I have a Nx monorepo with multiple react applications.

I want to be able to run the build once and then deploy the same build to multiple environments (e.g. dev, test, production).

What I used to do in previous projects where I wasn't using Nx, it was to have a env.js file in the /public folder and a script tag in the head of index.html to get the env.js file.

is it possible to achieve the same result with Nx?

Dauntless

Answer 1

NX by default gives you an /environments/environment.ts file where you can store your environment variables.

You can import it into your app with:

import { environment } from './environments/environment'

You can swap out environments during the build process with the workspace.json file.

...
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "apps/client/src/environments/environment.ts",
        "with": "apps/client/src/environments/environment.prod.ts"
      }
    ],
  ...

If you want to inject environment variables into your index.html file, you have to actually set those when you're building your app. For local builds,

Locally

I created an .env file at the root of the react project and put the variables there

Hosted Environments

We added the envvars to our CI during the build process.

- name: Build Applications
  run: |
    NX_DOMAIN_NAME="My Super Domain" npx nx run-many --target=build --configuration=production

https://nx.dev/latest/react/guides/environment-variables#using-environment-variables-in-indexhtml

Mucky

This is how you would do it at build time. I'm more interested on how to do it at runtime. Basically, I want to have one build that can be deployed to multiple environments with different settings. Anyway, you can achieve it by having a env.js file under /apps/your_app/src. Then, you place that file in workspace.json, in the scripts section of the build executor. And finally you put a <script src='env.js'> tag in your index.html. You can see an example here github.com/sc-mavirdol/nx-scripts-wb4 – Dauntless

How do you build the code and deploy it? Why don't you want to set your environment variables at build time before the deployment? It seems like you're making it harder for yourself. – Mucky

Agree with @VtoCorleone. Do it on the build time is more secure, as you won't have to embed production env on dev env etc ... Or use an hidden cookie, or SessionStorage configuration for switching env at runtime. – Annalisaannalise

What about the case when a library project needs an environment variable which is defined in the application project? Lets say our app contains an environment.ts which based on the environment we run can be either (environment.prod.ts, environment.test.ts etc.), we cannot reference this file from the library as this would introduce two way dependencies. – Fish

@Mucky Configuration at build means you have different binay per environment. Configuration at runtime allows to use the same binary everywhere and restrain per environment to configuration. It is how you do modern containers and orchestration, which allows secrets management for secops. See also 12factor.net/config – Brasher

What if you are building a Docker image from the build artifact. You want the runner of the image to be able to set variables. – Unroll

Answer 2

Set variable prefixed with NX_ into your .env file:

NX_SERVER_URL=http://localhost:8080

Then it will be accessable within your react app:

const url = process.env.NX_SERVER_URL

Or in html document:

<p>The server url is %NX_SERVER_URL%.</p>

Also NX docs

Pringle