0

I have an npm script to start the webpack dev server, but first, my env setup -

in my .zshrc - export DEV_SERVER_PORT=8001

echo returns expected results

>echo $DEV_SERVER_PORT
8001

here's the script i'm running from package.json via npm run

webpack-dev-server --inline --hot --port 8001

this executes correctly via npm run - 

echo $DEV_SERVER_PORT

result: 8001

this produces disappointing results via npm run-

 webpack-dev-server --inline --hot --port $DEV_SERVER_PORT

result webpack-dev-server --inline --hot --port $DEV_SERVER_PORT

Matthew Kime
  • 754
  • 1
  • 6
  • 15
  • Please show what you tried in more detail, *including* how you exported the desired value to the environment. A MCVE would be ideal (that is, a complete and verifiable reproducer, per http://stackoverflow.com/help/mcve). – Charles Duffy May 24 '16 at 17:13
  • ...btw, as an aside, all-caps names are used by the system and shell; it's *lower-case* environment variable names (or, more precisely, names containing at least one lower-case character) that are reserved for application use. See the relevant spec at http://pubs.opengroup.org/onlinepubs/009695399/basedefs/xbd_chap08.html, fourth paragraph. – Charles Duffy May 24 '16 at 17:14
  • Possible duplicate of [Passing environment-dependent variables in webpack](http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack) – Paul May 24 '16 at 17:18
  • ...in general, the answer is somewhere between "yes", and "very yes". From a shell script called via `system()` from npm, it's just `"$varname"` as usual; for native JavaScript code it's `process.env.varname`. But the difference between regular shell variables and environment variables is critical here -- if you didn't export it to the environment, it won't be present. – Charles Duffy May 24 '16 at 17:18
  • The main issue is that the webpack cli doesn't seem to want to natively accept env vars as configuration. While many node CLI's do, they don't for whatever reason. See my 'possible duplicate' link to see if that works for you, and if not then update your question. – Paul May 24 '16 at 17:19
  • `declare -p DEV_SERVER_PORT` is much more useful and informative than `echo $DEV_SERVER_PORT`, btw. The latter doesn't show exported status, doesn't show hidden characters, doesn't show indirections through namevars... etc, etc, etc. `declare -p` is your friend. – Charles Duffy May 24 '16 at 17:20
  • Actually, `typeset DEV_SERVER_PORT=8000` is **not** expected results. Expected results would be `typeset -x DEV_SERVER_PORT=8000`; the `-x` being missing means your variable isn't exported. (This is why I asked for the details). – Charles Duffy May 24 '16 at 17:25
  • @Paul its not a duplicate because its about how npm scripts not and not specifically about webpack – Matthew Kime May 24 '16 at 17:39
  • ...so, after fixing the missing export, are you still having trouble with `$DEV_SERVER_PORT` failing to expand? (If so, this would imply that npm is directly parsing and exec'ing the variables itself, rather than going through a shell). If that's so, then you could do something like: `bash -c 'exec webpack-dev-server --inline --hot ${DEV_SERVER_PORT:+--port "$DEV_SERVER_PORT"}'` as your command (using `bash` there explicitly, as the `${var+content}` expansion isn't guaranteed to have the particular behavior that code depends on by POSIX). – Charles Duffy May 24 '16 at 19:13

2 Answers2

1

The following result from zsh, reported in your question:

>declare -p DEV_SERVER_PORT
typeset DEV_SERVER_PORT=8000

...means that your shell variable isn't actually exported, and thus isn't available in subprocesses' environment.

Run the following:

export DEV_SERVER_PORT

and, following that, you should see the following:

>declare -p DEV_SERVER_PORT
typeset -x DEV_SERVER_PORT=8000

The -x indicates that the export flag is set, and this variable (with any changes to same) is set in any subprocess invoked.

Charles Duffy
  • 280,126
  • 43
  • 390
  • 441
0

You need to use process.env. This is an object that contains all the process's environment variables. E.g., if you define an environment variable PORT, it will be accessible using:

process.env.PORT

You may need to convert the value to the correct type. process.env always contains the values as strings, hence - e.g. for a port - you might need to convert the value to a number.

So you end up with something such as:

const port = process.env.PORT - 0;
Golo Roden
  • 140,679
  • 96
  • 298
  • 425
  • `webpack-dev-server --inline --hot --port process.env.DEV_SERVER_PORT` as a script within `package.json` yields the execution of `webpack-dev-server --inline --hot --port process.env.DEV_SERVER_PORT` ...not quite right – Matthew Kime May 24 '16 at 17:27