How to use multiple subdomains and angular apps with nodejs

Question

I want to be able to use multiple, dynamic subdomains, for account holders, while also having an api subdomain. Essentially something like below:

https://example.com --> Angular 4 public landing page app
https://api.example.com --> NodeJS api
https://otbs.example.com --> Angular 4 SaaS application
https://test-account.example.com --> Angular 4 SaaS application

The public landing page app is just an Angular 4 app for the public facing application, whereas the SaaS application is the actual application itself, for when users are logged in, and is mapped to a subdomain as per their linked account.

I am using NodeJS, Express 4, Angular 4, and the Angular CLI. My intention would be to use S3 for serving the client Angular applications, while having the NodeJS API run in ElasticBeanstalk.

Is this configuration possible? I have looked in virtual hosting on AWS, but this isn't necessarily what I'm looking for as I need the ability to register a new subdomain every time a new account is created.

You'll probably want to write a shell script for this to be invoked when an account is created — Kai, Aug 14 '17 at 19:34
Possible duplicate of [How to dynamically create subdomains](https://stackoverflow.com/questions/5822117/how-to-dynamically-create-subdomains) — Michael Fedora, Aug 14 '17 at 19:39
But isn't there any form of hierarchical wildcard subdomain configuration in AWS/Route53? Something like api.domain.com -> NodeJS EBS environment; **.domain.com -> Angular SaaS App; and then everything without a subdomain just points to the public Angular app. Also, I don't think this is a duplicate as this is specific to AWS rather than PHP and .htaccess config + that question isn't attempting to leverage multiple environments. Thanks though — A. Appleby, Aug 14 '17 at 19:47
It was more of the answer that I thought would apply here: "anything.mysite.com will resolve to mysite.com... [then] it's up to your code to kick in and serve up the proper content". Dunno if you have something like nginx or whatever to handle it, but I'm sure AWS has something? — Michael Fedora, Aug 14 '17 at 19:59

Ashan · Answer 1 · 2017-08-14T22:00:04.967

We have done this using AWS CloudFront with wildcard DNS mapping through route53. The approach is to map *.example.com to a CloudFront distribution and use override record set api.example.com for the API in route53 so that API is pointed to your express webserver. The steps are as follows.

When a user creates an account you can also store the assigned a subdomain(virtual) for them in your backend.
After the user logs in through a login (login.example.com) page he/she will be redirected to their subdomain with a token or cookie.
Optionally if a single user needs to be in multiple subnets you can provide the option to select after login or go to a default one where user can switch internally.

Here the subdomain is merely a mask but the actual mapping validates from your backend. So regardless of the subdomain if user goes to any subdomain the Angular app loads since its wildcard but will be validated from the API requests and relevant messages can be shown to the users.

Also you can connect your API to the same CloudFront distribution with behavior to redirect (e.g api/*) so that Angular app doesn't get CORS issue.

How to use multiple subdomains and angular apps with nodejs

1 Answers1