Managing application settings in an Electron application

Question

I'm curious to know how can one manage application settings in an Electron application? I have found some excellent resources here (Where to store user settings in Electron (Atom Shell) Application?, for example) and elsewhere when it comes to managing user settings but couldn't find anything related to managing application settings.

To me, the difference between the two is that application settings could vary from environment to environment (dev/test/production) but would remain the same for all users of the application. They would contain things like API endpoints etc. User settings on the other hand would change from user to user based on their preferences like window width/height etc.

What I have done so far?

I have found this excellent package called config and start using it in my project. Based on the instructions, I have created a config folder and a default configuration file (I will create environment specific configuration files later).

It is working fine as long as I am developing the application. The application is picking up the default.json file properly from the config folder and is applying those settings correctly.

The problem comes when I package the application (MSI, DMG etc.). I am using electron-builder package for that purpose.

The problem with config package is that it looks for config folder inside the application's current working directory and because it doesn't find it in the folder where the application is installed, it simply throws an error. I even tried to manually copy this folder in my app folder (which is where electron-builder makes the packages) but that didn't help either. Ideally I would like to bundle the app settings in application's ASAR file so that it can't be decompiled.

My questions are:

• How are people managing application settings for an Electron application?
• Can config NPM package be used for that? Or is there an alternative to that package specifically for Electron applications?

Answer 1

I am not using an npm package but my approach is similar to what you have mentioned. I have a config directory with different config files for different environments: dev, test, prod. Then in my package.json I have added environment specific build commands. e.g. For prod:

"build-prod-config": "config/buildProdConfig.sh",
"build-renderer-prod": "webpack --config=webpack.config.renderer.prod.js",
"build-main-prod": "webpack --config=webpack.config.main.prod.js",
"build-prod": "npm run build-prod-config && npm run build-main-prod & npm run build-renderer-prod",

buildProdConfig.sh
#!/usr/bin/env bash

cp config/app.config.prod.js config/app.config.js
echo "Copied ProdConfig to Config"

//This is what a config file looks like
const Config = {
  suppDataDirectoryPath: '/suppData/',
  builtFor: 'prod',
}

module.exports = Config;

I then require Config whereever I need in my application and use the values. This is a simple thing for now, and perhaps doesn't have the flexibility of the config package you linked to, but it works.

Also, another important thing is that I am not packing my application into an ASAR archive, but I think my approach would still work because I am packing everything into a bundle using webpack.