With Umbraco development, I get a great sense of long-term confidence once I find a good-fit solution for tackling a recurring problem. It’s an empowering feeling, and probably the biggest reason I love this CMS! This really stands true across various parts of site development, and is indeed often driven by intelligent upgrades made to the Umbraco Core over time. I'm always delighted by the new versions.
Sometimes though, that confidence factor can come from an awesome open source Umbraco package. The community, and the effort put into Umbraco packages are simply stellar. It's really hard to imagine what it would be like without these smart people solving huge problems and sharing their solutions with others making Umbraco sites.
Still, we can't ignore the great commitment Microsoft makes to its tooling around .NET and to some extent the Azure cloud. In concert with the efforts of HQ and the community, I think Microsoft's backing shows it's quite alright to gain the type of confidence I'm talking about in development. This whole combination is awesome.
Still, we can't ignore the great commitment Microsoft makes to its tooling around .NET and to some extent the Azure cloud.
I want to discuss a recent example where, because of this combination of efforts, my confidence was reaffirmed. It takes place within a critical component of site development: the media folder.
From here, I'll walk through two key parts of the solution and hope that you might give it a shot and see how it feels. I remember when we found the first part of this go-to solution for media, and I consider it to be a big milestone for our dev team’s productivity and effectiveness. Here’s why:
Media is Just a Different Animal
With Umbraco, we have such a brilliant database model at our disposal for knowing what image we're assigning to an editor, where that image exists, and (for the most part) a nice way of including images in our Razor templates. There are some hang-ups but mostly due to file system itself. The default static ‘media’ folder in Umbraco, just doesn’t scale well across different Umbraco site instances. In our case we really do have to worry about whether our content & design teams are on a given dev environment with a (hopefully) up-to-date static media folder. Depending on what stage the project is in or how complex the site solution is, this can be a nightmare. Luckily, we became aware of a sweet solution, that for us, takes all the worry away.
We Use this Package for Umbraco Media
The UmbracoFileSystemProviders.Azure Umbraco Package is simply amazing. Authored by James Jackson-South, Dirk Seefeld, Lars-Erik Aabech, and Jeavon Leopold, this thing has truly been a lifesaver for us. This package makes Umbraco media function a lot like other cloud based services by abstracting the file system used by media to an Azure storage bucket. This is to say that it sort of tricks the Umbraco site into using a cloud-based media folder rather than the local file system folder. I'm probably oversimplifying the tech, but there are plenty of better sources if you really want to learn about the underlying IFileSystem abstraction.
The important part for us was that, with this package, all the Umbraco site instances with the same configuration would each have access to the same media files. This means no more moving files and folders between instances to prevent the problem of missing images on a particular site instance. It just works!
It just works!
The Azure storage account setup process is very straightforward. Once you have that set up, the package is super simple to configure in Umbraco. You'll need to remember to grab the storage account details (name and keys) and place these in the appropriate fields within the setup of the package. For in depth tutorial on this process, there is a video linked within the details of the package page.
While it may be different depending on your scale, the storage cost for us is extremely nominal. It depends on your situation, but I would bet this solution scales to be much cheaper than the alternative of paying for more disk space on your cloud server.
From a developer perspective, we can now consider images as synced and remove that concern from our web project's version control.
I also understand if you're new to Azure, this whole setup might seem like an extra hassle. But the time it takes has always been minimal and more than worth it for us. We really have found huge value in having our media files (mainly images) synced between local, dev and production environments.
From a developer perspective, we can now consider images as synced and remove that concern from our web project's version control. That may not work for you, but it does for us. To us, this is all about using the right tool for the job, and having the proper assets stored, controlled, and served from the right place as we go.
Exploring an Edge Case
So let's say you agree, and you too love this idea of using Azure storage and the UmbracoFileSystemProviders.Azure package. Great!
There can be bumps in the road, like this one that I hit a few weeks back.
What do you do when you want to start syncing media on an existing site?
This problem is not so much with the media records associated with Umbraco content, but more about making sure the physical files actually exist in the Azure storage bucket once you do have the package installed across instances.
There is another issue.
How do we get a ton of images into the bucket when Azure only allows adding, deleting, or replacing a file at a time within the portal?
Bummer.
I recently scratched my head at this very problem. I eventually decided I would install the package, update all non-production instances with this install reflected, and see where it took me.
It turns out, everything was fine from a data perspective (as expected), only now that the sites were 'looking' for files in the cloud storage bucket, no images were showing in media editors. I really did not want to take on the tedious task of adding media via the Azure portal — so I looked for a better way.
Support of Great Tooling
It turns out that the Azure team provides a command line interface that allows for a programmatic transfer of assets. They call this AzCopy.
Click here for the latest AzCopy download listed at the beginning of the Azure docs article that explains the broader capabilities of the tool.
Using the same keys referenced for the Umbraco package on install, you can send your images from a local static folder, probably on your dev machine, straight to the proper directory in your new storage account. As I sort of eluded to above, some basic command line use is required for this. In case you're not used to that, it's nice to get your commands formatted in a text editor.
It turns out that the Azure team provides a command line interface that allows for a programmatic transfer of assets. They call this AzCopy.
Mine looked something like this:
AzCopy /Source:C:\MyExampleSite\media /Dest:https://myaccount.blob.core.windows.net/media /DestKey:{key} /SWhen comparing this to the snippet under the Upload All Blobs in a Folder section of the docs, it's pretty similar. The only real difference is that I specify the path from the specific site's local 'media' folder path as well as the appropriately named 'media' directory within the storage bucket.
I did opt for keeping the /S option within this AzCopy command for recursive uploads. The article states, "Specifying option /S uploads the contents of the specified directory to Blob storage recursively, meaning that all subfolders and their files are uploaded as well." I definitely wanted this. With the way media is handled in the static folder, we need to make sure that the subfolders named by Umbraco Media Id would all come over as is; with their respective files in tact.
AzCopy has some other neat features in case you wanted to download as opposed to upload, upload just a single file, etc. The tool is powerful and worth checking out further if you need even more agility in cloud storage. With this single command though, I have already saved a ton of time and frustration. And, really, that's the point.
As a developer and digital strategist I really haven't worried about Umbraco media in years, and so it has been great to share this solution internally. To me this confidence is as important to our team as the productivity gain it stems from.
Media with Confidence
Now, we can have any developer launch a site and confidently know that cloud stored media can be handled now or later - whenever it is most convenient given the client, team, and project constraints. Or even better, the process of transitioning existing sites to UmbracoFileSystemProviders.Azure + Azure storage is much, much easier and more straightforward. Importantly, with AzCopy, we always have that extra peace of mind knowing it won't be a huge ordeal to get to our preferred media architecture.
As a developer and digital strategist I really haven't worried about Umbraco media in years, and so it has been great to share this solution internally. To me this confidence is as important to our team as the productivity gain it stems from. We found our stride and it works for. With any luck, this solution may be able to help you too.