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

Answer 1

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 2

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.