How to reference environment variables into index.html in Nx

[negativeentropy9]

Description

Like in create-react-app,access the environment variables starting with REACTAPP in the public/index.html，like below:

In Nx, how to access the environment variables from .env or process?

<title>%REACT_APP_WEBSITE_NAME%</title>

Motivation

Suggested Implementaion

Alternate Implementations

[Stupidism]

Any plan to support this feature? It's quite annoying that I can't even use different favicon.icos in test and prod environments.

[vaunus]

We've also just come up against this issue and have struggled to find a decent solution. We essentially want environment variable replacement at static build time within the index.html of a React app. Injecting scripts isn't an option as we are using NewRelic and they specifically say not to do this as it will cause issues.

We came across HtmlWebpackPlugin which does environment variable replacement, but it seems this plugin does a lot more as well so it ends up causing issues when used with NX. Perhaps an implementation of HtmlReplaceWebpackPlugin to replace something like <%= ENV_VAR %> would do the trick?

[timbakkum]

We need to swap assets at build time loaded by our index.html. We just hardcode the default file path and then replace the default source at that path at build time using the assets and/or fileReplacements option in our different build configurations.

It's not ideal, but works for our current use cases, so maybe this can be of help. I wish it was more straightforward like how create react app manages this.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[jkrehm]

I'm also running into this issue. Disappointed to see it closed automatically without a resolution. 😞

[tar-aldev]

Having the same issue needed it to setup rollback and react.

[christian452]

Running into this issue as well. This is causing nasty workarounds. Any plans to support?

[JoshHubi]

I too am running into this issue. Are there still no plans to support this?

[ADobrianskiy]

Any news?

[halafi]

I don't think this issue should be closed

[obchap]

For anybody who runs into this issue, NX does support environment variables being injected into index.html but you have to actually use environment variables and not the ones in file at ./apps/<app-name>/src/environments/environment.ts.

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 build pipeline. In this example, it's GitHub actions

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

They have it documented but I don't think they do a good job and differentiating between environments/environment.ts and .env variables

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

[wilkinsonjack1993]

For those running webpack 5, the above solution doesn't seem to work - I have opened a bug ticket for it here: https://github.com/nrwl/nx/issues/6941

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.