dommer dommer - 4 months ago 27
React JSX Question

How can I dynamically loading external configuration settings in a React JS app?

I'm currently using Webpack to manage configuration for my React JS app.

I have a

file that is loaded by my development build script. It contains

"primary1Color": "pink"

It's loaded in the Webpack script as follows

externals: {
configuration: JSON.stringify(require("./config.development.json"))

There's a similar set up for production builds.

I reference the config parameters in my app as follows

import configuration from "configuration";

const mainColor = configuration.primary1Color;

This is all working.

However, I'd like to allow the settings to be configured post-deployment---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.

How can I get the app to dynamically load my JSON config file?


You don't have to bundle it with webpack. You can use normal ajax call to load the json or use script.js.

However if you really want to use webpack loader, you can try external-loader.

More discussion here: "Require external (unmanaged) file"