How do I add environment variables from command

[Mats Aadahl]

This issue is a question / support request

node: 11.10.1
npm: 6.7.0
nwb: 0.23.0

I want to add an environment variable to process.env from a script like this:
nwb serve-react-demo REACT_APP_HOST_APPLICATION=AB
and then be able to access process.env.REACT_APP_HOST_APPLICATION in the demo application.

The idea is to toggle the initial state of my demo app and simulate different applications implementing the component library, but I can't seem to figure out how to set environment variables.

Any help is appreciated, thanks!

[ochuko awhe]

Pending on your OS, type the code as follows:

OS X / Linux Terminal:

export NODE_ENV=development

Windows CMD:

set NODE_ENV=production
or
SET NODE_ENV=development

Windows PowerShell:

$env:NODE_ENV="production"

[Jonny Buchanan]

Using environment variables would be a 2-step process, as you'd still have to configure webpack.define in nwb.config.js to do the replacement in your app:

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: false
  },
  webpack: {
    define: {
      'process.env.REACT_APP_HOST_APPLICATION': JSON.stringify(process.env.REACT_APP_HOST_APPLICATION)
    }
  }
}

---

If you want to do it in one shot, you could configure webpack.define directly from the command-line, e.g. this would allow you to use a __REACT_APP_HOST_APPLICATION__ variable anywhere in your demo app:

$ nwb serve-react-demo --webpack.define.__REACT_APP_HOST_APPLICATION__='ab'

The quotes are important as webpack will replace the __REACT_APP_HOST_APPLICATION__ variable with exactly what you give it. The command above worked for me on Windows but other platforms might handle the quotes differently.

[Mats Aadahl]

@insin
Hey thanks for your help.
I'm running macOS 10.15.3. I tried both methods and I tweaked the input for quite some time, but still my variable was undefined.
Luckily I solved it by creating one nwb.config.js file for each app, hardcoding the value, and passing it with the --config flag. I don't know if it's the smoothest of solutions, but I works.

package.js
"scripts": {
  ...
  "start-aa": nwb serve-react-demo --config ./nwb.aa.js",
  "start-bb": nwb serve-react-demo --config ./nwb.bb.js",
  ...
}

nwb.aa.js
module.exports = {
  type: 'react-component',
  polyfill: false,
  npm: {
    cjs: true,
    esModules: false,
  },
  webpack: {
    define: {
      'process.env.REACT_APP_HOST_APPLICATION': JSON.stringify('aa')
    }
  }
};

nwb.bb.js
module.exports = {
  type: 'react-component',
  polyfill: false,
  npm: {
    cjs: true,
    esModules: false,
  },
  webpack: {
    define: {
      'process.env.REACT_APP_HOST_APPLICATION': JSON.stringify('bb')
    }
  }
};

I now have the opportunity to configure things like the redux state of the application in index.js by doing something like this:

const storeAA = init_aa_Store();
const storeBB = init_bb_Store();

render(
  <Provider store={process.evn.REACT_APP_HOST_APPLICATION === "aa" ? storeAA : storeBB}>
    <DemoApp />
  </Provider>,
  document.querySelector("#demo")
);