Send environment variable value to renderer thread in Electron app

Question

I have an Electron app. I need to get the value of an environment variable from my local machine to use on the renderer thread. I want to pass this value to the renderer thread when the app starts. I know in the main.js file, I can get the environment variable like this:

main.js

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    });
  
    win.loadFile('index.html');

    // Retrieve the environment variable value
    const variableValue = process.env.MY_ENVIRONMENT_VARIABLE;
    console.log(`Variable value: ${variableValue}`);

    // Send the variable and it's value to the renderer.
    win.webContents.send('initialize', { 'variableName':variableValue });
}

The above successfully prints the environment variable's value to the terminal window. However, I need to use this value in the browser side of the ball. How do I get the variable's value there?

Thank you!

Answer 1

This can't be done directly from the renderer process (with nodeIntegration off), since it has no direct access to the Node.js process variable.

The most straightforward way to do this is via the BrowserWindow's preload script, which allows you to expose arbitrary data to the renderer process via Electron's contextBridge API. An example:

// Main Process
const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'); // require `path` if you haven't already
  }
});

// Preload Script
const { contextBridge } = require('electron');

// this should print out the value of MY_ENVIRONMENT_VARIABLE
console.log(process.env.MY_ENVIRONMENT_VARIABLE);

contextBridge.exposeInMainWorld('envVars', {
  myEnvironmentVariable: process.env.MY_ENVIRONMENT_VARIABLE
});

// Renderer Process
console.log(window.envVars.myEnvironmentVariable)

See the contextBridge API docs: https://www.electronjs.org/docs/latest/api/context-bridge