17

I want to have a external configuration file (JSON) in my React based project. That is the ultimate outcome or when I deliver it (public folder and the bundle.js) my configuration file also should be given. The User should be able to change the configurations according to his or her wish and use my app. That is there without recompiling my code one should be able to use it. In other words configuration file should not bundle with my app.

JEJC_JACALK
  • 409
  • 1
  • 5
  • 13
  • Can you provide an example? And a clear question? – djfdev Jan 25 '18 at 02:57
  • 1
    You probably just want to fetch it via AJAX. – SLaks Jan 25 '18 at 02:58
  • I am creating a react app. I need some urls to access some resources and those should be stored in a external Config file which is in JSON. Once my application is deployed they can be changed (Urls). So the user should be able to change them. There it should not recompile my code. – JEJC_JACALK Jan 25 '18 at 04:57

4 Answers4

17

The accepted answer may work. However, why make it so complicated?

Step#1. Create a file Config.js, with content

var Configs = {
    prop1 = "abc",
    prop2 = "123"
}

Step#2. Load the file in index.html via script tag. 

<div id='root'></div>
<script src="Config.js"></script>
<script src="dist/bundle.js"></script></body>

Step#3. Just access the setting directly within any React component.

class MyComponent extents Component {

    render() {
        //you can access it here if you want
        let myprop1 = window.Configs.prop1;

        return(){
            <div>myprop2 is: {window.Configs.prop2}</div>       
        }
    }
}

Step#4. Profit?

Does not require or need to involve webpack, webpack-externals, webpack-config, import Config from 'config', or any other BS.

Why it works? because we declared 'Configs' to be a prop of the window object, and loaded it globally.

joedotnot
  • 4,810
  • 8
  • 59
  • 91
  • 1
    Great! Simplest solution I've seen for this problem. Side-note for future viewers: `var` in step 1 is important. `const` or `let` won't work. – m01010011 Nov 18 '20 at 01:24
  • @m01010011 why is that? I assume it would work fine anywhere ES6 can be evaluated/executed. – mecampbellsoup May 25 '21 at 15:43
9

Like Joseph Fehrman said without thinking only about the JSON, using JS worked for me. This is what I did.

I created a JS file called configurations.js which included my required configurations

var configs = {
"aUrl": "https://localhost:9090/",
"bUrl": "https://localhost:9445/"};

Then in the index.html I added it.

<body>
<div id='root'></div>
<script src="configurations.js"></script>
<script src="dist/bundle.js"></script></body>

Then in the webpack.config.js I added it to externals like this. (Note that in the configurations.js, name of the variable is configs).

externals: {
    config:  "configs", 
}

Then in where ever I want it, I can import it and use it nicely. This worked perfectly where I was able to change the configurations after it was deployed (That is did not have to recompile the code where my bundle.js remained untouched :-)). An example showing how it was used is given below.

import { Component } from 'react';
import axios from 'axios';
import Config from 'config';
/**
* @class GetProductAreas
* @extends {Component}
* @description Get ProductAreas
*/
class GetProductAreas extends Component {
    /**
    * @class GetProductAreas
    * @extends {Component}
    * @description get product areas
    */
    getproductAreas() {
        const url = Config.aUrl;
        return axios.get(url).then((response) => {
            return (response.data);
        }).catch((error) => {
            throw new Error(error);
        });
    }
}

export default (new GetProductAreas());
JEJC_JACALK
  • 409
  • 1
  • 5
  • 13
  • 5
    What webpack.config.js ? if we are using create-react-app there is no webpack.config.js (or it is probably hidden). What to do in the cra case? – joedotnot Mar 06 '19 at 05:41
3

The question is a bit vague. I think I know what you are asking for. As long as you are planning on using Webpack or Browserify you could do the following. It does require slightly different thinking instead of a pure JSON file using a JS file to mask it.

config.js:

let config = {
  option1: true,
  option2: false
}

module.exports = config;

And then from your file using the configuration you could do something similar to the following.

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import config from './my/relative/config/path/config';
import MyOtherComponent from './components/my_component';

let component = (<MyOtherComponent config={config} />);
ReactDOM.render(component, document.querySelector('mount'));
Cogwizzle
  • 550
  • 4
  • 14
  • Because you are importing your config.js file into app.js, the config file will not remain external, but it will be part of the bundle.js ? the question clearly asked for "External config file". – joedotnot Mar 06 '19 at 12:01
  • @joedotnot Thanks for the response. You were correct. I will try and read more carefully next time. – Cogwizzle Mar 12 '19 at 18:55
3

Last solution worked great, here's some improvements:

Config file, in /public folder:

config.js

var Configs = {
  var1: "value",
  var2: "value2"
}

In /public/index.html file, add script call in the header

<head>
....
<script src="config.js"></script>
....
</head>

Last, call the var from the code. Works great! 

import React from 'react'
.... 

const data = window.Configs.var1

With this solution I can have several servers without recompiling, and it's easy to do.

Christian Oviedo Gabarda
  • 127
  • 1
  • 7