How to have a external JSON config file in react jsx

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.


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.


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());

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'));

Tags:

Javascript

Reactjs

Jsx

Recent Posts