Environment Variable in JSON - Compiling ENV without Webpack on Electron

In Electron App development, it is optional to use Webpack for bundling the App. If your Electron code base isn't that big to deserve a bundler, especially when it is just a shell to render a Web App, it makes sense to skip it. The Web App itself can have its own bundler, for ex. React App.

However, we won't be having the default support of dotEnv provided by Webpack bundler, as well as hot reload and other cool features. Since React App already hot reload the web contents, is not that big of a deal for Electron to have hot reload since it is just a frame. Then, ENV compilation becomes a major problem when we don't bundle the codes with the respective env for electron-builder to build.

Electron-builder is a packager that package the code, it does not compile your env file for you. Thus, your env inside the codes will become undefined in the packaged build if we skip the bundling process. not cool :(

While not using Webpack or other bundling tool, we created a json file to host the env that we need and update them during CI/CD process. That way, we can just inject ENV that are set in the CI/CD tool into the json dynamically according to build pipeline.

First, create a config.json file that stores the list of env that you want to update during build. It should default to dev environment variable so that you do not need to update them every-time during development. For example,

{
  "env": "development",
  "appUrl": "http://localhost:8080/",
  "bugsnagAppId": ""
}

In your code,

// main.js
const fs = require('fs');
const config = JSON.parse(fs.readFileSync(path.join(__dirname, './build/config.json'), 'utf8'));
const isDevelopment = config.env === 'development';

if (isDevelopment) window.loadUrl(config.appUrl);

Then, set up your ENV in your CI/CD tool, you may have staging build pipeline and production build pipeline that has its own set of ENV. Once all is set, we use json library to do the key-value update accordingly. Below is the script that we execute during CI/CD.

# build-script.sh
yarn install

json -I -f build/config.json -e "this.env='$(echo $NODE_ENV)'"
json -I -f build/config.json -e "this.appUrl='$(echo $APP_URL)'"
json -I -f build/config.json -e "this.bugsnagAppId='$(echo $BUGSNAG_APPID)'"

yarn build:mac

• Remember to add the library https://github.com/trentm/json to your package.json for it to work :)

Now, you have a dynamic config.json in different build of your Electron App.