Nx: .env file not being read in React app

[naorzr]

Expected Behavior

Upon serving the react app, the .env file in the root app directory should be parsed.
Env variables should appear in the process.env

Current Behavior

Env variables aren't parsed and read to the process.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npx create-nx-workspace@latest --preset=react
2. create .env file with some variables
3. run it.

Context

Please provide any relevant information about your setup:

@nrwl/angular : Not Found
@nrwl/cli : 9.2.2
@nrwl/cypress : 9.2.2
@nrwl/eslint-plugin-nx : 9.2.2
@nrwl/express : Not Found
@nrwl/jest : 9.2.2
@nrwl/linter : 9.2.2
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : 9.2.2
@nrwl/react : 9.2.2
@nrwl/schematics : Not Found
@nrwl/tao : 9.2.2
@nrwl/web : 9.2.2
@nrwl/workspace : 9.2.2
typescript : 3.8.3

[naorzr]

any news regarding this?

[montogeek]

Do you want a similar approach as CreateReactApp does?

[naorzr]

Yea, CRA just takes in the .env file and read all the env variables that go with REACT_APP at the beginning.

[rarmatei]

Hey, I've opened PR #3081 to address the "how to load env vars" problem. Thanks for creating this!!

Regarding CRA, Nx has similar functionality which already works: if you prefix your env vars with NX_ (NX_MY_CUSTOM_VAR), it will inline the values at build time.

[naorzr]

@rarmatei Thank you, wouldn't NX_CUSTOM_VAR be available throughout the project for all of the different apps?

[rarmatei]

@rarmatei Thank you, wouldn't NX_CUSTOM_VAR be available throughout the project for all of the different apps?

it depends on where you load it - currently, you have to load it in the process manually NX_CUSTOM_VAR=some-value nx build my-app
or use a builder that automatically loads the root .env file - like @nrwl/web:build

After my PR, you will be able to also declare .env and .local.env files in specific apps, and they will be loaded only for usage in those apps, and not available to others.

[thyb]

@rarmatei Is it still working ?

Environment variables are not passed to the React App using nx serve my-app.

I have tried with the .env in both workspace and app directory - nothing get loaded.

I have tried using env-cmd

"scripts": {
  "start": "env-cmd nx serve my-app",
  (...)
}

I have tried to send directly the environment variables to nx serve:

"scripts": {
  "start": "SITE_BASE_URL=http://preprod.mysite.com nx serve my-app",
  (...)
}

process.env never returns my variables.

I have another NX apps in my workspace with a CRA (migrated using the Migration guide) which loads .env files correctly.

Did I miss something ?

[rarmatei]

@thyb it should be working 🤔 can you run nx report and post the output here?

If you can also share an example repo where it doesn't load your .env that would be immensely helpful.

[thyb]

$> nx report
>  NX  Report complete - copy this into the issue template

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 10.0.7
  @nrwl/cypress : 10.0.7
  @nrwl/eslint-plugin-nx : 10.0.7
  @nrwl/express : Not Found
  @nrwl/jest : 10.0.7
  @nrwl/linter : 10.0.7
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 10.0.7
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.0.7
  @nrwl/web : 10.0.7
  @nrwl/workspace : 10.0.7
  typescript : 3.9.7

I'm trying to make an example repo later today. Thanks !

[thyb]

@rarmatei This is the repo to reproduce my issue: https://github.com/thyb/nx-env-bug-repro

I've made 3 commands to start nx serve to illustrate the scenario I've tried:

    "start": "nx serve",
    "start:envcmd": "env-cmd nx serve",
    "start:env": "BASE_URL=https://google.com nx serve",

with .env file containing:

BASE_URL=https://google.com

I've tried with the .env in the workspace root directory and in the app root directory

These 3 commands only return: {"NODE_ENV":"development","NX_CLI_SET":"true"}

I've tried using NX v10.0.7 and v10.0.8

[rarmatei]

@thyb sorry for the late reply - can you try naming your variable NX_BASE_URL? (change it in your .env file but also in your React code)

when you serve a web project using Nx, it should load all vars in your .env files, but it will only make them available for find-and-replace in your source code if they start with NX_ (similar to how Create React App does it)

[thyb]

Thanks a lot @rarmatei, this is the point I missed. It works when I prepend my env variables by NX_ :+1: