Set up a Custom Assets Domain Using Microsoft Azure

With this setup, requests to your custom domain will be forwarded to Storyblok’s origin servers, ensuring seamless asset delivery while using your branded domain.

Prerequisites

You will need:

• An Azure account with appropriate permissions to Front Door and CDN profiles.
• A domain name that you own and control.

Create a Front Door and CDN profile

Create a new Front Door and CDN profile and add an origin with the following settings:

• Origin type: Custom
• Origin host name: a.storyblok.com

Add your custom domain

After the profile has been created and and its status is active, change the DNS settings of your domain pointing it to YOURID.azurefd.net.

In the Settings section of the Front Door profile, open Domains. Add a new domain and make sure to follow the validation procedure that involves creating a TXT entry inside the DNS settings of your domain. After a few seconds, it should be approved.

Forward the accept header

Since the image service is using the accept header to determine if the client supports the webp format, you need to forward that header to the origin.

Front Door, by default, is forwarding such header to the origin, so there’s no configuration needed for this. It’s important to be aware of this feature and make sure not to interfere with it by stopping forwarding the accept header.

Restrict access to a single space (optional)

The Front Door and CDN profile will be able to deliver assets from any space. In case you want to restrict the distribution to a specific space you can do so by filling out the Origin Path field in the settings of the Origin Group with the value /f/YOURSPACEID.

Replace the domain in your application

Create a helper that replaces the default domain of an image field URL with your new custom domain, for example:

function transformImageSrc(src) {
    const url = new URL(src);
    if (url.hostname === "a.storyblok.com") {
        url.hostname = "assets.yourdomain.com";
    }
    return url.href;
}

Further resources

• Microsoft Azure Documentation
• Storyblok Documentation