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

Question

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

I have a config.development.json 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?

A core question is how often will they update these values. Having to do a new deployment for changing a color is silly. However, if you're only doing this every year, then loading data from a database or API is also silly. Allowing people to edit JSON files is also, not a good idea. — Garry Taylor
– Garry Taylor, Commented Nov 6, 2016 at 23:24

Kevin Law · Accepted Answer · 2016-11-07 10:19:12Z

2

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

https://github.com/ded/script.js

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

https://github.com/sheerun/external-loader

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

edited Nov 7, 2016 at 10:19

answered Nov 7, 2016 at 10:14

Kevin Law

4,1102 gold badges28 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

erik-sn · Accepted Answer · 2016-11-06 22:53:34Z

2

I think the best approach would be to create an API endpoint that react interacts with to load them.

answered Nov 6, 2016 at 22:53

erik-sn

2,6001 gold badge23 silver badges39 bronze badges

1 Comment

Sreevisakh Over a year ago

but how will you make sure this config is loaded before react app loads

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related