Clarity required for 'Environment Variable Conflict between Nx and Vite' solution

[ksdc-grantw]

Documentation issue

• [x] Documentation improvement

Is there a specific documentation page you are reporting?

Environment Variable Conflict between Nx and Vite

Additional context or description

I was recently trying to setup env variables in a React Vite app. I read the about the above conflict and solution, and thought, "Thats fine, this is a new workspace, I will conform to the Nx conventions, no problem." I created env files like .env.serve, .env.serve.development and .env.serve.testing. However when running the app, only the .env.serve were beign set, and the development/testing varients were not taking presedence, even when using the --configuration=development flag.

After a bunch of research, reading bug reports, issues and PR's, I found that I was still supposed to declare the target configurations just without the mode attribute, ie:

"configurations": {
  "development": {},
  "testing": {},
}

After that the --configuration flag started working.

In the solution, you say

However, if you still want to use Vite's mode, you still can...

You then go on to explain how to use the mode with a code example. This structure inferred that the configurations were only required of you wanted to continue to make use of Vite's mode.

I would advise perhaps incluing that the target configurations are still required when using .env.[target].[configuration-target-name] files. And since Project crystal inferrs the target configs, developers will have to input them manually, ie:

"serve": {
  "configurations": {
    "development":{},
    "qc":{},
    "production":{}
  }
}

[GuillaumeJasmin]

Thanks for your investigation. I spent hours to understand why my .env.build.production didn't work. I had to add this in my project.json

"build": {
  "configurations": {
    "development": {},
    "production": {}
  }
}