title: recommendations for runtime configuration of backend API url in Angular 2 application
body: <p>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.</p>
  
  <p>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 <strong>one piece that I always seem to want dynamic with the front-end is the back-end URL</strong>.</p>
  
  <p>What I mean is that I usually serve my app off let's say <code>http://server:123/</code> and my API from <code>http://other:456/api</code>. Frequently, <code>other</code> and <code>server</code> are the same and the ports change, but as we scale, this is not always the case.</p>
  
  <p>So, my question is: <strong>what are the best practices for providing configuration data to an Angular 2 application?</strong></p>
  
  <p>Here is what I thought of already:</p>
  
  <p><strong>proxy</strong></p>
  
  <p>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 <em>static</em> 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.</p>
  
  <p><strong>configuration file</strong></p>
  
  <p>This is currently my favorite. I pretty much serve a static file (let's say <code>/config.json</code>) 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 <em>not</em>. 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 <code>/config</code>).</p>
  
  <p><strong>code configuration</strong></p>
  
  <p>This is my least favorite. In this approach, the configuration is written directly into a code file (<code>config.ts</code> 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.</p>