Sitecore Content Hub DAM - Moving External Components to Azure: A Recipe for Simplified Deployments

on


Welcome to the "Restaurant of Mistaken Orders" blog, where we serve up tech tips with a side of humor! Today, we're diving into a deliciously simple way to manage your external React components by moving them to Azure Storage. This will make your deployments as smooth as a perfectly cooked soufflé. So, grab your chef's hat, and let's get cooking!

Why Move to Azure?

Currently, we store our external component (React) code as portal components in Sitecore Content Hub DAM. Every time we have a release, we need to upload new versions to the portal assets and generate new public links. This process is as tedious as peeling a hundred potatoes by hand. To make deployments easier, we're moving our external component files to Azure. By having one SAS profile for all files in the container, we only need to upload new files to Azure during the release. A script will trigger changes, updating the public link in Content Hub with a caching parameter, not the complete URL. Voilà, deployment made easy!

Step-by-Step Guide to Azure Storage

1. Uploading Your .js.gz and .css.gz Files

First, let's upload our gzipped JavaScript and CSS files to Azure Storage.


For JavaScript Files:

  1. Upload the .js.gz File:
    • Upload your gzipped JavaScript file to the content-hub-external-components container in Azure Storage.
  2. Set Properties:
    • Open the file in Azure Storage Explorer or the Azure Portal.
    • Set the Content-Type to application/javascript.
    • Set the Content-Encoding to gzip.

For CSS Files:

  1. Upload the .css.gz File:
    • Upload your gzipped CSS file to the content-hub-external-components container in Azure Storage.
  2. Set Properties:
    • Open the file in Azure Storage Explorer or the Azure Portal.
    • Set the Content-Type to text/css.
    • Set the Content-Encoding to gzip.

This ensures that browsers correctly interpret the files as gzipped and decompress them accordingly.

Creating a Stored Access Policy

Now, let's create a Stored Access Policy to simplify access management.

  1. Log in to the Azure Portal:
    • Navigate to your Storage Account.
  2. Locate the Container:
    • Find the content-hub-external-components container.
  3. Create the Access Policy:
    • In the container's menu, select "Access policy" or "Shared access signature".
    • Click on "Add policy" to create a new Stored Access Policy.
    • Name the policy (e.g., external-components-policy).
    • Set the permissions to "Read".
    • Set the start and expiration dates/times (e.g., 4 years from now).
    • Click "Save" to create the policy.

Generating the Container SAS URL

  1. Generate the SAS URL:
    • Right-click on the container and select "Get Shared Access Signature".
    • In the dialog, select the Stored Access Policy you created.
    • Ensure the "Allowed resource types" is set to "Container".
    • Copy the generated "Blob SAS URL".

The SAS URL will look something like this:


https://<storage-account-name>.blob.core.windows.net/<container-name>?si=<policy-name>&spr=https&sv=<version>&sr=c&sig=<signature>

Accessing Files Using the Container SAS URL

To access a specific file within the container, append the file name to the URL path. For example, to access script.js.gz:


https://<storage-account-name>.blob.core.windows.net/<container-name>/script.js.gz?si=<policy-name>&spr=https&sv=<version>&sr=c&sig=<signature>


This URL allows you to upload, download, or access the file based on the permissions defined in the Stored Access Policy.


Why This Approach Rocks

By using a Stored Access Policy at the container level, you don't need to generate and manage individual SAS URLs for each file. The container-level SAS URL, combined with the file name, provides access to any file within the container. This simplifies access management and reduces the overhead of generating and maintaining SAS URLs for individual files, especially when you have a large number of files.


Wrapping Up

And there you have it! By moving your external component files to Azure and using a Stored Access Policy, you can streamline your deployment process and make it as easy as pie. No more generating new public links for each release—just upload your files, and let the script handle the rest. Bon appétit!


Stay tuned for more tech recipes from the "Restaurant of Mistaken Orders" blog. Until next time, happy coding!

Location: Berlin, Germany

Comments

Post a Comment