DEV Community: Paul McGann

Configuring Optimizely Azure Blob Storage

Paul McGann — Tue, 25 Apr 2023 00:07:46 +0000

Working in web development you are more than likely will come across a conversation at some point around image optimization.

In the world of Optimizely, there are a number of tools / libraries to help with image optimization some of these include:

Cloudflare - Used when working within the Optimizely DXP, has great built in features for automatically optimizing images.
Responsive images using imageresizer, for the older .net framework versions of Optimizely. Requires a bit more effort however the output can make a real difference to the sites performance.
Responsive images CMS 12 using picturerenderer

All these solutions help with image optimization, however none of these will work if we have configured our blob storage setup incorrectly.

In the post I will focus on the last point Optimizely CMS 12 and configuring azure blobstorage provider.

The first thing you need to do it add a connectionstring to your appsettings.json file:

"EPiServerAzureBlobs": "DefaultEndpointsProtocol=https;AccountName=your_account_name;AccountKey=your_account_key;"

Next in the your Startup.cs or where your configure services, you can now configure the azure blobstorage:

services.AddAzureBlobProvider(o =>
        {
            o.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
            o.ContainerName = "your_mediafolder";
        });

This is the basic steps needed to configure the azure blobstorage. However we also should configure some image optimization.

There are a number of discussions around the web on how best to perform this and it is still in discussion as we read. One approach that is being used in the Optimizely world, is to use the follow package Baaijte.Optimizely.ImageSharp.Web, this builds upon the SixLabors.ImageSharp library already present in the Optimizely system.

To configure the Baaijte.Optimizely.ImageSharp.Web library perform the following:

Add the following to the configure service in your Startup.cs, as early as possible in the configuration.

services.AddImageSharp()
            .Configure<AzureBlobStorageCacheOptions>(options =>
            {
                options.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
                options.ContainerName = "your_mediafolder";
            })
            .ClearProviders()
            .AddProvider<BlobImageProvider>()
            .SetCache<AzureBlobStorageCache>();

Note as part of this you will also need to install the 'SixLabors.ImageSharp.Web.Providers.Azure' package also.

Next you will need to configure the app by adding the following:

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseBaaijteOptimizelyImageSharp();
}

With all the configuration in place now you should now be able to render images from azure blobstorage and also be able to resize them appropriately.

Thanks for reading! Please feel free to comment and share your thoughts.

Optimizely Docker Development Images

Paul McGann — Mon, 24 Apr 2023 13:37:59 +0000

Problem

Since I have being developing I have always used a local sql server instance to create and restore databases for development. Having a local instance is great as you have full control over the sql server.

This leads to some issues when it comes to development however these being:

We have a full sql server on our development machines, if your not familiar with sql server and configuration you might give it too much power and it will use up all the resources on your machine.
Restoring large databases can take some time. On a project I work on regularly I tend to need to setup and restore a database if switching branches, etc. This process each time I restore takes anywhere from 5-10 mins, do this 4-6 times a day and you are losing 20-60 mins a day.

The issue I was having is that the scripts I was running required me to have specific database names and every time this ran it would delete and re-create the database.

Solution

What I would like is the ability to easily setup a new instance depending upon the branch I am working upon and easily discard when done.

This lead me to investigate using docker to create an image of the server and then depending on how I wished to use it, I could spin up a new server almost instantly.

The steps I needed to perform in order to achieve this are as follows:

Create a base container of the sql server.
Connect to the server and restore the database.
Create an image from this container.

Creating a base container

There are lost out tutorials out there that will help with getting the base container setup. To create a pretty standard sql server instance you can run the following (Please note to change the password):

docker run -e "ACCEPT_EULA=Y" -e "MSSQL_SA_PASSWORD=Password123" --name "mssql-server" -p 1433:1433 -d mcr.microsoft.com/mssql/server:2019-latest

This docker command will create a base container using the sql server image from docker hub and configure the sa password. It will also set the sql server port to 1433.

The command can take some time to run the first time as it needs to download the image before running the container.

Connecting to the sever and restoring the database

Once it completes you should have a sql server container up and running in docker. You can try connecting to the server on 'localhost' with the sa password details.

NOTE: If you already have a sql server instance running on your development machine you will first need to stop the instance to use 'localhost'. Open 'services' and stop the 'sql server'.

Once connected you can restore a bacpac to the server.

Create and image from the container.

Having followed the above you should now have a sql server instance running in a docker container with your databases configured.

As you can see if we where to even do this each time we wanted a new instance it would take some time.

To solve this we can capture an image of the container and tag it so that we can reuse the image as many times as we wish.

To create an image of the container run

docker commit new-container new-image:latest

To run a new instance we can now run

docker run --name "new-server" -p 1433:1433 -d new-image:latest

Hopefully we now have 2 instances running of the same sql instance.

