CODEWITHSUNDEEP
node.jsangularnginx
MarcelDoornbos
MarcelDoornbos

Reputation: 31

Multiple domains and subdomains using one Angular 7 app

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.

Situation:

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.

For example:

client1.domain1.com/some/info/
client1.domain2.com/some/info/
..etc.

Setup:

I have configured the subdomains and domains through Nginx making it work with wildcard subdomains as well as declared subdomains and domains. The dynamic subdomains are configured like this: 

server {
  listen 80;
  listen [::]:80;
  server_name ~^((?<sub>.*)\.)(?<domain>[^.]+)\.com$;
  root /opt/bitnami/nginx/html/$domain/$sub;
  try_files $uri $uri/ /index.html$is_args$args;
}

which outputs as this directory:

/opt/bitnami/nginx/html/domain1/client1/

(client1 is in there just to test. It wouldn’t be a directory in an ideal case. Also domain1 & client1 should only be in the url as the domain & subdomain itself. not as a directory)

Thoughts:

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:

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 & secure way?

Upvotes: 3

Views: 12216

Answers (2)

Igor Kurkov
Igor Kurkov

Reputation: 5066

if you use different domains for different info you can use different routes and insert them due to current domain location.hostname. Hope it helps https://stackoverflow.com/a/59784694/9026103

Upvotes: 0

AliWieckowicz
AliWieckowicz

Reputation: 557

Why not just use a single application with multiple domain bindings and then use routing within the app to segregate content. Assuming no client specific secure information is hard coded into the angular app, you should be able to create a secure application using Angular Routeing paired with a web api to make the end result you are describing.

client1.domain1.com/client/1/info/ client1.domain2.com/client/2/info/

clientx.domainx.com -> all resolve to your app

/client/ -> routes to an angular component 

const routes: Routes = [
  {
    path: '',
    children: [ 
       { path: 'client/:id', component: dynamicClientComponent },
     ]
  }
];

In the angular client component you get your client ID from the url and retrieve client specific content from a web service/api

 constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private clientService: CientService,

  ) {
    route.params.subscribe(params => {
         this.id = this.route.snapshot.params.id;
         if (this.id) {
             this.clientService.getById(this.id).subscribe(
              (record) => {
                 this.ClientInfo = record;
                   //update UI accordingly

         })
    };
}

Here is a working example that illustrates this better than my code excerpt https://stackblitz.com/edit/router-pillar1-demo-final?file=src%2Fapp%2Fapp.module.ts

Upvotes: 3

Related Questions