electron-builder, how to set node environmental variables

Question

The Node.js environment in Windows can be set before the server is started, like this:

set NODE_ENV=production 

That NODE_ENV parameter can be used in Node.js or electron by process.env.NODE_ENV.

But when I build electron using electron-builder, like this:

electron-builder build --windows

How do I set the environmental variables?

---

Update:

May be I cannot pass a fixed environment variable to an executable by electron-builder.

Maybe you can only manually load an environment file, modify it when you package it, or preset the parameters to the dev state. When there is no state, it is production.

Answer 1

If you want an environment variable to be set on runtime you can either set them manually or use other tools like dotenv https://www.npmjs.com/package/dotenv

But the easiest way is to set them at runtime when running the binaries. You can use either a batch script (If windows) for example:

setlocal
set NODE_ENV=production
.\your-binaries.exe
endlocal

Note: setlocal prevents the variable leaking any further.

The one-liner version could be set NODE_ENV=production && .\binaries.exe

Under linux works the same way: set variable then run.

Answer 2

I'm posting this in the hopes that it helps other people in my situation. I have three environments (development, staging, and production), and I wanted my Electron main process to be aware of which environment it was running on.

Now, for development it's quite easy to expose an environment variable to Electron inline using the CLI:

export NODE_ENV=development && electron desktop/main.js

Then, Electron's main process can access this environment variable like so:

const isDev = process.env.NODE_ENV === 'development';

However, being able to distinguish between the staging and production environments was slightly trickier. My staging and production environments are both packaged and deployed using electron-builder, with package.json scripts like so:

"desktop-build": "webpack --config config/webpack/webpack.prod.js && electron-builder --config config/electron.config.js",
"desktop-build-staging": "webpack --config config/webpack/webpack.staging.js && electron-builder --config config/electron.config.js",

NOTE: The webpack configs above expose configs to the renderer process (website), but not the main process.

So my solution to expose the environment to the Electron main process for staging and production was as follows:

1. Set NODE_ENV=staging or NODE_ENV=production to electron-builder via command line invocation:

   # Production
   export NODE_ENV=production && webpack --config config/webpack/webpack.prod.js && electron-builder --config config/electron.config.js
   
   # Staging
   export NODE_ENV=staging && webpack --config config/webpack/webpack.staging.js && electron-builder --config config/electron.config.js
   

2. In my electron.config.js file (configs for electron-builder) use the extraMetadata parameter (docs) to inject a variable into my package.json:

   extraMetadata: {
       isProduction: Boolean(process.env.NODE_ENV === 'production'),
   },
   

3. Then you can access that from your Electron main process:

   // This variable is injected into package.json by electron-builder via the extraMetadata field (specified in electron.config.js)
   const {isProduction} = Boolean(require('./package.json'));
   

Answer 3

I solved this through dotenv and electron-builders' extraResources

Firstly create a .env file at the root of your project next to the package.json.

MY_VAR=foo

In the package.json include

  "build": {
    "extraResources": [
      ".env"
    ],
    ...
  }

In your main.js you need to use the path option for dotenv. Hat tip to this answer for pointing me towards dotenv.

When in dev mode, before the app is packaged, then dotenv will pick up the .env in the root. However when packaged you have to specify the path to where extraResources puts it which is in process.resourcesPath. You can use app.isPackaged to tell whether we are in dev mode or in the packaged application.

require('dotenv').config({
    path: app.isPackaged
        ? path.join(process.resourcesPath, '.env')
        : path.resolve(process.cwd(), '.env'),
})

// now process.env includes all the values from the `.env` file.
const foo = process.env.MY_VAR

Note: Just by having the .env in the root, electron-builder picked up the process.env vars within my application, but it seems that main.js is a special case that has to be handled differently.