how to implement reactjs global configuration

Question

I am trying to follow this link about setting up global configuration. And I am unable to make it work. When I run my reactjs component I get an error that Config is undefined.

my webpack.config file looks like this:

module.exports = {
  entry: './src/app.js',
  externals: {
    'Config': JSON.stringify({
      optionsService: 'http://localhost:8080/options'
    })
  },
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }
    ]
  }
};

and I've tried using it like this:

import React from 'react';
import Config from 'Config';

// these also fail
// const Config = require('Config');
// var Config = require('Config');
// let Config = require('Config');


export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
            {Config.optionsService}
            </div>
        );
    }
}

I've also tried the commented out lines, to no available.

What am I doing wrong?

Thank you Matt

Answer 1

$ npm install react-global-configuration

After install:

import config from 'react-global-configuration';

config.set({ foo: 'bar' });

getting your value

import config from 'react-global-configuration';

config.get('foo');