CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackserver-side
Yilmaz
Yilmaz

Reputation: 49182

process.env.NODE_ENV returns undefined in webpack 4, server-side

in server code I have this:

import express from "express";
const server = express();
import path from "path";
// const expressStaticGzip = require("express-static-gzip");
import expressStaticGzip from "express-static-gzip";
import webpack from "webpack";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";

import configDevClient from "../../config/webpack.dev-client";
import configDevServer from "../../config/webpack.dev-server.js";
import configProdClient from "../../config/webpack.prod-client.js";
import configProdServer from "../../config/webpack.prod-server.js";

const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;
const PORT = process.env.PORT || 8000;
let isBuilt = false;

const done = () => {
  !isBuilt &&
    server.listen(PORT, () => {
      isBuilt = true;
      console.log(
        `Server listening on http://localhost:${PORT} in ${process.env.NODE_ENV}`
      );
    });
};

if (isDev) {
  const compiler = webpack([configDevClient, configDevServer]);

  const clientCompiler = compiler.compilers[0];
  const serverCompiler = compiler.compilers[1];

  const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,

    configDevClient.devServer
  );

  const webpackHotMiddlware = require("webpack-hot-middleware")(
    clientCompiler,
    configDevClient.devServer
  );

  server.use(webpackDevMiddleware);
  server.use(webpackHotMiddlware);
  console.log("process.env.NODE_ENV",process.env.NODE_ENV);//RETURNS UNDEFINED
  server.use(webpackHotServerMiddleware(compiler));
  console.log("Middleware enabled");
  done();
} else {
  webpack([configProdClient, configProdServer]).run((err, stats) => {
    const clientStats = stats.toJson().children[0];
    const render = require("../../build/prod-server-bundle.js").default;
    server.use(
      expressStaticGzip("dist", {
        enableBrotli: true
      })
    );
    server.use(render({ clientStats }));
    done();
  });
}

I client and server config files I have this plugin enabled:

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
        WEBPACK: true
      }

but this is the output

process.env.NODE_ENV undefined
Server listening on http://localhost:8000 in undefined

in client side it is working BUT express side process.env.NODE_ENV returns undefined

Upvotes: 1

Views: 2083

Answers (2)

Kimia Bashiran
Kimia Bashiran

Reputation: 71

I'm writing my experience to help anyone out there with this problem, though I did not actually solve it. I had the same problem with setting the environment variables in my server-side project.

apparently, after you set the environment variables they are completely accessible in the building process, which is in the build tools like webpack config or even .babelrc.js.

but after the build process, the environment variables get overwritten AND there is a time gap between build process and overwriting environment variables.

I used many webpack or babel plugins but neither of them could hold on to environment variables after the build process ON the server-side but they were immediately defined on the client-side. since I'm using ReactJs, I tried adding REACT_APP_ to the beginning of variables, but still no luck.

some other plugins I used: webpack dotenv, webpack.DefinePlugin, webpack.EnvironmentPlugin, babel-plugin-transform-define, babel-plugin-transform-inline-environment-variables

so it made me use the good old-fashion way of setting environment.js on DEPLOY but not on the BUILD process.

in case someone is not familiar: you have one main environment.js and (in my case) 2 other files, one for staging environment.staging.js and one for production environment.prod.js. On each deploy, you copy the related js to environment.js, the main environment file, and in your code, you always read global CONSTs,baseUrl for APIs and ... from environment.js.

hope it helps someone out there.

Upvotes: 0

PedroZorus
PedroZorus

Reputation: 711

Assuming you using Webpack-Dev-Server, you can use this call syntax witch is proper :

const dev = Boolean( process.env.WEBPACK_DEV_SERVER )

You will no longer need to pass environment type parameters, because I think you pass parameters in your script run in packages.json

Upvotes: 1

Related Questions