admin 管理员组

文章数量: 1086019

I am writing a Client / Server application with the front end UI based in React. As a back-end Unix developer web technologies are not my forte so this is all new to me.

I need to be able to configure the UI to point to the server's URL and also to set other preferences. The typical react approach seems to be to use .env environment variables. However, as per this link: multiple-environments-with-react 'the “environment variables” will be baked in at build time'. This does not work for me as the application is an OEM offering to be sold to customers who would configure it themselves for their own environment. I do not know their server URLS at build time so I need a way that I can deliver the pre-built (minified / linted, etc) JS to them in a single archive and let them edit some sort of properties file to configure it for their needs.

What would the general JavaScript / React best practice be for this sort of use case?

Thanks,

Troy

I am writing a Client / Server application with the front end UI based in React. As a back-end Unix developer web technologies are not my forte so this is all new to me.

I need to be able to configure the UI to point to the server's URL and also to set other preferences. The typical react approach seems to be to use .env environment variables. However, as per this link: multiple-environments-with-react 'the “environment variables” will be baked in at build time'. This does not work for me as the application is an OEM offering to be sold to customers who would configure it themselves for their own environment. I do not know their server URLS at build time so I need a way that I can deliver the pre-built (minified / linted, etc) JS to them in a single archive and let them edit some sort of properties file to configure it for their needs.

What would the general JavaScript / React best practice be for this sort of use case?

Thanks,

Troy

  • javascript
  • reactjs
Share Improve this question asked Oct 16, 2018 at 8:54 Troy PetersonTroy Peterson 5211 gold badge6 silver badges18 bronze badges 3
  • 1 You could simply ship a config.json file that holds all the environment-specific configuration values, the users can configure the application through that file as they please, leaving your bundled JS untouched and in tact. – mehmetseckin Commented Oct 16, 2018 at 8:58
  • only way you can get this to work then is to have a pre-flight XHR call that gets the env from a static file or server endpoint that your users will have to provide. – Dimitar Christoff Commented Oct 16, 2018 at 8:58
  • if I include a config.json, is there any way with react (app was created with create-react-app) to prevent it from being minified along with the rest of the app? This was my first thought but I don't really know about the actual build process and if the build would try to in-line anything like that when it's built. – Troy Peterson Commented Oct 16, 2018 at 9:05
Add a ment  | 

1 Answer 1

Reset to default 8

The easiest solution for me turned out to be to include a tag in my index.html. This gets minified during the NPM build but it does not get bundled with the other javascript so it can easily be replaced with another file at deploy time. My config.js looks like this:

config = {
    "title": "Application Title",
    "envName": "LocalDev",
    "URL": "localhost:8090"
}

Then inside my react ponents they're accessible by using:

const config = window.config;
alert("Application branding title is: " + config.title);

I will now have various config.js files for each environment (config.js.dev, config.js.uat, config.js.prod, etc) and at deployment I will link or renmae the appropriate one to config.js.

本文标签： reactjsDynamic configuration variables in JavascriptReactStack Overflow

版权声明：本文标题：reactjs - Dynamic configuration variables in JavascriptReact - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744023853a2520284.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。