About the site
"The shoemaker's children" is a well-known proverb, and not too seldom IT consultants' own websites end up in the same category. But thanks to the ability to use modern services and components in Microsoft Azure, we quickly managed to build a really good website. Take a deep dive into how it happened.
Application Lifecycle Management
The continuous integration, test and deliver the code is something most IT projects are seeking. Our experience says that a key to achieve this is called automation from the beginning. When we built the Web, we allocated the first day the mob programming to set up and automate the source control, build release and test
We chose to use Microsoft service Azure DevOps, which we know is easy to get started with and would solve these problems. The built-in solution to do a load test of the system at each release ensures sustained user experience, even under high load. Smooth integration with Azure deployment slots means that we can apply blue/green deployment and achieve minimal downtime during commissioning.
In addition to the construction-related services, DevOps also provide a really easy way to manage demands in the form of back log items. When the solution then goes into a management phase Team services can be used for bug reporting.
- Mob programering
- Azure DevOps
- Source Management in Git
- Build och Release
- Load test
- Blue/Green deployment
That from day one, have insight on how the system is doing usually lead to better quality and a possibility to earlier detected errors. at a very early stage we activated logging and monitoring of the web, storage and database.
Services Application Insight, Azure Monitor and Google Analytics collects valuable information that we may analyze and visualize in dashboards. We usually present the information on screens to quickly get an overview of how the system is doing.
- Application Insights
- Proactive Diagnostics
- Azure Monitor
- Google Analytics
- Azure DevOps Dashboards
- Azure Dashboards
Something that we tought about early on in our project is how the solution would be managed. Experience shows that there is a lot of time and money to save within management with some extra effort of thought in the beginning. To build a website that would be effective, we decided to fully focus on PaaS and SaaS services in Azure. Due to that, we got a solution where Microsoft stands for updates, backup and other necessary procedures, and we can focus on building a really good web.
As we saw the need for multiple environments such as development, test and production, we wanted to have a consistent way to configure them. Something that has become huge in recent times and made possible by the cloud is "infrastructure as code". In Azure it can be implemented in different ways, and we chose Azure ARM Templates. It gave us a version controled infrastructure where we felt safe that all environments where configured automatically based on our given template.
As a base we use an Azure Web App site and Azure SQL for data storage. With the messages in Azure Service Bus we are able to communicate between web instances when we scale up EPiServer. SSL certificates and other keys are managed and updated safely through the Azure Key Vault. Images and other static resources are stored in Azure Blob Storage and delivered super fast over HTTP / 2 using the Azure CDN. Email Confirmations for notifications on events are sent through the service SendGrid. The editors need to be able to log in smoothly and they do so with single sign on through the connection to Azure Active Directory.
Last but not least, using Azure Security Center provides us with a continuous and automatic security scan of the system to ensure that we comply with the prevailing safety practice.
- ARM Templates
- ARM Tags
- Azure SQL
- Azure Web Apps
- Azure Key Vault
- Azure Blob Storage
- Azure CDN
- Azure Service Bus
- Azure Active Directory
- Azure Security Center
A public Web requires its CMS and after a careful evaluation of what the market had to offer, EPiServer 11 with the addition EPiServerForms was chosen to manage registrations for events. We have built our own controlls in Dojo to the EPiServer backend CMS to create a better editor experience that is customed to our sites content.
The Web is configured to always run over HTTPS, which is also a requirement for running the HTTP/2, as we do with our static client-side resources. Thanks to HSTS we can tell the browser to force HTTPS for future visits.
To further increase security, we send HTTP headers such as X-Content-Type-Options, X-Frame-Options and X-XSS-Protection to give the browser information about how our site can and can not run. It prevents certain aspects of XSS and click-jacking.
With a app manifest and icons we provide a better experience on modern units where the site is added as a favorite or as an app on the desktop.
In addition to the search engine adapted robots.txt, we also have a human version in the humans.txt where we gathered information about the team and our technicians.
If you are unlucky and end up at one of our error pages (such as "Page not found") we spice things up with a little retro game. Off course we keep track of highscore using the Application Insight Custom Metrics.
- Episerver 11
- Episerver Forms
- Security headers
- Web App Manifest
- Application Insights Custom Metrics
Mobile first is a given, and so even on our web. The goal has been to work well in all modern browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox and Apple Safari. The flexible layout is made simply by using HTML5 and Flexbox.
We are especially proud of our image management. All our illustrations comes in the form of vector-based SVG, which provides razor-sharp images even on high resolution screens. The photos we upload exploit the opportunities in HTML5 for a better user experience. Thanks <picture> in combination with srcset we can deliver different images depending on the user's screen size and resolution. Large and razor sharp images on high-resolution devices and smaller, lightweight images on for example small phones. To display the right image from the server, we used the superb service ImgIX that will resize the image on request.
We who built the new activesolution.se have learned a lot along the way and are very proud of the result. Thanks to the ability to stitch together really good components of Azure, we have been able to build a modern and robust site that can handle high load while maintaining performance.
Would you like to build similar solutions for our customers? Please let me know and we'll grab a lunch!
/ The Team
by Peter Örneholm, IT consultant at Active Solution