title: Multiple domains and subdomains using one Angular 7 app
body: <p>I have an idea for a website that I want to build myself. I have been reading in the documentation, in articles and through tutorials. But I couldn’t fully find the answers I needed.</p>
  
  <p><strong>Situation:</strong></p>
  
  <p>I have a project at AWS Lightsail (including: Angular 7, Node, MongoDB, Nginx, Express). I have multiple domain names with dynamic subdomains, used to differentiate information for employees of clients/brands. The multiple domains are part of it to make it easier to navigate and communicate. </p>
  
  <p>For example:</p>
  
  <pre><code>client1.domain1.com/some/info/
  client1.domain2.com/some/info/
  ..etc.
  </code></pre>
  
  <p><strong>Setup:</strong></p>
  
  <p>I have configured the subdomains and domains through <strong>Nginx</strong> making it work with wildcard subdomains as well as declared subdomains and domains. The dynamic subdomains are configured like this: </p>
  
  <pre><code>server {
    listen 80;
    listen [::]:80;
    server_name ~^((?&lt;sub&gt;.*)\.)(?&lt;domain&gt;[^.]+)\.com$;
    root /opt/bitnami/nginx/html/$domain/$sub;
    try_files $uri $uri/ /index.html$is_args$args;
  }
  </code></pre>
  
  <p>which outputs as this directory:</p>
  
  <pre><code>/opt/bitnami/nginx/html/domain1/client1/ 
  </code></pre>
  
  <p><em>(client1 is in there just to test. It wouldn’t be a directory in an ideal case. Also domain1 &amp; client1 should only be in the url as the domain &amp; subdomain itself. not as a directory)</em></p>
  
  <p><strong>Thoughts:</strong></p>
  
  <p>Ideally it would be one system where each domain points to, and the content is differentiated based on the domain name and client. I thought about the following:</p>
  
  <ul>
  <li>Have a separate app on each domain. But that would give a lot of duplicate code and work to maintain/do changes. </li>
  <li>Have a component for each domain. But then I don’t know how to make the routing work.</li>
  <li>Have multiple apps in one project. But Angular deploys everything in 1 HTML file with JavaScript. How do I make the routing work there? </li>
  <li>etc. </li>
  </ul>
  
  <p>But none really seem to work as I imagine. How do I make this work properly? How would I be able to serve the app using multiple domains in a valid, scalable &amp; secure way?</p>