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