Alpha Coder

How to configure wildcard subdomains

Some web apps, especially those for the enterprise, give every organization, team or user their own subdomain such as team-name.awesomeapp.com or org-name.beta.awesomeapp.com. These subdomains are variable, meaning that they are not predefined and can contain any valid domain name characters.

To configure wildcard subdomains, all you need to do is add a “match all” CNAME record for your domain. The way a given subdomain is handled is totally up to your application. All web browsers and servers provide a medium for accessing a web app’s url for a given request, so you can fetch the subdomain and proceed with your business logic. Often, the subdomain would be a unique id for something e.g an organization, so your can use it to get the organization’s details for instance.

Here’s a sample application that displays avatars from Adorable Avatars based on the subdomain you use.

Visit some-random-name.wildcard-subdomains.alphacoder.xyz where some-random-name can be anything you like and watch the avatars change!

To use wildcard subdomains, go to your domain registrar and create a “match all” CNAME record

If you want subdomains like some-random-name.alphacoder.xyz, feel free to skip the .wildcard-subdomains so that you have only * in the host field.

The web page has just a few lines of code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Wildcard subdomains</title>
</head>
<body>

  <h1 id="subdomain"></h1>
  <img id="avatar">

  <script>
    var subdomain = window.location.hostname.split('.')[0];
    document.getElementById('subdomain').textContent = subdomain;
    var avatarSrc = 'https://api.adorable.io/avatars/285/' + subdomain + '.png';
    document.getElementById('avatar').src = avatarSrc;
  </script>
</body>
</html>

The most important part of the code is line 12, which gets the subdomain from the hostname (window.location.hostname.split('.')[0]).

In development, you can use lvh.me (e.g some-random-name.lvh.me:8080) to test your application instead of 127.0.0.1. some-random-name.localhost also works on browsers I’ve tested.

Subscribe to the Alpha Coder Newsletter!

Get timely updates on new articles, courses and more from Nicholas Kajoh. Unsubscribe anytime.

Enjoy the content on Alpha Coder? Please buy me a coffee. 😊

Previous post: Fixing UnhandledPromiseRejectionWarning in Node.js

Next post: Machine Learning explained


comments powered by Disqus