Compiled build inlines PORT environment variable

[d4rky-pl]

Due to how getClientEnvironment is written, PORT environment variable is being inlined into final build instead of being kept as process.env.PORT.

This will cause Razzle to fail launching on Heroku using start:prod

[d4rky-pl]

I've also noticed that the way getClientEnvironment stringified function is written, entire process.env is replaced with inlined object including all environment variables:

// console.log(process.env.PORT) gets compiled to:
console.log(Object({"NODE_ENV":"production","PORT":3000,"VERBOSE":false,"HOST":"localhost","RAZZLE_ASSETS_MANIFEST":"somepath","BUILD_TARGET":"server","RAZZLE_PUBLIC_DIR":"somepath"}).PORT);

This makes it impossible to make the server app configuration dynamic without rebuilding it every time.

[xouabita]

Hi @d4rky-pl,
You can use razzle-heroku :) It extends the default razzle config to make it works on heroku.
See #340 for more infos

[d4rky-pl]

@xouabita this is nice, thanks :)

I feel that Razzle should support this by default or have a caveat about process.env and production build somewhere more prominent.

[d4rky-pl]

This turns out to be even more problematic than I imagined. Let me explain:

I'm writing a system tests runner (system tests: tests that run in actual browser) and I want to add razzle support from day one. The problem is that because PORT is inlined in resulting build, I have to also inline it when compiling everything before testing.

This may cause unnecessary confusion when someone then tries to use the same build for something else (it's the production build after all, other than PORT there are zero changes) as the inlined PORT in tests is different than the one during "normal" production compilation. I could also drop the build after running tests but it will break the flow where we do system tests before production deployment and then reuse the same compiled code.

@jaredpalmer please reconsider the decision to inline PORT in production build and add one-time lookup (something like const PORT = process.env.PORT at the beginning of server.js) instead. If there's no chance in hell for that, please close this issue and I'll add a disclaimer in my tool :)

[jaredpalmer]

@d4rky-pl let's make this right.

what if we blacklisted

• process.env.RAZZLE_SERVER_ will not get compiled
• and PORT

I;m sure you probably know this, but reading from process.env. during runtime is incredibly slow and something that should be avoided whenever possible. However, it would be better if razzle was more easily deployable to heroku etc. so yeah. let's figure this out.

[d4rky-pl]

I like this. In case of PORT the performance should not be a problem, this env variable is only being read during the boot time.

As for RAZZLE_SERVER_, sounds like a good workaround for those couple of extra cases, though I'm not sure about the name - it might be confusing and lead to decreased performance when people assume this is how you should set all server-side environment variables (instead of only those that you actually want to override during application boot). I'm afraid I don't have a better option though.

[ramasilveyra]

I had the same problem, also happens with env vars not defined at buildtime. This is the workaround:

/* eslint-disable no-param-reassign */
const razzleConfigEnv = require('razzle/config/env');

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // Fix process.env
    if (target === 'node') {
      config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'DefinePlugin');
      const dotenv = razzleConfigEnv.getClientEnv(target, {
        clearConsole: true,
        host: 'localhost',
        port: 3000
      });
      config.plugins.push(
        new webpack.DefinePlugin({
          'process.env': `Object.assign(${JSON.stringify(dotenv.raw)}, process.env)`
        })
      );
    }
    return config;
  }
};

[JacopKane]

This is my workaround for Heroku:

// getPorts.js

// bypass webpack.DefinePlugin
const { env } = require('process')

export const port = () =>
  parseInt(
    env.RAZZLE_PORT ||
      env.PORT ||
      process.env.RAZZLE_PORT ||
      process.env.PORT ||
      3000,
    10,
  )

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[ericvicenti]

I found a pretty simple workaround to this issue, if people are still struggling with it

  // This will extract the env during production execution.. PORT will not be inlined during build
  const getEnv = c => process.env[c];
  app.listen(getEnv('PORT'));

[vbutani]

I had the same problem, also happens with env vars not defined at buildtime. This is the workaround:

/* eslint-disable no-param-reassign */
const razzleConfigEnv = require('razzle/config/env');

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // Fix process.env
    if (target === 'node') {
      config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'DefinePlugin');
      const dotenv = razzleConfigEnv.getClientEnv(target, {
        clearConsole: true,
        host: 'localhost',
        port: 3000
      });
      config.plugins.push(
        new webpack.DefinePlugin({
          'process.env': `Object.assign(${JSON.stringify(dotenv.raw)}, process.env)`
        })
      );
    }
    return config;
  }
};

I tried this but when I try 'npm run start:prod' on my local, I get an error that assets.json not found. Also, could you please advise, do I need to upload node_modules in build folder as well as I get npm package related errors as well.

[KevinMind]

This is working for me now.

`
appConfig.plugins = appConfig.plugins.filter(plugin => plugin.constructor.name !== 'DefinePlugin');
const dotenv = razzleConfigEnv.getClientEnv(target);

  delete dotenv.raw.PORT;
  config.plugins.push(
    new webpack.EnvironmentPlugin(dotenv.raw)
  );

`