How to configure a SPA on loading?

问题:

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 development mode or production mode (e.g. using the DefinePlugin).

How can I configure a SPA in production mode (configured at build) for different deployment environments (e.g. staging vs production)? For example, these different deployments would talk to different backend server APIs.

Somehow the SPA has to pickup some local context from the server as it is being GET'ed by the browser. Or perhaps we have to have a custom configuration file on each server that the SPA can securely GET?

We are using NodeJS on the server and this SPA will eventually be running as an isomorphic app so that could help. We are deploying these applications in Docker images and it's easy to configure their environment on deployment.

Thanks for any suggestions.

回答1:

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"

回答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.

回答3:

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.