EPiServer – Disable CloudFlare in DXC Enviroments
When you are working with EPiServer in a DXC environment sometimes you can have issues with CloudFlare and its aggressive cache. This can cause problems with css and js files because the client will not receive the latest version of the files unless they clean their cache in the browser.
So for this post, we are going to create a property in a settings page which will allow to disable or enable dynamically cloudflare using a hack in the root template.
So, lets begin !!!!
First, we will create the base class for pages and the settings page which will also act as the start/home page.
namespace Data.Models.Page
{
[ContentType(GUID = "98448299-51bd-45a9-8d68-7dcdfee0a031", AvailableInEditMode = false)]
public class SitePage : PageData
{
}
}
namespace Data.Models.Page
{
[ContentType(GUID = "98448299-51bd-45a9-8d68-7dcdfee0a030")]
public class StartPage : SitePage
{
[Display(GroupName = "Settings", Order = 1000)]
public virtual bool DisableCloudflare { get; set; }
}
}
And a helper to get the start page using the content service static class
namespace Business.Helpers
{
public static class ContentService
{
private static readonly Injected ContentRepository;
public static T GetPage<T>(ContentReference reference) where T : PageData
{
if (reference == null) return null;
return ContentRepository.Service.TryGet(reference, out T content) ? content : null;
}
public static StartPage GetStartPage()
{
return GetPage(ContentReference.StartPage);
}
}
}
Finally, we will add the code to control if we want cloudflare to return the latest version or the cached version inside the root cshtml layout file which will be the default template for all pages in the site.
@using Business.Helpers
@using EPiServer.Framework.Web.Mvc.Html
@using EPiServer.Web.Mvc.Html
@model Data.Models.Page.SitePage
<!DOCTYPE html>
@{
var settings = ContentService.GetStartPage();
var cloudflareCacheWorkaround = settings != null ? settings.DisableCloudflare ? "?v=" + new DateTimeOffset(DateTime.UtcNow).ToUnixTimeSeconds() : string.Empty : string.Empty;
}
<html>
<head>
<link rel=stylesheet href="@("/css/style.min.css" + cloudflareCacheWorkaround)" />
@Html.RequiredClientResources("Header")
</head>
<body>
@Html.FullRefreshPropertiesMetaData()
<main id="site-shell" role="main">
@RenderBody()
</main>
<script type="text/javascript" src="@("/js/prod.min.js" + cloudflareCacheWorkaround)"></script>
@Html.RequiredClientResources("Footer")
</body>
</html>
And that is all. Now, if you want to allow the clients to get the latest version of your css or js files you can set the property in the settings page to true, and if you want to return to the default behavior, just set it to false. I hope it will help someone and as always keep learning !!!
Leave a Reply