Nx: e2e tests not reading .local.env file.

[ericwooley]

Current Behaviour

When I run a react app with @nrwl/web:dev-server, .local.env is loaded, as described here: https://nx.dev/angular/cli/overview#loading-environment-variables

When I run the e2e tests created by the react plugin, the variables are undefined.

Expected Behavior

The e2e version of the front end app should have the variables available.

Steps to Reproduce

Setup an app similar to the react tutorial.

Add a .local.env, with some values that begin with NX_. Console.log those values on app start.

Failure Logs

No failure logs

Environment

➜ yarn nx --version        
yarn run v1.22.4
$ nx --version
9.4.5

➜ node --version                              
v13.14.0

➜ cat /etc/lsb-release                     
DISTRIB_ID=Pop
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Pop!_OS 20.04 LTS"

[vsavkin]

@Cammisuli @jaysoo we should probably add the same feature to the cypress builder.

[cereallarceny]

@vsavkin Myself and @hericlesme also have this problem. We couldn't figure out what we were doing wrong! 😆

I also found it a bit surprising that any NX Node applications we have do not read ANY environment variables. Seems a bit strange that they're only relevant for React and Angular projects. Should there not be one standard way this is handled for all NX projects, regardless of what specific technology you're using?

[cereallarceny]

Sorry @vsavkin @Cammisuli for the double comment, but this actually seems to be a bug, not a feature request. We have found that the variables in .local.env ARE being loaded, but then are immediately replaced by .env. In other words, it's the opposite functionality as to what is offered in NX React. I don't think this is a feature - it's gotta be a bug.

Steps to Reproduce

1. Create a standard React application using NX with Cypress in the X-e2e folder
2. Create a file at the root called .env and another called .local.env
3. When running nx serve X you should see the variables from .local.env being produced (correct behavior)
4. When running nx e2e X-e2e --watch you should see the variables from .env being produced (incorrect behavior)
5. If you delete the .env file from the root and run the previous step again, you'll actually find that the variables from .local.env are being produced (incorrect behavior, because you shouldn't need to delete the .env file to use these variables in Cypress).

In other words, Cypress IS loading .local.env, but it's immediately being replaced by the variables in .env. This is the opposite functionality that you have detailed on your website for how NX React should handle environment variables: https://nx.dev/latest/react/guides/environment-variables#loading-environment-variables

[cereallarceny]

Update 30/12/20

We've now determined that Cypress will load environment variables in the correct order, and NOT overwrite them in subsequent .env files, but ONLY if both environment variable files are placed in the appropriate app folder. In other words, if you have .local.env and .env in the root of your project, you're going to have problems. If you place those files inside the app that you're running e2e against, it works as expected.

We would love some clarification on whether this is intentional or not - it still doesn't seem to be the expected behavior.

[Cammisuli]

@cereallarceny I'll have to check up on this. But all projects should be able to follow the environment variable rules that were defined in the docs page.