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 or 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 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, 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

<!DOCTYPE html>
<html lang="en">
  <title>Wildcard subdomains</title>

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

    var subdomain = window.location.hostname.split('.')[0];
    document.getElementById('subdomain').textContent = subdomain;
    var avatarSrc = '' + subdomain + '.png';
    document.getElementById('avatar').src = avatarSrc;

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 (e.g to test your application instead of some-random-name.localhost also works on browsers I’ve tested.

Last modified on 2019-04-02

Comments powered by Disqus