Delivering SPA with Azure DevOps

Single Page Application (SPA) delivery is a one big aspect of modern software development. JavaScript based front end frameworks have made their unprecedented dominance in application development beyond web and the browsers. 

Though the engineering aspect has changed, the underlying fact they are static files and better be served closer to the consumer. In this article let’s see how to deliver a SPA with Azure DevOps with the best optimum setup.

Hosting SPA in Blob Storage Static Website

Azure has announced static website (still in preview) – AWS was first in this race with its S3 static website hosting, in fact AWS has been having this for a very long time. 

You can create a standard blob storage in Azure. You will get the static website feature and you should enable it. 

Static website hosting has a special container named $web, which is the wwwroot of the static website. Blob storage does not allow us to create containers with non alphanumeric characters, but this is a special container created for static website hosting. 
Click on the $web and you can upload the files and folders inside the container.

You will get two endpoints primary and secondary. Both will point to the index document.

You can upload the index document. You can can optionally configure the error document. In this case index.html is used for both.  For the demo purposes, just upload a simple html file with the name index.html, then browse any of those endpoints you would see the uploaded index.html.

That confirms that blob storage static hosting is working 

Setting Azure DevOps Pipelines for CI/CD

Now, we have to setup the DevOps pipeline for CI/CD.  Regardless of the framework you use for development (React, Angular, Vue, WebAssembly or anything that came today morning) – end of the day the build artifacts are bundled as static files, that need to be uploaded to the blob storage.

Different frameworks require different build steps and it varies based on the project context as well. Once the build is completed the artifacts should be uploaded to the Blob Storage $web.

In Azure DevOps you can use Azure Blob File Copy build step. This will copy the pointed artifacts to the specified container.

Note, use the version 2* (still in preview) for this as the previous version would complain that a container name cannot be validated with $ character.

Map Custom Domain

Now at, last we need to map the domain in order to make the site works as production. You can use your DNS management or migrate your domain to Azure DNS Zone.

I have used Azure DNS Zone, go to the settings  and create a CNAME record with one of the endpoints as below.

You cannot create a A record here as the storage doesn’t provide a IP.

Unable to map an A record can be seen as a downside at this level, because you can browse http://www.28368833.com but you cannot resolve http://28368833.com

Optimization to the edge with CDN

You can further optimize the delivery by bringing the content files to the CDN. Configure a CDN endpoint to the Azure Blob Storage.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: