2

My React application uses webpack to bundle the resources which are then put in a Docker image for deployment. I have a set of configuration variables that I want to add to a JSON file that can be read by my application at runtime. For example, API keys or API URLs, which can change at any time. This JSON file will be updated as and when required via Kubernetes Configmaps and Secrets.

I have looked at many posts and solutions, but none of them seem to work correctly.

For example, if I try the solutions at the below links, the JSON file gets bundled along with the other resources. I have to restart webpack / build again for the changes in the JSON file to get reflected in my application.

Webpack -- include configuration file as external resource

How to store Configuration file and read it using React

Any way to use webpack to load a resource at runtime?

What's the best way to handle my requirement?

My project structure is as follows:

├── config
│   └── jsonConfig.prod.json (This will be updated on the server)
├── src (My react application code which gets bundled via webpack)

Contents of jsonConfig.prod.json:

{
  "name": "my-app"
}

My webpack.config.js

externals: {
  'jsonConfig': JSON.stringify(PRODUCTION ? require('./jsonConfig.prod.json') : require('./jsonConfig.dev.json'))
}

In my code (after npm run build):

import * as jsonConfig from 'jsonConfig';
console.log(jsonConfig.name); // my-app

I change contents of jsonConfig.prod.json:

{
  "name": "my-app2"
}

In my code (same build as before):

import * as jsonConfig from 'jsonConfig';
console.log(jsonConfig.name); // Still my-app
Reza Mousavi
  • 4,420
  • 5
  • 31
  • 48
Eric P Pereira
  • 450
  • 1
  • 7
  • 18
  • So you've tried adding the file to `externals` in your Webpack configuration but it didn't work? If so, you may have done something wrong because that is the 100% correct way to solve this problem. – Adam Oct 01 '18 at 06:14
  • Yes. I've updated my question with some code snippets explaining my changes. – Eric P Pereira Oct 01 '18 at 09:35
  • The way you're trying to do it injects the contents of `jsonConfig` directly into the bundle. To have an external configuration file that can dynamically update the app will probably require a different method for loading such as an AJAX request on app load. – Adam Oct 01 '18 at 17:47
  • I thought so. Will consider moving to `dotenv` instead. That would serve my purpose right? – Eric P Pereira Oct 03 '18 at 04:17
  • I haven't used dotenv before, but that seems to be a potentially good solution for this. – Adam Oct 03 '18 at 04:30
  • Unfortunately dotenv doesn't work too. So webpack will expose all references to environment variables when bundling just as as it does for imports. References: https://www.npmjs.com/package/dotenv-webpack https://webpack.js.org/plugins/environment-plugin/ – Eric P Pereira Oct 09 '18 at 03:54
  • I'm coming to the conclusion that what I want to achieve isn't possible unless I rebuild the entire application or have an API call to an internal node server of my application that can read environment variables and pass it back to my application. References: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables – Eric P Pereira Oct 09 '18 at 03:56
  • Can anyone confirm my conclusions? – Eric P Pereira Oct 09 '18 at 03:57
  • On the `create-react-app` documentation, there is section that refers to `Injecting Data from the Server into the Page`. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#injecting-data-from-the-server-into-the-page Does anyone know how to do this? I am not using `create-react-app` by the way. I am using my own configuration using webpack. – Eric P Pereira Oct 09 '18 at 03:58
  • I'm going to try this and see if it serves my purpose: https://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/ – Eric P Pereira Oct 09 '18 at 08:50

0 Answers0