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