You will need to stop 1 of the containers to connect using localhost. You can introduce a network and assign a specific ip address to the container if you wish to run multiple container at once. As I am working on a branch at a time usually this was not a requirement.

This has helped me with improving my development process. However I also see this being useful for creating demo environments.

Optimizely comes with the built in command you can run which is 'Initialize-EPiDatabase' you can use this to setup a fresh Optimizely database and then run 'Update-EPiDatabase' to ensure it is up-to-date.

Next steps could also be setup up a private container registry using azure container registry and then sharing you images with your team so they too can benefit from your images, or maybe even they could implement a 1 click deploy to setup a demo / training site to use with customers.

Hopefully this has shown you how easy it is to get started using docker containers in development.

If you have any recommendations for improvement please drop a comment below, I am just dipping my toes in the water so any info people can provide it much appreciated.

Optimizely HttpErrors

Paul McGann — Wed, 24 Aug 2022 16:48:00 +0000

I was recently investigating an issue reported by our team during development that they were unable to create certain blocks in our environments.

This reminded me of a Optimizely support article '409 conflict Creating page/block'

The suggestions listed on the site suggested to completely stop using the existingResponse="Replace" attribute upon HttpErrors section and use an alternative method.

Rather then implement this I decide to handle the HttpErrors differently only upon the scenario where we needed to.

To do this I decided to use the web.config location element to specify for a location e.g. 'episerver/cms' how I would like to handle the HttpErrors using snippet below.

<location path="episerver/cms"> <system.webServer> <httpErrors errorMode="Custom" existingResponse="PassThrough" /> </system.webServer> </location>

Now on the front-end of the site we can use HttpErrors as we wish, and within the admin we can handle this differently and receive back the original HTTP response.

Optimizely DXP Image Optimization

Paul McGann — Tue, 16 Nov 2021 21:04:51 +0000

Optimizely DXP is a cloud-first approach to customer engagement including high availability and performance, easy connectivity with other cloud services and existing systems, ability to manage spikes in customer demand, and a platform that is ready to seamlessly adopt the latest technology updates.

Optimizely DXP also includes a Content Delivery Network provided by Cloudflare for performance and security optimization.

I want to focus upon the optimization side of Cloudflare, more specifically image optimization.

Cloudflare has 3 products to help with image optimization, Cloudflare Image, Cloudflare Image Resizing, Cloudflare Polish. For the purpose of this post I will focus on Cloudflare Polish as this is enabled by default in Optimizely DXP, you can read more about the other products here.

Cloudflare polish automatically optimizes images upon your site whenever is is fetched from you site.

Whenever you make the first request to retrieve and image you will notice within the headers the 'cf-cache-status' will be set to 'MISS'. Cloudflare is telling us it tried to retrieve the image from cache, however it did not find it and so requested it from the origin.

If you were to wait a few seconds and refresh the image you will notice that the 'cf-cache-status' is now 'HIT'.

To confirm that Polish has been applied we can check the 'cf-bgj' header returns the image quality setting 'imgq'. We can also check the 'cf-polished' header to confirm Polish status and returns the image quality setting (qual) and original size (origSize).

The above headers can confirm that polish is working working, however we can do better and ensure that images are being served in next generation format. To do this we can review the 'content-type' header and ensure this is returning 'image/webp', comparing this to the 'cf-polished' original format (origFmt) we can see the original format of the image was png and has been converted to webp.

While Cloudflare Polish automatically optimizes images, it will only optimize the image if the webp image is smaller than the original image.

If we review the below 'cf-polished' header below. We can see the status is set to 'webp_bigger' this is informing us that the image optimization on this image would provide no benefit.

Hopefully someone else finds this information useful. If you have any questions please drop a comment below.

Working with Optimizely Projects

Paul McGann — Fri, 05 Nov 2021 11:38:32 +0000

Optimizely has a featured called 'Projects', which allows editors to collaborate on content before scheduling to publish.

Problem

While work on a project that imports hundreds, of pieces of content. These pieces of content are added to a project for the team to review and mark the items as ready to publish.

You can see the problem here in that with hundreds of pieces of content to review, marking each content piece as ready to publish could take some time.

Solution

To over come the problem we decided to create a scheduled job that would loop over all items in a project and mark them as ready to publish.

To retrieve the projects and their project items we can get an instance of the 'ProjectRepository' into our scheduled job.

Once we have the project and its items we can then loop over the project items and use the 'IContentChangeManager' interface to update the status of the content items.

var projects = _projectRepository.List();

foreach (var project in projects)
{
    var projectItemIds = _projectRepository.ListItems(project.ID).Select(x => x.ID);

    foreach (int projectItemId in projectItemIds)
    {
        ProjectItem projectItem = GetProjectItem(projectItemId);
        if (projectItem != null)
        {
        CommitResult commitResult = _contentChangeManager.Commit(projectItem.ContentLink, SaveAction.CheckIn);
        }
    }
}

