DEV Community

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

Posted on • Edited on

1

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 a Web App. Moreover, the Electron code base isn't that big to deserve a sophisticated bundler, the Web App within is already CRA with typescript.

However, we are losing the benefit of having the default support of dotEnv supported by Webpack bundler, as well as 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 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": ""
}

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.

# 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

Enter fullscreen mode Exit fullscreen mode

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay