Maintainable JavaScript — Storing Config Data

Spread the love

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at ways to store config data.

There’re various ways to store the config data of our app.

Front end frameworks like React, Vue, and Angular have their own ways of storing environment-specific config data.

The CLI programs that we use to create, run, and build the projects can read from them and get the right config values into our build artifacts.

For instance, with Create React App, we can create our own config file

REACT_APP_NOT_SECRET_CODE=abcdef

in our .env file.

Then we can read the value with process.env.REACT_APP_NOT_SECRET_CODE in our app’s code.

Then when we run npm start to start the app and npm run build to build the app, the value will be added.

It can take one file for each environment.

We can have:

.env.local: local overrides
.env.development, .env.test, .env.production: environment-specific settings
.env.development.local, .env.test.local, .env.production.local — local overrides.

We check ib .env and ignore the local ones.

As long as the key starts with REACT_APP_ , then it can be read.

Vue CLI also has something similar.

It takes the following files:

Then in the .env files, we can write:

VUE_APP_NOT_SECRET_CODE=some_value

As long as the prefix of the config key is VUE_APP_ , Vue CLI will read it.

For Node apps, we can use the dotenv package.

We can install it by running:

npm i dotenv

Then we can create our config by writing:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

and then we can use it by writing:

require('dotenv').config()

Then we can read the config by writing:

const db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

to get the config values from process.env .

We can also store the values in JSON format.

For instance, we can write:

{
  "MESSAGE_INVALID_VALUE": "Invalid value",
  "URL_INVALID": "/errors/invalid"
}

to store the JSON file.

Then we can read the JSON file with fetch , jQuery’s getJSON or whatever we want.

JSON can also be imported directly with import if we use a module bundler like Webpack, Rollup, or Parcel.

For instance, we can just write:

import config from './config.json'

to import our JSON file.

It’ll be imported as if it’s a regular JavaScript object and we can use them as such.

In all the examples, we store the config outside our app.

This way, we can just change the config file, and the values will be reflected everywhere that they’re referenced.

We can store configuration data externally so that we can change the value in one place and they’ll be reflected everywhere.

We can have separate config files for each environment to make our app work in all environments.

By John Au-Yeung