title: How can I dynamically loading external configuration settings in a React JS app?
body: <p>I'm currently using Webpack to manage configuration for my React JS app.</p>
  
  <p>I have a <code>config.development.json</code> file that is loaded by my development build script. It contains</p>
  
  <pre><code>{
    "primary1Color": "pink"
  }
  </code></pre>
  
  <p>It's loaded in the Webpack script as follows</p>
  
  <pre><code>externals: {
      configuration: JSON.stringify(require("./config.development.json"))
  }
  </code></pre>
  
  <p>There's a similar set up for production builds.</p>
  
  <p>I reference the config parameters in my app as follows</p>
  
  <pre><code>import configuration from "configuration";
  
  const mainColor = configuration.primary1Color;
  </code></pre>
  
  <p>This is all working.</p>
  
  <p>However, I'd like to allow the settings to be configured <em>post-deployment</em>---i.e. have the app read the config file when it runs. Then, if customers wish to change the color scheme, they can do so without me having to rebuild the app.</p>
  
  <p>How can I get the app to dynamically load my JSON config file?</p>