How to configure a SPA on loading?

Question

We are using Webpack, React, Node.JS but I think this question is more generic that the specific technologies. I can use Webpack to configure the SPA when building for deve

Answer 1

One way is to rewrite the contents of the HTML file upon deploy.

You can have a placeholder string, e.g. "$MY_CONFIG_HERE$" in your HTML.

This can be in an some inline javascript tag on the page, which will set a javascript object on window.

Then have your deploy process (Continuous Deploy) replace that string with the actual javascript object containing the data you want.

Then, the data will be available on window to your javascript running in the Single Page App.

Answer 2

I found one way of doing what is required. It is by setting a cookie with configuration details when serving the SPA. The SPA can then read that cookie to get the configuration (and delete the cookie because it is not needed any more).

There is a NPM module called ClientConfig that will assist in doing what I have described. It works very similar to a companion NPM module called GetConfig that helps with configuration on the server side. ClientConfig: https://github.com/henrikjoreteg/clientconfig

How to use ClientConfig and GetConfig (separately and together) is described here: http://read.humanjavascript.com/ch12-settings-and-configs.html

This seems like a solution to me though I wonder about any potential security issues (that's alway more complex than first appears) and if there is not an easier approach. Any comments or further solution would be appreciated.

Answer 3

We are struggling with the same concepts right now. The best way I found to configure at run time is by using env variables (which can be set at build time but also overriden at runtime using docker native or any other orchestration tool such as ECS or GKE).

Another, dirtier way, we used before is performing the run-time adjustments via the CMD directive of the image. This is not really recommended since it makes your image mutable and can make it prone to errors. However - it does work, and if used wisely can achieve what you want. A simple example for this is replacing your current CMD which probably looks a bit like this CMD node app.js with something like this - bash -c "wget prod.conf && node app.js"

Answer 4

Our current code uses WebPack DefinePlugin but I don't believe this allows one to do what we need. I have also found the ExtendedDefinePlugin which mentions the client but again, I am unsure if it is a possible solution:

https://github.com/ArikMaor/extended-define-webpack-plugin https://www.npmjs.com/package/extended-define-webpack-plugin

The DefinePlugin is also discussed here:

Passing environment-dependent variables in webpack

But again I don't believe this will allow us to configure the client SPA based upon the deployment context rather than the build context.