Login/Register
How to load an external config file in a Webpack-React application without bundling it?
Asked Answered
Solved reactjswebpackexternals
E

2

12

I have a web application that is written with React and bundled with Webpack. The application has a JSON config file that I want to include at runtime and not to be bundled with webpack.

In my entry point for the application I am importing the contents using the json-loader but doing that forces the file to be embedded in the application and I can't update the config file once it's been bundled.

How can I configure my webpack.config.js file to exclude my config.json file but still let me import it in my application? It's not a module so I don't know if it can be included in the externals section of my webpack.config.js

I tried using require.ensure but all I see now is the contents of config.json bundled into a 1.1.bundle.js file and changing the config file does nothing.

app.js

let config;
require.ensure(['./config.json'], require => {
    config = require('./config.json');
});
Elimination answered 8/7, 2016 at 17:9 Comment(1)
You could fetch the json file via http with fetch() or node's http. Does the application run on a node server and the browser? Or just in the browser? – Asynchronism
E
2

I ended up using a modified version of that to load my script externally. My application doesn't require the config immediately so the async aspect doesn't make a difference here.

I placed this at the top of my <head> in applications entry page with a co-located config file.

<head>
    ... other scripts
    <script>
        var config= window.config|| {};
        $.getJSON('config.json', function(response) {
            config= response;
        });
    </script>
</head>
<body>
    <div id='root'/>
    <script src='dist/app.bundle.js'></script>
</body>
Elimination answered 19/10, 2016 at 13:26 Comment(1)
Where are you making sure that the config is available in the dist/app.bundle.js? – Glauce
T
2

If your config is not so confidential, you could do this in your index.html

<script>
  var initialState = {
    config: {
      idleTime: 120,
      fetchStatusInterval: 8,
      dataPath: 'somepath.json',
    },
  };
  window.__INITIAL_STATE__ = initialState;
</script>
<script src="static/bundle.js"></script>

And in your react application get your config with

const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;
Trichinize answered 16/10, 2016 at 18:34 Comment(0)
E
2

I ended up using a modified version of that to load my script externally. My application doesn't require the config immediately so the async aspect doesn't make a difference here.

I placed this at the top of my <head> in applications entry page with a co-located config file.

<head>
    ... other scripts
    <script>
        var config= window.config|| {};
        $.getJSON('config.json', function(response) {
            config= response;
        });
    </script>
</head>
<body>
    <div id='root'/>
    <script src='dist/app.bundle.js'></script>
</body>
Elimination answered 19/10, 2016 at 13:26 Comment(1)
Where are you making sure that the config is available in the dist/app.bundle.js? – Glauce

© 2022 - 2024 — McMap. All rights reserved.