Using environment variables in nx based nodejs app

Question

I've setup a project with several nodejs and angular apps inside a nrwl/nx workspace.

I'm trying to work with the environment files inside the nodejs apps.

I've setup the import like this: import {environment} from './environments/environment';

Then I ran ng serve my-node-app and it shows the environment for non production.

Now I tried to do ng serve my-node-app --prod to see how the app works with a production setup - but I get the error:

Configuration 'production' could not be found in project my-node-app.

Here's the project's angular.json config:

"ui-server": {
      "root": "apps/ui/server",
      "sourceRoot": "apps/ui/server/src",
      "projectType": "application",
      "prefix": "ui-server",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/builders:node-build",
          "options": {
            "outputPath": "dist/apps/ui/server",
            "main": "apps/ui/server/src/main.ts",
            "tsConfig": "apps/ui/server/tsconfig.app.json",
            "assets": ["apps/ui/server/src/assets"]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "apps/ui/server/src/environments/environment.ts",
                  "with": "apps/ui/server/src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@nrwl/builders:node-execute",
          "options": {
            "buildTarget": "ui-server:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/ui/server/tsconfig.app.json",
              "apps/ui/server/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "test": {
          "builder": "@nrwl/builders:jest",
          "options": {
            "jestConfig": "apps/ui/server/jest.config.js",
            "tsConfig": "apps/ui/server/tsconfig.spec.json"
          }
        }
      }
    }

Am I missing something?

Possible duplicate of stackoverflow.com/questions/52319576/… — Will
– Will, Commented Feb 28, 2019 at 16:42
@WillCain - I do not believe this is a duplicate. For once, the mentioned topic does not answer my questions. Second - it talks about a lib in an angular project. I'm talking about a nodejs app inside a nrwl/nx project. — yccteam
– yccteam, Commented Feb 28, 2019 at 17:24
There is more information in that linked thread. The --prod is not needed any more as it is always aot compiled. What we're doing here is --configuration=producttion which requires a production entry in the build section of your app in angular.json. Can you post the architect config for your app so we can better assist? — electrichead
– electrichead, Commented Mar 8, 2019 at 16:37
@electrichead thanks. I've added the config to the question. It seems like the configuration is already there. — yccteam
– yccteam, Commented Apr 4, 2019 at 9:42

Daniel Danielecki · Accepted Answer · 2020-12-02 13:48:55Z

I've found this post when I was looking how to fetch the environmental variables defined in .env file.

process.env.ENVIRONMENTAL_VARIABLES in frontend part can be accessed when rendering on the server (e.g. Angular Universal), having .env in the root of Nrwl monorepo and webpack properties, such as:

const dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new dotenv(),
  ],
};

Don't forget to change your angular.json:

...
"architect": {
  "build": {
     "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.browser.config.js",
           "replaceDuplicatePlugins": true
          },
          ...

I've named the custom webpack as webpack.browser.config.js.

Now, let say you have a server/..., which you're using for some backend stuff, then you won't have them accessible there. You need to install dotenv package and in the server/main.ts, let say that's your server's root, require this package, that way:

require('dotenv').config();

Note: until Angular 8 we were able to set up also webpack-server related logic, in a file such as webpack.server.config.js. Therefore, it was doable to apply basically same code related to dotenv, which was in webpack.browser.config.js. However, it doesn't work anymore. Angular CLI Builders are being used to build & server SSR apps instead.

Deploying to Firebase/using Cloud Functions for Firebase (and possibly other Serverless/FaaS)?

Then in your functions folder you need to paste the .env file as well. I assume here that from functions you're deploying.

For debugging I'd advise:

console.log(require('dotenv').config({ debug: true }));

Might save you a lot of time.

Collectives™ on Stack Overflow

Using environment variables in nx based nodejs app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related