Set up a Custom Assets Domain Using Microsoft Azure
Storyblok is the first headless CMS that works for developers & marketers alike.
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;
}