title: Webpack production process.env.PORT=undefined on server compile (React app)
body: <p>I have my React app compiling all fine in dev &amp; prod scripts, however, now that I am deploying on DigitalOcean, I am running into a problem with <code>process.env.port</code> being <code>undefined</code> and therefore falling back to <code>3000</code> and not the expected port <code>80</code>.</p>
  
  <p>Package.json npm script:</p>
  
  <p><code>
  "build": "webpack -p --config webpack.config.production.js &amp;&amp; 
      cross-env NODE_ENV=production node server/server.js"
  </code>
  Webpack.config.production.js script which includes the DefinePlugin() for process.env:</p>
  
  <pre><code>module.exports = {
    entry: {
      app: ["./src/scripts/index.js"]
    },
    output: {
      filename: "[name]-bundle.js", path: __dirname, publicPath: "/"
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.(js)$/,
          exclude: /node_modules/,
          use: ["babel-loader"]
        },
        {
          test: /\.(scss|css)$/,
          use: [
            {loader: "style-loader"}, {
              loader: "css-loader"}, {
              loader: "sass-loader"}, {
              loader: "postcss-loader"}
            }
          ]
        },
        {
          test: /\.(jpg|png|svg)$/,
          use: {
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]"
            }
          }
        }
      ]
    },
    plugins: [
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify("production")
    }
  }),
  extractSass,
  new UglifyJsPlugin({
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false
      }
    }
  }),
  new HtmlWebpackPlugin({
    template: "public/index.html",
    favicon: "public/assets/img/favicon.ico"
  }),
  new ExtractTextPlugin({
    filename: "styles/styles.css",
    allChunks: true
  })
  ]
  };
  </code></pre>
  
  <p>my express server file:</p>
  
  <pre><code>const path = require("path");
  const express = require("express");
  const app = express();
  const port = process.env.PORT || 3000;
  
  let useFolder;
  
  if (process.env.NODE_ENV !== "production") {
    useFolder = "/public/";
    const webpack = require("webpack");
    const config = require("../webpack.config.development");
    const compiler = webpack(config);
    app.use(
      require("webpack-dev-middleware")(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath,
        hot: true
      })
    );
    app.use(
      require("webpack-hot-middleware")(compiler, {
        log: console.log,
        path: "/__webpack_hmr",
        heartbeat: 10 * 1000
      })
    );
  } else {
    useFolder = "/dist/";
  }
  app.use(express.static("dist"));
  
  app.get("/", function(req, res) {
    res.sendFile(path.join(__dirname, ".." + useFolder + "index.html"));
  });
  
  app.listen(port, function(err) {
    if (err) {
      return console.error(err);
    }
    console.log("Listening at port: ", port);
  });
  </code></pre>
  
  <p>There are no errors, and when it runs on backup port <code>3000</code> all is good on the live server, but I am expecting port 80.</p>
  
  <p>I have tried swapping where <code>NODE_ENV=production</code> gets set: removing from NPM script, and DefinePlugin() but no success either.</p>