Implementing Wildcard Subdomain (Part 2) - Creating subdomain programmatically

Hello there! Let's talk about subdomains, those nifty little subdivisions of your website that make organization a breeze and can help with SEO. And if you're like me, you appreciate anything that makes life a little easier.

But what if you want to create subdomains on the fly, like magic, when your users sign up? That's where things get a little more interesting, and fun! and not just any subdomains, we're talking about programmatically creating subdomains using Netlify APIs. Sounds fancy, right? Don't worry, it's not as complicated as it sounds.

Just like in Part 1 where we talked about doing it manually, we'll guide you through the steps to make it super easy.

Step 1: Get yourself a Netlify Personal Access Token. Think of it as your secret password to access all the goodies Netlify has to offer or a golden ticket, but for web development.

Step 2: You'll also need to get your Netlify Site ID. This is like your website's fingerprint, it's unique to your site and helps Netlify identify it. It is like the secret handshake to access all that good stuff we talked about.

Step 3: This is the fun part. To make the magic happen. You will need to make a couple of API calls to get everything up and running.

Now, I know what you're thinking. "API calls? That sounds intimidating." But fear not, my friends! I am going to break it down and make it so simple, even your grandma could do it (assuming she's a tech-savvy grandma, of course).

The first API call is to get your site information. Think of it like checking your website's pulse. This will return all the information about your site and the data we need to manipulate. It's called "domain_aliases".

The second API is to patch the site information after you've manipulated/added the new domainAlias to the list of "domain_aliases". See it as a digital seamstress, but instead of fabric, you're working with code.

const getAndUpdateDomainAlias = async newDomainAlias => {
    const siteId = 'YOUR_NETLIFY_SITE_ID';
    const accessToken = 'YOUR_NETLIFY_ACCESS_TOEKN';
    const url = `https://api.netlify.com/api/v1/sites/${siteId}`;
    const headers = {
        Authorization: `Bearer ${accessToken}`,
        'Content-Type': 'application/json',
    };
    // Get Netlify Site to read existing domain aliases
    const siteInformation = await fetch(url, { method: 'GET', headers });
    const sites = await siteInformation.json();
    //   If Netlify Site does not have the domain alias we want to add
    const currentDomainAliases = sites.domain_aliases;
    if (!currentDomainAliases.includes(newDomainAlias)) {
        // Update the Netlify Site to include the domain alias we want to add
        const newDomainAlias = {
            domain_aliases: [...currentDomainAliases, domainAlias],
        };

        const body = JSON.stringify({ domain_aliases: newDomainAlias }) 
        await fetch(url, { method: 'PATCH',  headers, body });
    }
}

The complete code can be found here