I want to have an 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, without recompiling my code, one should be able to use it. In other words, configuration file should not bundle with my app.
-
Can you provide an example? And a clear question?djfdev– djfdev2018-01-25 02:57:54 +00:00Commented Jan 25, 2018 at 2:57
-
1You probably just want to fetch it via AJAX.SLaks– SLaks2018-01-25 02:58:28 +00:00Commented Jan 25, 2018 at 2: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– JEJC_JACALK2018-01-25 04:57:23 +00:00Commented Jan 25, 2018 at 4:57
Add a comment
|
4 Answers
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.
2 Comments
m01010011
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.
mecampbellsoup
@m01010011 why is that? I assume it would work fine anywhere ES6 can be evaluated/executed.
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());
1 Comment
joedotnot
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?
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'));
2 Comments
joedotnot
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".
Cogwizzle
@joedotnot Thanks for the response. You were correct. I will try and read more carefully next time.
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.
1 Comment
joedotnot
and you are just repeating my answer 6 months later? (see what i answered in Mar 2019)