DEV Community

Cover image for Update json file with Environment Variable - Compiling ENV without Webpack on Electron
Kyle Foo
Kyle Foo

Posted on • Updated on

Update json file with Environment Variable - Compiling ENV without Webpack on Electron

In the Electron App that we develop at our company, there is no Webpack configured for bundling the App, since the App is just a shell to render our Web App in it. Moreover, the Electron code base isn't that big to deserve a sophisticated bundler, the Web App within is already CRA with typescript.

However, here comes problems where we lose the benefit of having Webpack default support of dotEnv, hot reload and other cool features. Since CRA 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 just 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 wish 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": ""

Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

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

Enter fullscreen mode Exit fullscreen mode

Now, you have a dynamic config.json in different build of your Electron App. Hooray! no more messing with Webpack.

Discussion (0)