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

Kontinuerlig integration

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.

Monotoring

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.

Dashboards med monitorering

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.

Infrastructure

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.

 

Komponenter på webbplatsen

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.

Web

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.

Microsoft Surface

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. 

Frontend

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.

Mobile first

Thanks webpack and Autoprefixer we have been able to write modern CSS and received good support even for older browsers. To facilitate debugging of client-side resources such as SASS and JavaScript, we have implemented Source Maps as part of our webpack step.

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.

Any questions?

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