public ProjectItem GetProjectItem(int projectItemId) => _projectRepository.GetItem(projectItemId);

I just wanted to share this piece of code with anyone who was trying to achieve something similiar.

Translate Categories in Episerver using DbLocalizationProvider

Paul McGann — Thu, 21 Jan 2021 20:52:53 +0000

While doing some investigation into localization with Episerver I came across a useful library that helps content editors easily translate resources that are normally stored in xml, by storing them within a database.

One of the areas that I investigated was translating the built in categories within Episerver. This is possible to do using a strongly-typed category definition.

[LocalizedCategory]
public class SampleCategory : Category
{
    public SampleCategory()
    {
        Name = "This is sample cat. from code";
    }
}

This may be suitable in some cases, however in some scenarios where the categories already exist this may not be the best course of action.

The DbLocalizationProvider has a way to manually create resources. Using this I set about creating a resource manually for each category.

Each resource needs a unique resource key, the translation /value and the language the translation is for.

In order to create each resource I used a stored procedure that would iterate over the categories and build out a unique resource key, whilst assigning the value and language.

using DbLocalizationProvider.Sync;
using EPiServer.DataAbstraction;
using EPiServer.PlugIn;
using EPiServer.Scheduler;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;

namespace LangTransaltion.Business.Localization
{
    [ScheduledPlugIn(DisplayName = "Category Localization Scheduled Job")]
    public class CategoryLocalizationScheduledJob : ScheduledJobBase
    {
        private readonly CategoryRepository _categoryRepository;
        private readonly ISynchronizer _synchronizer;

        private bool _stopSignaled;
        private int _categoryCounterTotal = 0;
        private IList<ManualResource> _allCategories;

        public CategoryLocalizationScheduledJob(CategoryRepository categoryRepository, ISynchronizer synchronizer)
        {
            IsStoppable = true;
            _categoryRepository = categoryRepository;
            _synchronizer = synchronizer;
        }

        /// <summary>
        /// Called when a user clicks on Stop for a manually started job, or when ASP.NET shuts down.
        /// </summary>
        public override void Stop()
        {
            _stopSignaled = true;
        }

        /// <summary>
        /// Called when a scheduled job executes
        /// </summary>
        /// <returns>A status message to be stored in the database log and visible from admin mode</returns>
        public override string Execute()
        {
            OnStatusChanged($"Starting execution of {this.GetType()}");

            _allCategories = new List<ManualResource>();

            var root = _categoryRepository.GetRoot();

            IterateCategories(root, $"Categories.{root.Name}");

            _synchronizer.RegisterManually(_allCategories);

            return $"{_categoryCounterTotal} categories checked";
        }

        /// <summary>
        /// Iterates over categories build a unique key
        /// </summary>
        /// <param name="currentParent"></param>
        /// <param name="path"></param>
        private void IterateCategories(Category currentParent, string path)
        {
            var categories = currentParent.Categories.ToList();

            foreach (var category in categories)
            {
                if (_stopSignaled) break;

                _categoryCounterTotal++;

                OnStatusChanged($"Working on category {category.Name}, child of: {currentParent.Name}");

                _allCategories.Add(new ManualResource($"{path}.{category.Name}", $"{category.Description}", new CultureInfo("en")));

                IterateCategories(category, $"{path}.{category.Name}");
            }
        }
    }
}

After running the scheduled job the new resources will be added to the database.

The final piece of the puzzle was to retrieve the resource key whenever we use the category on the site. In order to do this I created an extension method to return the resource key based on the current category.


using EPiServer.DataAbstraction;
using System.Collections.Generic;

namespace LangTransaltion.Helpers
{
    public static class CategoryHelper
    {
        /// <summary>
        /// Gets the category resource key.
        /// </summary>
        /// <param name="category"></param>
        /// <returns></returns>
        public static string GetResourceKey(this Category category)
        {
            var categoryList = new List<string>();

            GetParentCategories(category, categoryList);

            categoryList.Reverse();

            var resourceKey = $"Categories.{string.Join(".", categoryList)}";

            return resourceKey;
        }

        /// <summary>
        /// Gets the parent categories, starting a from a root category.
        /// </summary>
        /// <param name="currentCategory"></param>
        /// <param name="categoryList"></param>
        private static void GetParentCategories(Category currentCategory, List<string> categoryList)
        {
            categoryList.Add(currentCategory.Name);

            if (currentCategory.Parent != null)
            {
                var parent = currentCategory.Parent;

                GetParentCategories(parent, categoryList);
            }

        }
    }
}

Now when you are using a category and wish to retrieve the translation you can simply use

...
DbLocalizationProvider.LocalizationProvider.Current.GetString(category.GetResourceKey())
...

I would like to thank the Valdis Iljuconoks for helping me out and answering some questions I had along the way.