SPA on Azure


Single-page applications (SPAs) or Static websites are applications/websites which doesn't need any complex Client-Server model to serve requests from browsers and just represent HTML pages hosted on file servers.


In the current world, we have a lot of hosting providers or cloud capabilities by many big players but what will be best that suits your budget and needs.

For example:

we have an 'index.html' page, but to host it, Do we really need to spend around $10-15 per month for the cheapest server? Let's directly jump on to a solution that is much more efficient, reliable, and highly available worldwide.

I am talking about Azure Static Websites which consists of the following components:

* Azure storage,
* Azure CDN - Premium Microsoft CDN,
* Domain

Let's say, you purchase a server from any hosting provider or deploy your website on any cloud that will end up at a higher cost even in case of no visitors.

But don't you worry about that, with Azure static websites, we only need to create Azure storage in which all your static files will reside and on top of the storage, we will have a CDN that has POPs available in almost every metro city in all countries.

Pre-requisite:

Azure subscription
Domain Name

Steps:

Step 1: Create an Azure storage account, and enable a static website which will end up creating a container named $web

Step 2: Dump all your static files in this container, make sure this will be public and not contain any other files that are confidential in this container.

Step 3: Create a CDN with a provider like Microsoft Azure CDN, Premium SKU instead of Akamai or Verizon as this is the only tier on which we have custom routing rules and lowest pricing which we will need in later steps,

Step 4: Create an Endpoint and chose custom host instead of service in the dropdown and give the primary URL of the storage account containing the zone info like (z1-z7) in the hostname,

Step 5: Add a Custom domain on it after adding a @ mapping to the CDN hostname.


Hurray! All done.

Wait, some rewards here, check the endpoint, and Enable HTTPS with Azure provisioned certificate for Free, yes Free! no need to buy from any DNS provider.

Now a caveat here, Storage didn't allow HTTP traffic as it's layered on HTTPS, so what will happen to your users serving your website by just typing contoso.com they will get no DNS host. Okay, remember we have Azure CDN here which will help us here.

Finally, 2 steps to add beauty to your website:


* Create a custom rule with CDN to transfer your HTTP traffic to HTTPS if the same protocol is missing,
* Users will always use secured websites which will enhance their trust for many of them,
* For all naked domain traffic like contoso.com, we need to forward to www.contoso.com and then create a redirect method in the DNS provider for the specific domain used in the CDN endpoint.

Hold on, What is the cost for this?

At max ~$0.07-$0.1/day, save your bucks and enjoy!

Popular Posts