Hosting Your Embed Code on a Custom Domain or Subdomain

If you build a tool or SaaS business which installs something onto websites, you will at some point have to figure out where to serve it from. It’s not uncommon for us to see services serving their JavaScript embed codes from shared domains like s3.amazonaws.com or cloudfront.net. This is often a common way to get your embed code set up, but there are significant disadvantages.

This post includes instructions for setting things up with both CloudFront and Fastly, but it’s also relevant for whichever CDN you choose to use.

Why Using Your Own Domain is Important

We all hope that your service grows quickly to hundreds or thousands of users. What happens if all of those users have your JavaScript embed installed onto their site, and you have to change it? For example you may decide you need to start using a CDN, or you may need to switch CDNs, what do you do?

If you use a custom domain, it might be as simple as changing a setting. If you don’t you now have to ask every user to update their embed. In short, using your own domain gives you control.

How To Setup Your Domain

The first thing to decide is what domain you’d like to host your embed code at. At Eager we use the subdomain fast.eager.io, to signal to our users that this domain is being served from a CDN and is not going to slow down their site.

There are generally three steps to setting up your new domain:

1. Add the DNS record

Wherever your domain is registered, it’s likely you have a place to configure the domains ‘DNS’. DNS is the map between your domain and locations on the Internet. To setup a subdomain for your embed code, you will likely want to create a CNAME record pointing to your CDN. For example, we use Fastly, and our subdomain has a record like this:

fast.eager.io CNAME d.global-ssl.fastly.net

If you use the Amazon CloudFront CDN, each distribution will have its own address, so a DNS record might look like this:

fast.eager.io CNAME d111111abcdef8.cloudfront.net

2. Let your CDN know the subdomain

So that traffic can be delivered properly, it’s important that your CDN knows what domain you intend on using.

If you’re using CloudFront your distribution will have a field called “Alternate Domain Names (CNAMEs)”. Add your new subdomain to that field and wait the twenty or so minutes for things to update.

With Fastly it’s important to provide them with the domain you are using in your distribution configuration.

3. Setup SSL

You almost certainly want your new embed code to support SSL, as that’s the only way for websites which are served with SSL to use it reliably. Fortunately it’s easier (and cheaper) than ever to setup SSL.

If you’re using Cloudfront, it’s as simple as clicking the “Request ACM Certificate” button in the SSL section of the distribution config. Provide them with the domain you are using, and they will give you a free SSL certificate. (If you happen to use Stout, our static deploy tool, this is done for you).

If you’re using Fastly, you have some options, but it will likely cost some money. You can read about the options here, but expect it to cost at least $100/mn.

Testing

You should have no trouble testing your new subdomain to make sure it works properly (both with SSL and without). When everything looks good to go, you can start including it in the embeds you provide to your users.


As always, if this is not something you want to handle on your own, Eager can take care of much of this for you. Feel free to reach out for more details.

Like this post? Share it with your followers.

Sign up to get our next post delivered to your inbox.

Follow us to get our latest updates.