Using nconf in the browser?

Question

I'm looking to use https://github.com/flatiron/nconf in the browser. I have tried to use it with browserify but because nconf calls fs.readdirSync when it is required to scan directories for configuration, it fails in the browser.

// config.js
'use strict';

var nconf = require('nconf'); // this triggers the fs.readdirSync

var globalConfig = { my: { global: 1 }};
nconf.use('global', { type: 'literal', store: globalConfig });

var envConfig = { my: { env: 2 }};
nconf.use('env', { type: 'literal', store: envConfig });

module.exports = nconf;

Is it possible to use some sort of browserify transform (I didn't see a way to make it force the use of BRFS in nconf) or a way to use nconf (or some other similar library) to manage client side configuration?

If not nconf itself, then just something that would allow me to do something similar to this:

config.load('user-settings', { my : { user: 1 } });
config.load('global-settings', { my: { global: 2 } } );

config.get('my.user'); // 1
config.get('my.global'); // 2

config.unload('global-settings');

config.get('my.global'); // undefined

There is this: https://www.npmjs.com/package/confify but it doesn't allow for plugging in your own formatter, so you can't use yaml for example. There's also browserify-fs, but I can't yet work out how to make it override the fs require script in the browserify bundler. — marksyzm, Apr 28 '15 at 15:47

score 0 · Answer 1 · answered Jun 02 '20 at 21:54

I recently had this issue myself. I decided to just put together my own config file, rather than pull in another library. here's what I ended up with:

/*
 This file determines which environment we're in, and provides the app with the appropriate config
 */
export const defaults = {
  searchURI: 'http://www.google.com/',
  anotherURI: 'https://stackoverflow.com/',
};

export const dev = {
  searchURI: 'https://www.bing.com/',
};

export const test = {
  searchURI: 'https://www.yahoo.com/',
};

export const prod = {
  searchURI: 'https://duckduckgo.com/',
};

const config = () => {
  switch (process.env.YOUR_ENV_NAME) {
    case 'dev':
      return dev;
    case 'test':
      return test;
    default:
      return prod;
  }
};

export default {
  ...defaults,
  ...config(),
};

using this pattern, you can import config just like you would nconf:

import config from './path/to/above/file.js';

const { searchURI, anotherURI } = config;
// OR
const searchURI = config.searchURI;
const anotherURI = config.anotherURI;

Using nconf in the browser?

1 Answers1