nwb build-web-module and env vars

[AquiGorka]

This issue is a: Question / support request

Great library and many thanks for all the work.

I see you removed support for env variables here, is there any way to build a web-module that can use an env var?

Use case: a value for dev environment and a different one for prod.

[kirakik]

@AquiGorka did you figure out a way around this?

[AquiGorka]

@kirakik I did not and in the end used create-react-app which has built-in support for env vars.

[fc]

In your nwb.config.js file, use the extra option to add webpack's environment plugin:

const webpack = require("webpack");

module.exports = {
  type: "react-component",
  npm: {
    esModules: true,
    umd: {
      global: "SomeApp",
      externals: {
        react: "React"
      }
    }
  },
  webpack: {
    extra: {
      plugins: [
        new webpack.EnvironmentPlugin({
          BLAH: "aha"
        })
      ]
    }
  }
};

In the above example, access it as process.env.BLAH

You should be able to have dynamic env vars if you do

process.env.NODE_ENV === 'production' ? {secretKey: '....'} : {}

Reference:
https://github.com/insin/nwb/blob/master/docs/Configuration.md#extra-object

If you wanted to use dotenv, you could also use it like so (untested):

import dotenv from 'dotenv';

/* etc */

    new webpack.EnvironmentPlugin({
      ...dotenv.config().parsed
    }),

Or checkout the dotenv webpack plugin:
https://github.com/mrsteele/dotenv-webpack