recommendations for runtime configuration of backend API url in Angular 2 application

Question

This has been bugging me for a while and it seems that every other week, I come up with a different set of pros and cons.

The gist of it is that a good SPA is split into 2 different parts. The front-end and the back-end. The front-end should only be about static files (javascript, css, html, etc.) while the back-end serves the actual data and is dynamic. However, the one piece that I always seem to want dynamic with the front-end is the back-end URL.

What I mean is that I usually serve my app off let's say http://server:123/ and my API from http://other:456/api. Frequently, other and server are the same and the ports change, but as we scale, this is not always the case.

So, my question is: what are the best practices for providing configuration data to an Angular 2 application?

Here is what I thought of already:

proxy

Most web servers, even the mostly static-content-oriented ones, offer some sort of proxy configuration (nginx, angular-cli serve, etc.). The problem with the proxy is that the request does do a double-hop. It first must be sent to the static server and then that server must turn around and make the real request. I am not a fan of this architecture, though I did use it in the past on other applications.

configuration file

This is currently my favorite. I pretty much serve a static file (let's say /config.json) off my static-content server which contains one or more URL or other non-sensitive information. I like this approach because it allows you to use a proxy, or not. It's up to you. Most of the time, it is pretty simple to configure your web server to return a static file based on a url (let's say /config).

code configuration

This is my least favorite. In this approach, the configuration is written directly into a code file (config.ts for example) and has to be changed for each environment. I consider code and configuration to be 2 different tasks and in most of the company I have worked with, they are handled by 2 different teams. It would be silly to have to recompile your code and redeploy just to change your back-end URL.

Answer 1

I used configuration files but prefer setting environment variables by DevOps tools.

With containers, for simpler configuration, I use environment variables. Otherwise I pass configuration of a back-end config store, like Redis or now a days Kube Secrets (easier to use).