Cloudflare CDN configuration

Cloudflare image resizing is the recommended solution for Optimizely DXP environments.

Cloudflare support requires adding the AdaptiveImages.Cloudflare NuGet package.

Note for DXP users: As of November 2023, Cloudflare image resizing is in beta in Optimizely DXP. Apply here to have it added to your DXP environment before enabling Cloudflare rendering.

To enable Cloudflare rendering, add something like the following to you Startup class:

using AdaptiveImages.Cloudflare;
using AdaptiveImages.Initialization;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCms()
                .AddAdaptiveImages()
                .AddCloudflare();
    }
}

Disable during local development

To eliminate the need for a reverse proxy (see CDN optimization and delivery), you may choose to only enable the CDN for non-development environments:

using AdaptiveImages.Cloudflare;
using AdaptiveImages.Initialization;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

public class Startup
{
    private readonly IWebHostEnvironment _webHostingEnvironment;

    public Startup(IWebHostEnvironment webHostingEnvironment)
    {
        _webHostingEnvironment = webHostingEnvironment;
    }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCms()
                .AddAdaptiveImages();

        if (!_webHostingEnvironment.IsDevelopment())
        {
            services.AddCloudflare();
        }
    }
}

Render with Cloudflare locally

If needed, you can use Cloudflare rendering locally by piggybacking on an environment where Cloudflare image resizing is enabled:

using AdaptiveImages.Cloudflare;
using AdaptiveImages.Initialization;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCms()
                .AddAdaptiveImages()
                .AddCloudflare(new CloudflareSettings
                {
                    SiteHostname = "integration.dxp.uri", // Environment where Cloudflare image resizing is enabled
                    ImagesHostname = "my-localhost.ngrok.io" // Hostname where your local environment is accessible over the internet
                });
    }
}

If you leave out the ImagesHostname property, Cloudflare will use SiteHostname to load images. This assumes all original images, for example images uploaded to the CMS, are available through that environment. If you have images (or image providers) that are only available locally, you need to specify ImagesHostname to allow Cloudflare to pull the original images from your machine. This in turn requires your local environment to have a publicly accessible host name, for example through a proxy tunnel. See CDN optimization and delivery for details.