Blog posts by Stephan Lonntorp2018-11-27T21:54:42.0000000Zhttps://world.optimizely.com/blogs/stephan-lonntorp/Optimizely WorldSetting up Continuous Integration with Azure DevOps and Episerver DXC Service<p>Just so you know, this is going to be a really long post. I wish I could tell you it's as simple as one, two, three, but it isn't, and there are quite a few steps to go through. This is one way to do it, but I'm sure there are other people out there that know how to do it better, or at least differently. Some things outlined in this post is how <em>we</em> do things, and can serve as inspiration, or flame bait, depending on how you choose to view the world.</p>
<h3>What, How, and Why?</h3>
<p>Azure DevOps, the artist formerly known as Visual Studio Team Services, is a suite of tools for teams that can be used for managing the entire lifecycle of software projects. It is a fully fledged project management platform, containing functionality for VCS, issue tracking, wiki, dashboards, build- and deploy pipelines, and whatever else teams might need. There are of course alternatives, but I like it because it is cloud hosted, simple to set up, and most importantly, free for small teams. Incidentally, it is also the platform that Episerver uses under the hood for facilitating deploys in their DXC Service Platform.</p>
<p>Free you say? Well, it's free for small teams of up to 5 users, and you get 1800 minutes per month of CI/CD. Today, it's not uncommon for partner companies to have large installations of build servers and deployment facilitators, used for all their clients. Modern development processes often rely on the build and deployment as an integral part of the workflow, but these systems are often considered internal, and not covered by any SLA with the respective clients. This might not be the case for you, and it might not be a problem, but again, it might. I'll leave that up to you and your organization to decide.</p>
<p>Continuous Integration is the practice of constantly building and integrating changes made to a piece of software, and paired with Continuous Deployment, means that those changes are deployed to an environment (not neccessarily a production environment). This constant building and deplying is often referred to as Continuous Delivery. Tomato, tomato. What we're trying to achieve is a constant flow of well tested software, being delivered in a timely fashion, making it easy to push changes, and fixes, quickly. If you want to play with the big boys, break things and move fast like a true httpster, this is a practice you'll need to adopt.</p>
<p>We use CI/CD because it helps us sleep at night, and we move the responsibility of delivery to a separate system, instead of relying on a single developer's computer, like using Visual Studio's Publish feature.</p>
<h3>So, what do we need to get started?</h3>
<p>This guide assumes that you have an active DXC Service subscription, and that you have requested a Tenant ID from Episerver support, so that you can connect your Azure DevOps to that subscription's Integration environment. While you're requesting that Tenant ID, also ask for your SendGrid credentials, as those will come in handy later on.</p>
<p>Go and <a href="https://azure.microsoft.com/en-us/services/devops/">sign up for Azure DevOps</a> and create your project. Then it's time to set up your build process. This is going to get rather long, so strap in.</p>
<p><em><strong>Project preparations</strong></em></p>
<p>In order for Azure DevOps to do things with out project, that Visual Studio shouldn't do in our local development environment, we'll need to add a few lines to our csproj file. You can put them near the end of the file.</p>
<pre class="language-markup"><code> <ItemGroup>
<None Include="AzureDevOps.targets" />
</ItemGroup>
<Import Project="AzureDevOps.targets" Condition="Exists('AzureDevOps.targets')" /></code></pre>
<p>Then create the following file as AzureDevOps.targets in the root of your project. Note: We're building our prototype as a separate process, as you'll see later on, some of the steps in the .targets file won't apply to you, but then again, they might inspire you to do things differently.</p>
<pre class="language-markup"><code><Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Target Name="MaintenancePage" AfterTargets="PipelineCopyAllFilesToOneFolderForMsdeploy">
<Copy SourceFiles="..\ui\dist\maintenance.html" DestinationFiles="$(_PackageTempDir)\maintenancepage.htm" />
</Target>
<Target Name="MaintenanceToAppOffline" AfterTargets="MaintenancePage">
<Copy SourceFiles="$(_PackageTempDir)\maintenancepage.htm" DestinationFiles="$(_PackageTempDir)\App_Offline.htm" />
</Target>
<Target Name="AssetFilesForPackage" AfterTargets="PipelineCopyAllFilesToOneFolderForMsdeploy">
<ItemGroup>
<Files Include="..\ui\public\**\*.*" Exclude="..\ui\public\mock\**\*.*;..\ui\public\*.htm*" />
</ItemGroup>
<Copy SourceFiles="@(Files)" DestinationFolder="$(_PackageTempDir)\Assets\%(RecursiveDir)" />
</Target>
</Project></code></pre>
<p>The key here is the "PipelineCopyAllFilesToOneFolderForMsdeploy" task that is only performed by Azure DevOps, and not locally. What these tasks do, is copy some build output from a few directories to certain files. In our project we use a separate process for frontend assets, and the build output from tha tprocess is then copied into the deployment package. The specifics aren't that important, as I'm sure your process is different and you'll have to either remove or adapt these steps to suit your needs. But I think you get the gist of it.</p>
<p>If you don't like to include separate files, you can paste the contents of the .targets file directly into the csproj file, and that'll work too.</p>
<p>Next, we'll need to add some transformations and parameters.</p>
<p>The file parameters.xml has a special meaning in Visual Studio and MS Build, as it becomes a SetParameters.xml file after build, that will fit nicely into the process. I'm no expert, but I'm sure there's some documentation around the feature that you can read up on if you'd like.</p>
<p>Add this to the parameters.xml file, in the root of the project, and set its type to "Content". We'll use it later on.</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<parameters>
<parameter name="Sendgrid.Username" description="The username used for Sendgrid authentication" defaultValue="#{Sendgrid.UserName}#" tags="">
<parameterEntry kind="XmlFile"
scope="obj\\Release\\Package\\PackageTmp\\Web\.config$"
match="/configuration/system.net/mailSettings/smtp/network/@userName" />
</parameter>
<parameter name="Sendgrid.Password" description="The password used for Sendgrid authentication" defaultValue="#{Sendgrid.Password}#" tags="">
<parameterEntry kind="XmlFile"
scope="obj\\Release\\Package\\PackageTmp\\Web\.config$"
match="/configuration/system.net/mailSettings/smtp/network/@password" />
</parameter>
</parameters></code></pre>
<p>As for config transforms, Episerver DXC Service will automatically transform Web.Preproduction.config and Web.Production.config, as those are the names of the environments, but since they don't control deployments into the integration environment, Web.Integration.config won't be automatically applied. But, we'll use that name anyway, since it will be a lot less confusing :)</p>
<p>When using Episerver DXC Service, config transforms should be considered as sequencial, meaing that any changes introduced in Web.Integration.config, should be considered as present when doing transforms with Web.Preproduction.config, and so forth into production. This can be a hassle to troubleshoot after the first deploy, but once you get it right, very few changes are probably needed, so it's not that big of a deal.</p>
<p>In my Web.config I have SMTP settings that uses a MailDrop folder for generated emails, but I'd like to change that in Integration, and add some more things not relevant for my local environment, like Azure blob storage and Azure events. Also, I'll remove my local Find configuration. (Remember, an extra index is included in the DXC Service subscription, but you gotta remember to ask for it!)</p>
<p>Web.config (snippet)</p>
<pre class="language-markup"><code> <system.net>
<mailSettings>
<smtp deliveryMethod="SpecifiedPickupDirectory">
<specifiedPickupDirectory pickupDirectoryLocation="C:\Projects\Client\src\Client.Web\App_Data\MailDrop" />
</smtp>
</mailSettings>
</system.net></code></pre>
<p>Web.Integration.config</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<episerver.find xdt:Transform="Remove" />
<episerver.framework>
<blob defaultProvider="AzureBlobs" xdt:Transform="Insert">
<providers>
<add name="AzureBlobs" type="EPiServer.Azure.Blobs.AzureBlobProvider, EPiServer.Azure" connectionStringName="EPiServerAzureBlobs" container="blobs" />
</providers>
</blob>
<event defaultProvider="AzureEvents" xdt:Transform="Insert">
<providers>
<add name="AzureEvents" type="EPiServer.Azure.Events.AzureEventProvider, EPiServer.Azure" connectionStringName="EPiServerAzureEvents" topic="events" />
</providers>
</event>
</episerver.framework>
<system.net>
<mailSettings>
<smtp xdt:Transform="Replace" from="no-reply+integration@client.com" deliveryMethod="Network">
<network host="smtp.sendgrid.net" port="587" userName="" password="" enableSsl="true" />
</smtp>
</mailSettings>
</system.net>
</configuration></code></pre>
<p>Web.Preproduction.config</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<system.net>
<mailSettings>
<smtp xdt:Transform="SetAttributes(from)" from="no-reply+preprod@client.com" />
</mailSettings>
</system.net>
<system.web>
<httpRuntime enableVersionHeader="false" xdt:Transform="SetAttributes(enableVersionHeader)" />
</system.web>
<system.webServer>
<security>
<requestFiltering removeServerHeader="true" xdt:Transform="SetAttributes(removeServerHeader)" />
</security>
</system.webServer>
</configuration></code></pre>
<p>OK, that should probably be enough. Next we'll set up the build process.</p>
<h3>Step one! We can have lots of fun!</h3>
<p>I think I used a guide for setting this up in the first place, but I've forgotten what that looked like. If you're using a guide, you can look at these screen shots as a reference.</p>
<p><img src="/link/da5664e4262148f8b06bea5f7dadddeb.aspx" /></p>
<p>This is the general outline of the build process. Since we're using a hosted VS2017 instance, no caching is done between builds, meaning that the tasks <em>npm install</em> and <em>nuget restore</em> will take some time, but if it's free, we can't afford to be that picky. Relax and enjoy your coworker's company for a few minutes.</p>
<p>For clarification, our project's directory structure looks something like this:</p>
<pre class="language-markup"><code><root>
- src
- Client.Web
- Client.Core
- <more projects>
- ui
- src
package.json
<a gazillion other frontend files I can never get my head around>
Client.Web.sln
nuget.config
</code></pre>
<p>This is what our nuget.config looks like</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<add key="NuGet.org" value="https://api.nuget.org/v3/index.json" />
<add key="Episerver" value="http://nuget.episerver.com/feed/packages.svc/" />
</packageSources>
</configuration></code></pre>
<p>Next, here's what those steps looks like. Pretty straight forward.</p>
<p><img src="/link/56f20ae9283a4c65a7673447018b2b7c.aspx" /></p>
<p><img src="/link/689ba917981a48109a09cd24406bb001.aspx" /></p>
<p><img src="/link/4f849f91bb5a4798aaccd38b2cc3b907.aspx" /></p>
<p>Here's a reference to the root directory for the UI project, ui/src, given that the build process runs from <root>.</p>
<p><img src="/link/3fa78f8408074d439a33678742ca3c0a.aspx" /></p>
<p>Again, specifying the root directory for the UI project, ui/src, and our specific run command that we've set up for doing things especially for when we run the ci build. That could be unit testing JavaScript, bundling, linting, minification and so on. Apparently, this week, <a href="https://webpack.js.org/">wepback</a> is what the kids use.</p>
<p><img src="/link/6eb11eb152134afc970d71ef3c643c6d.aspx" /></p>
<p>We might not need this, I honestly don't know :)</p>
<p><img src="/link/f9a52c9539f146888639c086b945d6dc.aspx" /></p>
<p>Specifying that src/nuget.config file.</p>
<p><img src="/link/d1cde623f5a64c0da85eed5ee907a87d.aspx" /></p>
<p>This is where all that stuff with the parameters.xml, and AzureDevops.targets comes into play. Instead of you having to visually decode those arguments, they're here: /p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactstagingdirectory)\\" /p:AutoParameterizationWebConfigConnectionStrings=false</p>
<p><img src="/link/b3ec67fb2122406599764472713cf303.aspx" /></p>
<p>As we all know, tests are totally optional. If you don't have any, or use a different tool than xUnit, do your thing. If you're not using MSTest (who is these days?) you will probalby need a runner, I'm using xunit.runner.visualstudio as a wrapper. It works for me (and not only on my machine!)</p>
<p><img src="/link/9d31ed6695df45e7b85acbad9efd5e93.aspx" /></p>
<p>This puts the output artifacts, named "drop", where we can get at it from our Release step.</p>
<p><img src="/link/6a5a8c283e574f1687dec31b43dcb81e.aspx" /></p>
<p>This is just what the variables for the build pipeline looks like, so you have something to compare yours too. I know how we all like to compare things.</p>
<p>On to the release, where we tie things together with the DXC Service, and all our hard work comes to fruition.</p>
<h3>Step two! There's so much we can do!</h3>
<p><img src="/link/bb820bf157ed41fbbaa28a99f45e11e1.aspx" /></p>
<p>This is our release, called Continuous Deployment, since it is triggered on every build from the develop branch. Essentially, that will deploy all our changes into the Integration environment in DXC Service. Doing this will require us to do all of our feature work in feature branches, and integrate changes with pull-requests, or live with the fact that things break. In my opinion, either way is fine. Things will break any way, having a process that enables us to fix those breaks fast, is better than living in constant fear of failing. Some people say "Go big, or go home", "Fail fast", and things like "Move fast and break things". I like it better when things don't break. So having this process in place enables me to fix things before anybode else notices, which is pretty close to not braking things at all. If a tree falls in the forest, and all that jazz.</p>
<p>I've named my environment "Integration", because, 1. it ties nicely into the whole DXC Service naming of things, and 2. it allows us to have automagic config transforms of Web.Integration.config.</p>
<p><img src="/link/6ca51b4f842243cd9e13fb97c44d0aa2.aspx" /></p>
<p>The whole deployment is made up of three steps, one of which is completely voluntary (and probably unnecessary), which is the last one, Annotate Release, which will log the release in Application Insights. The reason it is probably unnecessary, is because it will only annotate it in AI for the Integration environment. That environment is always so painfully slow, it will probably not give me any insights into performance changes in conjuction with the release. But enough ranting about that.</p>
<p><img src="/link/0c11650bbb4e40d58c217de9e80cf016.aspx" /></p>
<p><img src="/link/4b6cea3a1a794261a3f5e3c4a8ac6537.aspx" /></p>
<p>This is an important step, as it will replace tokens in the SetParameters.xml generated by the build, and later applied to Web.config, enabling us to keep our SMTP credentials away from source control, and safely stored as variables in the release. I'm using a custom step from the Marketplace, called <a href="https://github.com/qetza/vsts-replacetokens-task">Replace Tokens</a>, in the root directory "$(System.DefaultWorkingDirectory)/$(Build.DefinitionName)/drop" for the target files of "*.SetParameters.xml".</p>
<p><img src="/link/9a7a49ffb46b409388a8821bcdad5a7d.aspx" /></p>
<p>This is where that Tenant ID will come in handy. Using it you can connect Azure DevOps to your DXC Service Azure Subscription, and by specifying the folder "$(System.DefaultWorkingDirectory)/$(Build.DefinitionName)/drop/*.zip" files will be picked up correctly. It's hard of fitting everything in a screenshot, so here's the rest:</p>
<p>Under "File Transforms & Variable Substitution Options" select "XML transformation" and "XML variable substitution".</p>
<p>Under "Additional Deployment Options" select "Take App Offline", "Publish using Web Deploy", "Remove additional files at destination", and "Exclude files from the App_Data folder". In the text box for "SetParameters file" input "$(System.DefaultWorkingDirectory)/$(Build.DefinitionName)/drop/Client.Web.SetParameters.xml" where "Client.Web" is the name of your package, in my case, the main web project.</p>
<p>Under "Post Deployment Action", select "Inline Script" as the "Deployment script type", and put this in the text box to do some post-deploy house keeping.</p>
<pre class="language-markup"><code>@echo off
del parameters.xml
del Web.$(Release.EnvironmentName).config</code></pre>
<p><img src="/link/4ba3548c196240bb936ba1fac13386e7.aspx" /></p>
<p>If you too want to do unnecessary annotations in AI, get your appliation ID from your azure portal for the DXC Service subscription, paste it in the "Application ID" field, and add "$(ApplicationInsights.ApiKey)" in the API Key field.</p>
<p><img src="/link/a73d534033814808b7b070b816a6903c.aspx" /></p>
<p>This is the mothership. This is where we store our sensitive information.</p>
<ul>
<li>ApplicationInsights.ApiKey is an API key that you can generate yourself from the azure portal for the AI account for the integration environment.</li>
<li>BuildVersion is a value I use and have an appSetting for, it will automagically be given the value of my $(Build.BuildNumber) variable. Appsettings and ConnectionStrings are like that.</li>
<li>EPiServerDB is the connectionstring for the integration environment, it, like the appsetting will be automagivally replaced.</li>
<li>Release.EnvironmentName is Integration, beacuse reasons.</li>
<li>Sendgrid.Password and Sendgrid.Username are given to you, upon request, from Episerver operations, and are tied to your DXC Service subscription. They are the same for Integration through Production, so no need to store those in source control either. <strong>No credentials in source control, ever</strong>. Note: CPNM is not my real username for SendGrid. No credentials in screen shots either, ever.</li>
</ul>
<h3>Step three! It's just you and me!</h3>
<p>Well, that was it for this time.</p>
<p>In conclusion, setting up a CI/CD toolchain isn't black magic, as you've seen. It's an automated chain of hacks and quirks, that somehow just works™.</p>
<p>As always, comments, discussions and feedback is greatly appreciated.</p>
<p><em>Step four! I can give you more!</em><br /><em>Step five! Don't you know that the time is right! Huh!</em></p>
<p><em></em></p>
<p><em>P.S. As Scott mentioned in the comments, there's a YAML export/import functionality. So here's the YAML.</em></p>
<pre class="language-markup"><code>resources:
- repo: self
fetchDepth: 10
queue:
name: Hosted VS2017
demands:
- npm
- msbuild
- visualstudio
- vstest
variables:
Parameters.solution: 'src\Client.sln'
Parameters.ArtifactName: 'drop'
steps:
- task: Npm@1
displayName: 'npm install'
inputs:
workingDir: src/ui
verbose: false
- task: Npm@1
displayName: 'npm run build'
inputs:
command: custom
workingDir: src/ui
verbose: false
customCommand: 'run ci-build'
- task: NuGetToolInstaller@0
displayName: 'Use NuGet 4.4.1'
inputs:
versionSpec: 4.4.1
- task: NuGetCommand@2
displayName: 'NuGet Package Restore'
inputs:
restoreSolution: '$(Parameters.solution)'
feedsToUse: config
nugetConfigPath: src/nuget.config
- task: VSBuild@1
displayName: 'Build Solution'
inputs:
solution: '$(Parameters.solution)'
msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactstagingdirectory)\\" /p:AutoParameterizationWebConfigConnectionStrings=false'
platform: '$(BuildPlatform)'
configuration: '$(BuildConfiguration)'
- task: VSTest@1
displayName: 'Run xUnit Tests'
inputs:
testAssembly: '**\bin\$(BuildConfiguration)\*test*.dll;-:**\xunit.runner.visualstudio.testadapter.dll'
codeCoverageEnabled: true
vsTestVersion: latest
otherConsoleOptions: /InIsolation
platform: '$(BuildPlatform)'
configuration: '$(BuildConfiguration)'
- task: PublishBuildArtifacts@1
displayName: 'Publish Artifacts'
inputs:
ArtifactName: '$(Parameters.ArtifactName)'
</code></pre>2018-11-27T21:54:42.0000000ZBlog postLocalizations in PropertyValueList<p>The PropertyValueList property type ca be really useful for things that don't have a need for reuse, or doesn't have a view. If you've used it you might have noticed that the editor experience, especially in regards to localizations, hasn't been optimal.</p>
<p>In <a href="/link/763efe6588f84cfb8c101358905752f9.aspx">Per's blog post from 2015</a>, the question on how to localize arose, and Kai de Leuw answered with:</p>
<pre><span>[Display(Name="/path/to/lang/resource")]</span></pre>
<p>That worked really well, up until a few weeks ago.</p>
<p>In Episerver CMS UI 11.12, something was introduced, that broke this functionality. But have no fear, it can still be done, and it's even cleaner.</p>
<p>Now, your POCOs are localized in the same way that other content types are localized.</p>
<p>Provided you have a POCO like this:</p>
<pre class="language-csharp"><code>public class Contact {
public string Name { get; set; }
public string Country { get; set; }
}</code></pre>
<p>You can localize it with an XML like this:</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<languages>
<language name="English" id="en">
<contenttypes>
<Contact>
<properties>
<Name>
<caption>Contact name</caption>
<help>The name of the contact.</help>
</Name>
<Country>
<caption>Country of origin</caption>
<help>The country of origin for the contact.</help>
</Country>
</properties>
</Contact>
</contenttypes>
</language>
</languages></code></pre>
<p>Happy localizing!</p>2018-11-22T15:02:31.0000000ZBlog postA way of working in a multi-developer team with Episerver DXC-Service<p>There are probably as many ways of collaborating on Episerver projects, as there are teams out there. This is an approach that I have been using in my teams for quite a while now, and it has served us well.</p>
<p>When working with Episerver DXC-Service, you get three environments, Integration, Pre-production, and Production, and you get access to deploying code into the Integration environment (hence its name). From there you either use Episerver Support, or the PaaS portal, to deploy changes from Integration to Pre-production, and then from Pre-production to Production by requesting a scheduled deploy by Episerver support.</p>
<p>This blog post attepts to explain how a team of developers can set up their project, so that changes can be integrated, and synchronized between developer machines, with minimal effort and setup. Minimal is of course relative, so I'll try to explain my reasoningas I go along.</p>
<p>In my experience, working with a shared database is a nightmare. It was workable in Episerver 6, but in projects using a code-first approach, it quickly became unfeasable. In the teams I have been working in for the past 5 years, we have had a shared "Development Master" environment, and used scripts to duplicate the database and blob files from that environment to local development machines. This approach has served us well, since it leaves us free to work remotely, isolated, and minimizes the risk of a single developer messing things up for the other team members when experimenting or doing YSOD-driven development.</p>
<p><img src="/link/7c1931deefc245b5ac4d4c0ad0e46310.aspx" /></p>
<p>In a DXC-Service project, we use the Integration environment as a "Development Master", and it is kept as lightweight as possible, meaning that it only contains enough content to to test functionality and configure features. This ensures that it is a quick process to synchronize to the local environment. The process isn't fool proof, and can leave some things to be desired, especially when working with feature branches, but it works in most cases.</p>
<p>The process itself is one part of the job, another part is making it simple to repeat the process. It can surely be done using visual tools, and pointing and clicking, but that would take forever, and we want this to be fast, and we want to be able to do it several times a day, if needed. In order to keep things secure, simple, and repeatable, there are a few prerequisites.</p>
<ol>
<li>I use IIS Express, because that removes the need for a License.config file to be present in my solution.</li>
<li>I use SQL Server Integrated Security, because that removes the need for stored credentials in my web.config.</li>
<li>I use a local SQL Server instance, because that allows me to work disconnected and remotely.</li>
</ol>
<p>Provided that these prerequisites are in place, we can do a few things with Powershell. I'm no powershell guru, so consider this a hack-warning. I have created a script that presents a list of options, to synchronize the database, blobs, or both. My script relies on a file called Environment.ps1, a file that is excluded from source control, and contains all the sensitive information required for these tasks. It uses the Sql Server Dac Framework and AzCopy tools to performs the heavy lifting. Environment.ps1 looks something like this.</p>
<pre class="language-csharp"><code>[CmdletBinding()]
param()
# SqlPackage is part of the Microsoft® SQL Server® Data-Tier Application Framework (DacFramework) which installed with SSMS or with SQL Server Data Tools, and can be found here https://www.microsoft.com/en-us/download/details.aspx?id=56356
$SqlPackagePath = "C:\Program Files (x86)\Microsoft SQL Server\140\DAC\bin\SqlPackage.exe"
# AzCopy is a command-line utility designed for copying data to/from Microsoft Azure Blob, File, and Table storage, and can be found here: http://aka.ms/downloadazcopy
$AzCopyPath = "C:\Program Files (x86)\Microsoft SDKs\Azure\AzCopy\AzCopy.exe"
# The name of the Web Application directory
$ApplicationDir = "<Name of directory and Web project csproj-file>"
# The name of the Web Application .csproj file (located in the $ApplicationDir directory)
$CSProjFile = "$ApplicationDir.csproj"
# The site hostname of the DXC Service Application, without the protocol identifier.
$DXCSSiteHostName = "dxc-service-subscriptionname-inte.dxcloud.episerver.net"
# The name of the DXC Service Application, usually something ending in "inte", "prep" or "prod".
$DXCSApplicationName = "dxc-service-subscriptionname-inte"
# The connection string to use for the SQL Azure database"
$DBConnectionString = "<ConnectionString for Integration Environment>"
# The key used to access the Azure Blob storage container
$BlobAccountKey = "<Blob Storage Key for the Integration Environment>"
</code></pre>
<p>And the Magic script looks like this.</p>
<pre class="language-csharp"><code>[CmdletBinding()]
param()
$ScriptDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent
$ExitScriptNo = 4
# Ensure Environment.ps1 exists
if (-not (Test-Path "$ScriptDir\Environment.ps1")) {
Write-Host "`r`nEnvironment.ps1 could not be found, please make sure it exists. Check documentation for what it should contain." -ForegroundColor "Red"
exit
}
. $ScriptDir\Environment.ps1
if(-not (Get-Variable -Name DXCSSiteHostName -ErrorAction SilentlyContinue)){
Write-Host "`r`nEnvironment.ps1 does not contain the variable DXCSSiteHostName, please ensure it is declared and contains the correct value." -ForegroundColor "Red"
exit
}
# The path to the web application root directory
$AppLocalPath = "$ScriptDir\..\src\$ApplicationDir"
# The path to where blobs are stored in the Episerver application
$BlobLocalPath = "$AppLocalPath\App_Data\blobs"
function Get-EPiServerDBConnectionString {
param([string]$fileName)
$fileExists = Test-Path -Path $fileName
if($fileExists){
$xml = [xml](Get-Content $fileName)
return $xml.SelectSingleNode("/configuration/connectionStrings/add[@name='EPiServerDB']").connectionString
}
else {
Write-Host "Could not extract connectionstring from $fileName, exiting." -ForegroundColor "Red"
exit
}
}
function Get-IISExpress-Url {
param([string]$fileName)
$fileExists = Test-Path -Path $fileName
if($fileExists){
$xml = [xml](Get-Content $fileName)
$ns = New-Object System.Xml.XmlNamespaceManager($xml.NameTable)
$ns.AddNamespace("ns", $xml.DocumentElement.NamespaceURI)
$iisUrl = $xml.SelectSingleNode("//ns:ProjectExtensions/ns:VisualStudio/ns:FlavorProperties/ns:WebProjectProperties/ns:IISUrl", $ns).'#text'
return $iisUrl.Replace("http://", "").Replace("https://", "").TrimEnd("/")
}
else {
Write-Host "Could not extract IIS Express URL from $fileName, exiting." -ForegroundColor "Red"
exit
}
}
function Recreate-Database {
param([string]$targetServer, [string]$databaseName)
$srv = New-Object Microsoft.SqlServer.Management.Smo.Server($targetServer)
if($srv.Databases[$databaseName]){
$srv.KillAllProcesses($databaseName)
$srv.KillDatabase($databaseName)
}
$db = New-Object Microsoft.SqlServer.Management.Smo.Database($srv, $databaseName)
$db.Create()
return
}
function Update-SiteAndHostDefinitions {
param([string]$targetServer, [string]$databaseName, [string]$oldUrl, [string]$newUrl)
$query = "UPDATE tblSiteDefinition SET SiteUrl = 'http://$newUrl/' WHERE SiteUrl = 'https://$oldUrl/';UPDATE tblHostDefinition SET Name = '$newUrl' WHERE Name = '$oldUrl';"
Invoke-Sqlcmd -ServerInstance $targetServer -Query $query -Database $databaseName
}
function Delete-FormPosts {
param([string]$targetServer, [string]$databaseName)
$query = "DELETE FROM [tblBigTableReference] WHERE [pkId] IN (SELECT [pkId] FROM [tblBigTable] WHERE [StoreName] LIKE '%FormData_%');DELETE FROM [tblBigTable] WHERE [StoreName] LIKE '%FormData_%';DELETE FROM [tblBigTableIdentity] WHERE [StoreName] LIKE '%FormData_%';DELETE FROM [tblBigTableStoreInfo] WHERE [fkStoreId] IN (SELECT [pkID] FROM [tblBigTableStoreConfig] WHERE [StoreName] LIKE '%FormData_%');DELETE FROM [tblBigTableStoreConfig] WHERE [StoreName] LIKE '%FormData_%';"
Invoke-Sqlcmd -ServerInstance $targetServer -Query $query -Database $databaseName
}
# Ensure SqlPackage exists
if (-not (Test-Path $SqlPackagePath)) {
Write-Host "`r`nPlease ensure SqlPackage is installed and variable SqlPackagePath in script is correct." -ForegroundColor "Red"
exit
}
# Ensure AzCopy exists
if (-not (Test-Path $AzCopyPath)) {
Write-Host "`r`nPlease ensure AzCopy is installed and variable AzCopyPath in script is correct." -ForegroundColor "Red"
exit
}
# Ensure SqlServer PowerShell Module is installed
if (-not (Get-Module -ListAvailable -Name SqlServer)) {
Write-Host "`r`nSqlServer Powershell Module is not available, please install using command: 'Install-Module -Name SqlServer -AllowClobber'" -ForegroundColor "Red"
exit
}
# Ensure local path for BLOBs exists
if (-not (Test-Path $BlobLocalPath)) {
New-Item -ItemType directory -Path $BlobLocalPath | Out-Null
}
Import-Module SqlServer
while(-Not ($Step -eq $ExitScriptNo) -Or ($Step -eq $NULL)) {
Write-Host "`r`nAvailable options:`r`n" -ForegroundColor cyan
Write-Host "1. Copy Database from SQL Azure to instance specified in Web.config" -ForegroundColor white
Write-Host "2. Copy BLOBs from Azure Blob Storage to local machine" -ForegroundColor gray
Write-Host "3. Full restore (1 & 2)" -ForegroundColor white
Write-Host "4. Exit`r`n" -ForegroundColor gray
$Step = Read-Host "Please choose option"
if(($Step -eq 1) -Or ($Step -eq 3)) {
Write-Host "`r`nBeginning backup of SQL Azure database`r`n" -ForegroundColor yellow
$bacpacFilename = "$ScriptDir\$DatabaseName" + (Get-Date).ToString("yyyy-MM-dd-HH-mm") + ".bacpac"
& $SqlPackagePath /Action:Export /TargetFile:$bacpacFilename /SourceConnectionString:$DBConnectionString /Quiet:True
Write-Host "`r`nFinished backup of SQL Azure database`r`n" -ForegroundColor green
Write-Host "`r`nBeginning restore of SQL Azure database to instance specified in Web.config`r`n" -ForegroundColor yellow
$webConfig = "$AppLocalPath\Web.config"
$webConnectionString = Get-EPiServerDBConnectionString $webConfig
$connString = New-Object System.Data.Common.DbConnectionStringBuilder
$connString.set_ConnectionString($webConnectionString)
$targetDatabaseName = $connString["initial catalog"]
$targetServer = $connString["server"]
Recreate-Database $targetServer $targetDatabaseName
& $SqlPackagePath /Action:Import /SourceFile:$bacpacFilename /TargetDatabaseName:$targetDatabaseName /TargetServerName:$targetServer /Quiet:True
Remove-Item $bacpacFilename
Write-Host "`r`nFinished restore of SQL Azure database to instance specified in Web.config`r`n" -ForegroundColor green
Write-Host "`r`nUpdating site- and host definitions`r`n" -ForegroundColor yellow
$iisExpressUrl = Get-IISExpress-Url "$AppLocalPath\$CSProjFile"
Update-SiteAndHostDefinitions $targetServer $targetDatabaseName $DXCSSiteHostName $iisExpressUrl
Write-Host "`r`nFinished updating site- and host definitions`r`n" -ForegroundColor green
Write-Host "`r`nRemoving any stored Episerver Forms submissions`r`n" -ForegroundColor yellow
Delete-FormPosts $targetServer $targetDatabaseName
Write-Host "`r`nFinished removing Episerver Forms submissions`r`n" -ForegroundColor green
Write-Host "`r`nTouching web.config to force application pool recycle`r`n" -ForegroundColor green
(dir $webConfig).LastWriteTime = Get-Date
Write-Host "`r`nDone with step 1.`r`n" -ForegroundColor green
if(($Step -eq 1)){
Write-Host "Bye" -ForegroundColor green
exit
}
}
if(($Step -eq 2) -Or ($Step -eq 3)) {
Write-Host "`r`nBeginning copying BLOBs to local directory`r`n" -ForegroundColor yellow
& $AzCopyPath /Source:https://$DXCSApplicationName.blob.core.windows.net/blobs /Dest:$BlobLocalPath /SourceKey:$BlobAccountKey /S /MT /XO /Y
Write-Host "`r`nFinished copying BLOBs to local directory`r`n" -ForegroundColor green
Write-Host "`r`nDone with step 2.`r`n" -ForegroundColor green
if(($Step -eq 2)) {
Write-Host "Bye" -ForegroundColor green
exit
}
}
if(($Step -eq 3)) {
Write-Host "`r`nDone with step 3.`r`n" -ForegroundColor green
Write-Host "Bye" -ForegroundColor green
exit
}
if($Step -eq $ExitScriptNo) {
Write-Host "Bye" -ForegroundColor green
exit
}
if([string]::IsNullOrEmpty($Step) -Or ($Step -lt 1) -Or -Not ($Step -lt ($ExitScriptNo + 1))) {
Write-Host "`r`nPlease enter a valid option" -ForegroundColor "Red"
}
}</code></pre>
<p>What happens when you run it? Besides pretty colors, it does the following:</p>
<p>The database copy step creates a .dacpac file from the database in the integration environment, copies it to your local machine and then restores it to the database specified in the Web.config file. After it has restored the database, it ensures that the siteUrl in for the configured site matches the configured domain in the project settings in the csproj file, so that routing works locally, and then continues to delete any Episerver Forms posted form data, so that any sensitive posts won't sully your local dev environment (GDPR all the things!).</p>
<p>The blob file step simply copies all the blob files in the blob container and puts them in your App_Data/blobs directory.</p>
<p>Please note, that depending on your specific project, and how your project is set up, you might need to change or remove things. This has worked well for me, but doesn't necessarily guarantee success for you.</p>
<p>This process, combined with a clean CI/CD process of getting your code into the Integration environment, can greatly reduce the time spent on boring stuff like copying databases and blob files. It has shortened our startup time for new developers on the team from half a day, to about 5-10 minutes, depending on connection speed. Time that can be spent on adding value instead!</p>
<p>Good luck, have fun, and most importantly, don't be afraid to break things.</p>2018-11-19T16:29:23.0000000ZBlog postBuilding a content-backed option list for your editors<p>So here's the premise, you want to let your editors select an option in a list, but, you also know that that list could change over time. A common approach is to use an enum, or a list of strings in an app-settings key. While both of these approaches work, they often leave editors wanting, and are limited to simple property types, like, enums, ints or strings, and require a deploy to update.</p>
<p>Here's an approach of putting your editors in the driver's seat, while showing them something that puts content in context in a more visual way.</p>
<p>This is a view of the end result for the editor.</p>
<p><img src="/link/7cfdea1217704846b383bd5413a3d664.aspx" /></p>
<p>This list of icons will probably change over time, and we don't want to have to do a deploy every time we add an icon. Granted, there are a few other aspects that will need to be considered, like how to handle values that no longer exist, localization, and probably how these should be handled in your front-end, but I'll leave most of that up to you as a reader and implementor to decide. Here's <em>a</em> way to do this, not <em>the</em> way.</p>
<h3>First, let's get the data source into the CMS.</h3>
<p>I've opted for the use of a PropertyValueList, but if you're more of a blocks-for-all-the-things kind of developer, that is certainly doable too.</p>
<pre class="language-csharp"><code> public class CustomIcon
{
[Display(Name = "/CustomIcon/Icon", Order = 1), AllowedTypes(typeof(SvgFile)), UIHint(UIHint.Image)]
public ContentReference Icon { get; set; }
[Display(Name = "/CustomIcon/Label", Order = 2)]
public string Label { get; set; }
}
/// <remarks>
/// This class must exist so that Episerver can store the property list data.
/// </remarks>
[PropertyDefinitionTypePlugIn]
public class CustomIconCollectionProperty : PropertyList<CustomIcon> { }
[EditorDescriptorRegistration(TargetType = typeof(IList<CustomIcon>))]
public class CustomIconCollectionEditorDescriptor : CollectionEditorDescriptor<CustomIcon>
{
public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
ClientEditingClass = "CustomIconPicker/CollectionFormatter.js";
base.ModifyMetadata(metadata, attributes);
}
}</code></pre>
<p>OK, so what's going on here? This is just a simple list of a simple POCO, containing a ContentReference and a string property. I always define specific Media typesper extension, instead of having a generic ImageFile media type, since that allows me to do restrictions like above, where I only allow SVG's as icons.</p>
<p>And here's the JavaScript for showing the icon, instead of the ID, in the grid editor for the PropertyValueList (the contents of the CollectionFormatter.js file)</p>
<pre class="language-javascript"><code>define([
"dojo/_base/declare",
"epi/dependency",
"epi-cms/contentediting/editors/CollectionEditor"
],
function (
declare,
dependency,
collectionEditor
) {
return declare([collectionEditor], {
_resolveContentData: function(id) {
if (!id) {
return null;
}
var registry = dependency.resolve("epi.storeregistry");
var store = registry.get("epi.cms.content.light");
var contentData;
dojo.when(store.get(id), function (returnValue) {
contentData = returnValue;
});
return contentData;
},
_getGridDefinition: function () {
var that = this;
var result = this.inherited(arguments);
result.icon.formatter = function (value) {
var content = that._resolveContentData(value);
if (content) {
return `<img style="width:16px;display:inline-block;margin-right:4px;" src="${content.publicUrl}" alt="${content.name}" title="${content.name} (${content.contentLink})" />`;
}
return value;
};
return result;
}
});
});</code></pre>
<p>What the above code produces, is something like this:</p>
<p><img src="/link/6107eaebbf8748f7b6efcb7ca28a06fc.aspx" /></p>
<p>OK, so now we have a property editor, but we'll need somewhere to store the data too. I've used a block, and an abstracted interface, and for brevity I've left the registering and resolving of it out, but you'll need to have a way if registering it in the IoC container. A simple way could be to have it as a property on your start page, and resolve the property from there, and register it as a scoped instance, but I think that could be a blog post in its own right. If you want me to explain that in detail, let me know in the comments.</p>
<pre class="language-csharp"><code> [ContentType(GUID = Guid)]
public class IconConfiguration : BlockData, ICustomIconConfiguration
{
public const string Guid = "52C7D11A-E1CB-4E8F-847F-40DA095F1234";
[Display(Order = 10), CultureSpecific]
public virtual IList<CustomIcon> AvailableIcons { get; set; }
}
public interface ICustomIconConfiguration
{
IList<CustomIcon> AvailableIcons { get; }
}</code></pre>
<p>OK, now that we have that object to store our configured icons, and we can resolve it from the IoC container, how do we use it? On to part 2.</p>
<h3>Using content in our editor</h3>
<pre class="language-csharp"><code> [EditorDescriptorRegistration(TargetType = typeof(ContentReference), UIHint = "CustomIconPicker")]
public class CustomIconPickerEditorDescriptor : EditorDescriptor
{
public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
ClientEditingClass = "CustomIconPicker/Editor.js";
base.ModifyMetadata(metadata, attributes);
metadata.EditorConfiguration.Add("data", ServiceLocator.Current.GetInstance<IIconConfiguration>().AvailableIcons);
metadata.EditorConfiguration.Add("noneSelectedName", LocalizationService.Current.GetString("/CustomIcon/Picker/NoneSelected"));
}
}
[ContentType(GUID = Guid)]
public class MyBlockWithCustomIcon : BlockData
{
public const string Guid = "5E2556B3-3071-43E6-B4CE-CDD34B13E4DE";
[Display(Order = 10), UIHint("CustomIconPicker")]
public virtual ContentReference Icon { get; set; }
}</code></pre>
<p>So I have a block with a ContentReference property, and a UIHint that makes it use my custom editor. Just a quick note on why I'm using the <a href="http://blog.ploeh.dk/2010/02/03/ServiceLocatorisanAnti-Pattern/">despicable anti-pattern</a> that is the ServiceLocator: Using constructor injection in an editordescriptor works, but will effectively turn the instance injected into a singleton in the editor descriptor scope, meaning that any changes to the IIconConfiguration instance won't show up until app restart. Thus, using constructor injection in editor descriptors is generally a bad idea, unless you're only using singleton dependencies, but as a consumer you shouldn't have to care about that.</p>
<p>But enough about that, here's the code in the Editor.js file.</p>
<pre class="language-javascript"><code>define([
"dojo/on",
"dojo/_base/declare",
"dojo/aspect",
"dijit/registry",
"dijit/WidgetSet",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Select",
"epi/dependency",
"epi/i18n!epi/cms/nls/customicon.picker",
"xstyle/css!./WidgetTemplate.css"
],
function (
on,
declare,
aspect,
registry,
WidgetSet,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
Select,
dependency,
localization) {
return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: dojo.cache("customicon.picker", "WidgetTemplate.html"),
intermediateChanges: false,
value: null,
picker: null,
_resolveContentData: function(id) {
if (!id) {
return null;
}
var registry = dependency.resolve("epi.storeregistry");
var store = registry.get("epi.cms.content.light");
var contentData;
dojo.when(store.get(id), function (returnValue) {
contentData = returnValue;
});
return contentData;
},
onChange: function (value) {
},
postCreate: function () {
this.inherited(arguments);
this.initializePicker(this.value);
},
startup: function () {
},
destroy: function () {
this.inherited(arguments);
},
_setValueAttr: function (value) {
if (value === this.value) {
return;
}
this._set("value", value);
this.setSelected(value);
},
setSelected: function (value) {
var self = this;
self.picker.attr("value", value);
},
initializePicker: function (initialValue) {
var self = this;
var data = self.data;
if (data != null) {
var options = [{ label: self.noneSelectedName, value: " ", selected: initialValue === null }];
for (var index = 0; index < data.length; index++) {
var item = data[index];
var content = self._resolveContentData(item.icon);
if (content) {
options.push({ label: `<div class="customiconpicker--icon"><img style="width:32px;display:inline-block;margin-right:4px;" src="${content.publicUrl}" alt="${item.label}" title="${item.label}" /><span class="customiconpicker--label">${item.label}</span></div>`, value: item.icon, selected: item.icon === initialValue });
}
}
var select = new Select({
name: "customiconpicker",
options: options,
maxHeight: -1
}, "customiconpicker");
select.on("change", function () {
self._onChange(this.get("value"));
});
this.picker = select;
this.container.appendChild(select.domNode);
}
},
_onChange: function (value) {
this._set("value", value);
this.onChange(value);
}
});
});</code></pre>
<p>Here's the WidgetTemplate.html referenced in the javascript.</p>
<pre class="language-markup"><code><div class="dijitInline customiconpicker-editor">
<div data-dojo-attach-point="container"></div>
</div></code></pre>
<p>Here's the WidgetTemplate.css also referenced from the JavaScipt, they are placed beside the Editor.js file.</p>
<pre class="language-css"><code>.customiconpicker-editor .dijitButtonText {
height: 40px;
}
.customiconpicker--icon {
margin-left: 0px;
display: flex;
align-items: center;
min-width: 40px;
}
.customiconpicker--icon .customiconpicker--label {
height: 40px;
line-height: 40px;
padding-left: 4px;
}
.dijitSelectLabel .customiconpicker--icon {
margin-left: 0px;
display: flex;
align-items: center;
}
.dijitSelectLabel .customiconpicker--icon .customiconpicker--label {
height: 40px;
line-height: 40px;
padding-left: 4px;
}
</code></pre>
<p>And, if you're a "don't-hardcode-things" kind of person like me, here's the XML that'll give your editors editing controls in a language they can understand.</p>
<pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?>
<languages>
<language name="English" id="en">
<contenttypes>
<IconConfiguration>
<name>Icon Configuration</name>
<description>A block used to configure the icon feature on the site.</description>
<properties>
<AvailableIcons>
<caption>Available Icons</caption>
<help>The icons available for editors to select from.</help>
</AvailableIcons>
</properties>
</IconConfiguration>
<MyBlockWithCustomIcon>
<name>My block with an icon</name>
<description>A block with an icon used for this demo.</description>
<properties>
<Icon>
<caption>Icon</caption>
<help>An optional icon to use for this block.</help>
</Icon>
</properties>
</MyBlockWithCustomIcon>
</contenttypes>
<CustomIcon>
<Label>Label</Label>
<Icon>Icon</Icon>
<Picker>
<NoneSelected>Default icon</NoneSelected>
</Picker>
</CustomIcon>
</language>
</languages></code></pre>
<p>Hopefully, following these steps should leave you with a smoother editor experience, that will give your editors more control over their site, and help them not have to memorize what icon a text string corresponds to, and also be able to change that icon. Or image, or whatever your imagination can come up with.</p>
<p>Remember, Episerver is a tool built to suit everyone, but that doesn't mean that you can't make it suit your clients even better. Put your editors in the driver's seat, and give them a tool they love to use, not one that they tolerate.</p>2018-11-16T13:23:32.0000000ZBlog postPerformance Optimization: Preloading required client resources and pushing them to the browser with HTTP/2 Server Push<p>Today, a colleague of mine asked me if we could utilize the new HTTP/2 Server Push feature in Cloudflare, for one of our DXC-Service clients. I thought it wouldn't be too hard to accomplish, and I was right.</p>
<p>The HTTP/2 Server Push feature in Cloudflare relies on the Link HTTP Header, that can be used instead of a regular <link rel="preload"> element in the <head> of your page, and works like this: Any resources you specify in the Links header, will be checked if it is local, and if it is, pushed along with the page directly to the client, and removed from the HTTP header. Resources that aren't local are left in the header value, so your clients can still benefit from preloading. Read more about this <a href="https://www.cloudflare.com/website-optimization/http2/serverpush/">here</a>. Please, note, that even if you don't use DXC Service, you can still use Cloudflare, and even if you don't use Cloudflare, your visitors can still benefit from asset preloading.</p>
<p>If you aren't using ClientResources for your own styles and scripts, either implement that, or just add them manually in the module.</p>
<p>Step 1: If you are using DXC-Service, email <a href="mailto:support@episerver.com">support@episerver.com</a> and kindly ask them to enable the HTTP/2 Server Push feature in Cloudflare for your subscription.</p>
<p>Step 2: Implement an IHttpModule like this:</p>
<pre class="language-csharp"><code>using System.Collections.Generic;
using System.Linq;
using System.Web;
using EPiServer.Framework.Web.Resources;
using EPiServer.ServiceLocation;
namespace My.Fully.Qualified.Namespace
{
public class AssetPreloadModule : IHttpModule
{
public void Init(HttpApplication context)
{
context.PreSendRequestHeaders += SendLinkHeaderForRequiredResources;
}
private static void SendLinkHeaderForRequiredResources(object sender, System.EventArgs e)
{
if (application.Context.Response.ContentType == "text/html")
{
var requiredResources = ServiceLocator.Current.GetInstance<IRequiredClientResourceList>().GetRequiredResourcesSettings().ToArray();
var requiredResourceService = ServiceLocator.Current.GetInstance<IClientResourceService>();
var assets = requiredResources.SelectMany(
setting => requiredResourceService
.GetClientResources(setting.Name, new[] { ClientResourceType.Script, ClientResourceType.Style })
.Where(x => x.IsStatic), (setting, clientResource) => GetPreloadLink(clientResource)).ToList();
if (assets.Any())
{
AddLinkTag(application.Context, assets);
}
}
}
private static AssetPreloadLink GetPreloadLink(ClientResource clientResource)
{
var link = new AssetPreloadLink
{
Type = ConvertType(clientResource.ResourceType),
Url = clientResource.Path
};
return link;
}
private static AssetType ConvertType(ClientResourceType resourceType)
{
switch (resourceType)
{
case ClientResourceType.Script:
return AssetType.Script;
case ClientResourceType.Style:
return AssetType.Style;
default:
return AssetType.Unknown;
}
}
private static void AddLinkTag(HttpContext context, IEnumerable<AssetPreloadLink> links)
{
context.Response.AppendHeader("Link", string.Join(",", links));
}
public void Dispose()
{
}
}
internal class AssetPreloadLink
{
private const string Format = "<{0}>; rel=preload; as={1}";
public string Url { get; set; }
public AssetType Type { get; set; }
public bool NoPush { get; set; }
public override string ToString()
{
if (Type != AssetType.Unknown)
{
var output = string.Format(Format, Url, Type.ToString().ToLowerInvariant());
if (NoPush)
{
return output + "; nopush";
}
return output;
}
return string.Empty;
}
}
internal enum AssetType
{
Unknown = 0,
Script = 100,
Style = 200,
Image = 300
}
}</code></pre>
<p>Step 3: Add the module to your web.config</p>
<pre class="language-markup"><code><configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<add name="AssetPreloadModule" type="My.Fully.Qualified.Namespace.AssetPreloadModule, My.Assemblyname" />
</modules>
</system.webServer>
</configuration></code></pre>
<p>Step 4: Build, run, and watch your conversion rates soar!</p>
<p>Note: Thanks to Johan Petersson for alerting me to the fact that I appended the header to every request. Although my assumption was correct, in that requests for resources other than html requests won't have any required resources in the IRequiredClientResourceList, executing the lookup for those requests was unnecessary. If you manually add resources that are not in the list, the check with assets.Any() can be removed.</p>2018-10-26T21:03:30.0000000ZBlog postClean and unique media URLs with ImageResizer.NET presets<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>For a while I've been working on cleaning up the urls generated for images, to ensure that they are clean, cacheable, and preferrably querystring-free. Previously, I have been using IIS URL Rewrites to achieve this, but I have always known there are better ways, but just haven't gotten around to it yet. Better, meaning fewer moving parts, and a drop-in solution.</p>
<p>Yes, I am well aware of the built-in functionality of naming blob properties on media items and tacking on an attribute to get a scaled image, but image optimization is far more than just resizing, and a component like ImageResizer is a really great tool to have in your site. It really is worth the cost.</p>
<p>So, without further ado, here's "<a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageResizer.Plugins.UniqueUrlFolderPresets">UniqueUrlFolderPresets</a>", I didn't know what to name it, but this name is as good as any :)</p>
<p>What does it do?</p>
<p>It takes a media URL, like "/globalassets/my-images/my-image.jpg" and prepends it with a 8 character hash based off of the media item's last saved date. Out of the box, it also adds a max-age header, that caches it for a year. Yes, that's configurable. I know, this isn't a very new concept, but AFAIK no one has done it in conjunction with resizing images. This is the "UniqueUrl" part of the add-on.</p>
<p>The second part, the "FolderPresets" part, has support for imageresizing.net's presets as part of the segments of the URL, as opposed to tacking on an ugly querystring. I've added a couple of really simple UrlHelper extensions to help with generating the URLs, but in essence, if you prepend your image URL with "/optimized/<preset>", it will apply that preset, if it exists, to the image request. If the preset doesn't exist, it'll give you a 404. Yes, the "optimized" part is also configurable.</p>
<p>It <em>should</em> work with any other ImageResizer plugins, but I haven't tested it that much, please help with that. If you have clientcaching configured for imageresizer, this plugin replaces that, so you can remove it.</p>
<p>If there's no hash in the URL, you'll get a 301 redirect to the latest version (hash), and if there's an old hash in the url, you'll also get a 301 redirect.</p>
<p>Hopefully, someone besides me will find this useful. And as usual, I'm open to feedback and suggestions. Use <a href="https://github.com/defsteph/UniqueUrlFolderPresets">github</a> for that.</p>
<p>There's also a back-port for CMS 10, if you have yet to upgrade, you'll <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageResizer.Plugins.UniqueUrlFolderPresets.Cms10">find it here</a>.</p>
</body>
</html>2018-02-01T07:58:50.0000000ZBlog postAll I want for christmas is updated addons and an automated approval process.<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Today I decided to make a little effort in getting things ready for the inevitable CMS 11 upgrade storm. Eventually, we'll be asked to upgrade our client sites to the latest and greates version of EPiServer. This process usually goeas a little something like this:</p>
<ol>
<li>Upgrade site</li>
<li>Fix compilation errors</li>
<li>Identify obsoleted methods</li>
<li>Find out how to do it the new way</li>
<li>Do it the new way</li>
<li>Huge sigh of relief for your code not being nearly as broken as you thought it was going to be.</li>
<li>Stop everything because an add-on you're using hasn't been upgraded yet.</li>
</ol>
<p>This time around, EPiServer has been fast to fix things, but there are still a few things missing.</p>
<p>I have taken the time to ensure that the <a href="https://github.com/CreunaAB/EPiFocalPoint">FocalPoint</a> and <a href="https://github.com/CreunaAB/EPi.UrlTransliterator">URL Transliteration</a> plugins are updated accordingly, beacuse we use them in quite a few projects.</p>
<p>I just submitted a PR to get <a href="https://github.com/episerver/PowerSlice">PowerSlice</a> up to speed, being that PowerSlice is open source.</p>
<p>OK, so why the blog post?</p>
<p>Well, a small part is obviously self promotion, (hi mom!), but mostly it's because I feel that the workflow for submitting updated nuget packages is broken.</p>
<p>I get how PR's will take time to process, but the packages I manage could easily be deployed via the NuGet API, instead of being manually processed. I think that we as a developer community should speak up about what we need, and this is my way of doing just that.</p>
<p>So, as soon as someone at EPiServer has approved the aforementioned packages and PR, I will have done my part in getting us all one step closer to upgrading all our sites.</p>
<p>Also, Alans automated IFTTT script will tweet this, and that will make for a funny tweet.</p>
<p>Merry X-Mas!</p>
</body>
</html>2017-12-07T14:52:42.0000000ZBlog postEnsuring image extension for content URLs<p>When using an image resizing component, like we do in the Focal Point plugin, it's really important that the file extension is there. If it's not, the resizing engine won't kick in for the request, and that enormous image is sent straight to your mobile users, and they will forever hate your guts.</p>
<p>I've implemented a solution using the new (in CMS 10) IUrlSegmentCreator events, and a regular InitializationModule. Code below. It uses the first registered extension for your media type as the default extension for the URL segment. This works for me, since I have separate Media types for all image files, like JpegImage, PngImage etc, to be able to more granularly control their usage, through the AllowedTypes attribute. If you have a single MediaData for all your images, I recommend altering the extension mapping to maybe use the MimeType property and get an appropriate extension based on that. </p>
<pre class="language-csharp"><code>/*using System;
using System.IO;
using System.Linq;
using EPiServer;
using EPiServer.Core;
using EPiServer.Framework;
using EPiServer.Framework.DataAnnotations;
using EPiServer.Framework.Initialization;
using EPiServer.Web;
*/
[InitializableModule, ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ImageDataInitialization : IInitializableModule {
private bool eventsAttached;
public void Initialize(InitializationEngine context) {
if(!this.eventsAttached) {
var creator = context.Locate.Advanced.GetInstance<IUrlSegmentCreator>();
creator.Created += CreatedMediaSegment;
this.eventsAttached = true;
}
}
private static void CreatedMediaSegment(object sender, UrlSegmentEventArgs e) {
var content = e.Content as ImageData;
if(content != null) {
var extension = Path.GetExtension(content.RouteSegment);
if(string.IsNullOrWhiteSpace(extension)) {
var type = content.GetOriginalType();
var fileExtension = GetExtensionForType(type);
if(!string.IsNullOrWhiteSpace(fileExtension)) {
content.RouteSegment = content.RouteSegment + "." + fileExtension;
}
}
}
}
private static string GetExtensionForType(Type contentType) {
var mediaDescriptorAttribute = contentType?.GetCustomAttributes(typeof(MediaDescriptorAttribute), false).OfType<MediaDescriptorAttribute>().FirstOrDefault();
return mediaDescriptorAttribute?.Extensions?.FirstOrDefault();
}
public void Uninitialize(InitializationEngine context) {
var creator = context.Locate.Advanced.GetInstance<IUrlSegmentCreator>();
creator.Created -= CreatedMediaSegment;
this.eventsAttached = false;
}
}</code></pre>2016-11-18T14:35:57.0770000ZBlog postURL Transliteration for EPiServer CMS 10<p>A while back we built a website that had a chinese language version, and we had a few issues with URL Segments not looking very nice. I took me a while to figure out that what I was looking for is called Transliteration. I implemented a really hacky way of modifying the URL Segment that EPiServer produces, so that I could inject my transliterated page name, instead of the page name in chinese.</p>
<p>Now in CMS 10, the old UrlSegment class has been removed, and instead we have the IUrlSegmentGenerator, IUrlSegmentCreator and IUrlSegmentLocator, you can read more about that in the release note <a href="/link/76974ad8d2a84c1b989ad0ac453ab663.aspx?releaseNoteId=CMS-3824&epsremainingpath=ReleaseNote/">CMS-3824</a>.</p>
<p>The default implementations for these interfaces are all internal, so it's still a bit hacky to extend, but, I've implemented a Transliterating UrlSegmentGenerator, and swaped out the implementation, so you don't have to.</p>
<h2>OK, so what is transliteration, and why is this important?</h2>
<p>Let's say we have a page named "伤寒论 勘误" (I don't know what that means, it's just some chinese text that I copied). The default UrlSegmentGenerator would produce the url "-", since everything but alphanumeric chars are stripped out, so the only thing that remains is the whitespace character in the name.</p>
<p>Using transliteration, the chinese characters are converted to their alphanumeric versions, so the same input string "伤寒论 勘误" is converted to "Shang Han Lun Kan Wu", and the Transliterating UrlSegmentGenerator then produces the url "shang-han-lun-kan-wu".</p>
<p>Granted, I don't know chinese, so I can't verify that this is 100% correct. But I do know that <span>"shang-han-lun-kan-wu" is a better representation than "-", since three pages in chinese, in the same location, would have the urls "-", "-1" and"-2" using the default generator.</span></p>
<p>This approach should work for all languages, not just chinese, but you'll have to test it for yourself, if you find any bugs, please let us know by sending a pull request.</p>
<p>The code is available at <a href="https://github.com/creunaab/EPi.UrlTransliterator">https://github.com/creunaab/EPi.UrlTransliterator</a>, and a package with the same name should be available in the EPiServer NuGet feed shortly.</p>2016-10-28T10:56:41.1470000ZBlog postFocal point based image cropping for EPiServer using ImageResizing.NET<p>There are a lot of solutions out there to ensure that the important information in an image is always visible, regardless of how you crop it. Now, we can do it in EPiServer, too.</p>
<p>For a long time, me and my team mates have been discussing image optimizations and how to make it as effortless as possible for editors to work with image content. We've been using ImageResizer to do it for quite a while, but we haven't had a solution for how to modify the cropping area based on width and height. This could sometimes lead to the unwanted effect of cropping faces, and/or other parts of images that were important.</p>
<p>We procrastinated a lot, and kept hoping for someone else to solve the problem for us, but finally we gave in and sat down together to get our hands dirty.</p>
<p>After discussing a lot of different use cases, we settled on having one crop point, and store that, instead of saving a lot of different settings based on different usages. The main reason for this was that a single crop point gives us the flexibility to use the image in many different scenarios. It gives us the freedom to change the UI of our website, without having to involve the editor again if we choose to change or add usage scenarios.</p>
<h2>Ok, so how does it work?</h2>
<p>First, the editor sets a focal point in the image. It is done in EPiServer by clicking on the image in the Focal Point Editor.</p>
<p><img src="http://www.creuna.se/static/media/sizes/1000/uploads/Ideer/Blogg/2016/epifocalpoint_editor_first.jpg" alt="Setting the focal point to the far left in the image" /></p>
<p>When the image is loaded by the website visitor, the focal point is used to determine what part of the image should be included in the crop.</p>
<p><img src="http://www.creuna.se/static/media/sizes/1000/uploads/Ideer/Blogg/2016/epifocalpoint_crop_first.jpg" alt="The image is cropped using the focal point" /></p>
<p>If the focal point is instead placed in the center of the pizza, the crop using the same parameter is altered. (The focal point is red, but it is there, in the center of the pie, trust me)</p>
<p><img src="http://www.creuna.se/static/media/sizes/1000/uploads/Ideer/Blogg/2016/epifocalpoint_editor_second.jpg" alt="The focal point is moved to the center of the pizza" /></p>
<p><img src="http://www.creuna.se/static/media/sizes/1000/uploads/Ideer/Blogg/2016/epifocalpoint_crop_second.jpg" alt="The crop is altered based on the focal point" /></p>
<p>The plugin has support for both querystring parameters, and presets. We've been using presets together with IIS UrlRewrite Module to make for really pretty image URLs, but that's another blog post :)</p>
<p>The NuGet package is available from the <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageResizer.Plugins.EPiFocalPoint">EPiServer NuGet Feed</a>, or you can download the source code from <a href="https://github.com/CreunaAB/EPiFocalPoint">GitHub</a>.</p>
<p>This blog post was <a href="http://www.creuna.se/blogg/focal-point-based-image-cropping-for-episerver-using-imageresizingnet/">originally published on creuna.se</a></p>2016-09-13T20:39:03.4070000ZBlog post