Hosting Angular on Azure Storage

I have written a number of posts, on how to create angular applications. But, once your application is done, there a many options on how to host it. Today, we are going to take a look at hosting your angular app at Microsoft Azure Storage.

Why I like Azure


So, first of all, why should you even consider Azure? For me, the biggest advantage of other cloud service provider, is its usability. After using the platform for side projects, as well as for business projects, for quite some time, I have not found a single problem, that could not be solved with the click of a button in the web-portal. With other providers, that can't be taken for granted. Often times, you have to install several additional applications and dig into command line instructions. And that does not have to be a bad thing. Some people prefer the command line way over the graphical interface. I really learned to like using command line tools like npm, git or the angular-cli, after diving into the Javascript and Angular World, but it takes quite some time to learn all those commands and get used to it. With azure it is quite similar. Of course you can use the command line tools, if you like. But it would take you quite some time to get up to speed.

I am not an administrator


After all, I am a developer, not an administrator. I don't know all the details about VMs, Networks, Domains and stuff. But Azure makes all those things accessible to me, by hiding all those complicated things behind beautiful icons, while, at the same time, leaving all the possibilities open.

After all, choosing a cloud service provider heavily depends on personal preference, as the available features on all platforms become more and more the same.

Why Azure Storage?


So why shouldn't you set up a normal server (e.g. App Service) and host your application there? The answer is simple. Because it can be expensive! As you would require your server to run 24/7 you would at least require the B1 tier of Azure App Service which would costs you about 50$ per month. Additionally you would probably need to buy some additional storage, too. Of course there are many situations, in which you would require a server anyway. In that case, just host angular on that server as well. However, if you try to build up a Application, that only shows static content, you can save quite some money. Here is some math:

Let's say you have 10GB of static content on your site. The monthly cost of storing these files would be ~0,02 $ * 10 = 0,2 $.
Furthermore you have to pay for the bandwidth which is (depending on the zone) about 0,15 $ per gigabyte. If you have 10GB of traffic, that would be 1,5 $.

So all in all you would pay 1$ - 2$ for a small application.

(Note: All these costs are estimates. Your real costs can vary. Also the prices listed here may be outdated. See here for the latest prices).

But being cheap is not to only benefit of Azure storage as hosting solution. You also don't need to worry about scaling. You pay a very small amount, if you only have a few page views. But if your page grows, you don't need to worry about the infrastructure. You pay for what you use.

Additionally, if you want to bring the cost down even further, you can use a content delivery network of choice.

Preconditions


To follow along, you need an Azure account. If you don't already have one, you can register at Azure. To sign up, a credit card is required.
Furthermore I assume, that you know how to create a new Angular project. If that is not the case, you can read more about the topic here.

Creating a new Storage Account


To get started, we need to create a new storage account in the Azure portal. A storage account is an entity, that holds all your data and is a logical way to provide a scope, similar to the concept of a database.
You can create a new account by navigating to the storage account sections (search for storage) and press the add-button at the top of the page.



At the next screen, you will be prompted to configure some properties.



The first one is the name of the account. The name also represents the URL, your data can be accessed with. It is typically {yourname}.core.windows.net. Of course, you can also add a custom domain name later, if you want to.
The next option defines, of legacy (classic) support is required for your account. If you just want to follow along, choose "Resource Manager". Afterwards you can select the account type. Azure offers multiple services in the storage category. Besides a plain blob storage, there are also file storage and table storage, which offer some additional features, at additional costs. As we do net need these features, we will go with blob storage here.
Next choose the replication. Replication means, that your data is copied to different data-centers. Depending on what you choose, a copy of your data is either held locally (at the same data center), or spread around the world.
The access tier defines how often your content is accessed. Hot standing for quite often, while cool represents infrequent accessed data, like backups. We will choose hot, as our data is accessed quite often. Make sure to choose the right option for your Scenario, as it can affect cost and performance .
For optimal response time, choose a data-center close to your (your potential costumers) location under the point "location".
Finally press create. The creation of the account can take a minute or two. Afterwards navigate to your new storage account.




Container & Blobs


Azure storage is organized in containers. A container is a logical way to structure your data in the storage account. For example, if we wanted to upload some images, we first, would create a container called "images". All data, also called blobs, has to be in a container. To create a new container, click the plus symbol labeled container at the top of the overview tab.



Next, you need to fill in a name for the container. In the images example, that would be "images". You also need to specify the access type. There are three different access types available.

Private - Only clients that have an access key can access the container.
Blob - All blobs in this container are publicly available for read access.
Container - All blobs in this container are publicly available for read access. Additionally a list of all blobs in that container is publicly available.

You can choose whatever fits your use case here. However, you need to choose either Blob or Container to access the blobs publicly.
To add new blobs (images) to the container, select the new container and press the upload button at the top.

To access a blob, type in the URL of your storage account in your browser and append /{container}/{blobname}. All URLS follow this pattern, with the exception of the $root container.

The $root container


Some use cases require files to be to be in the root directory of your URL. For example the favicon. To do that with Azure storage, you need to create a container called "$root". All blobs in this container are accessible without specifying a container name in the URL.


Uploading an Angular Application


Now, let's upload an angular application. To do so, create a new Angular application with the angular-cli. As the generated application is already runable, we won't make any changes to it in this example. Next we need to get a production build of our application, to publish it on Azure storage.
To do so, open a command line in the root directory of the application and type:

ng build -prod -aot

Note: I also use Ahead Of Time Compilation (-aot) wich is not required.

Afterwards your applications root directory should contain a new folder called dist. Take all the file of that folder and upload it to the $root container in Azure.



Afterwards, open your browser and navigate to {storage-account-name}/index.html. For example "https://hostingangularinazure.blob.core.windows.net/index.html"
You should the default application. Congratulations, you have uploaded your application to Azure storage!



Limitations


Unfortunately, there are some limitations of using azure storage.
First of all, you can't have your application under the domain root e.g. malcoded.com. Instead it has to be something like malcoded.com/blog. Yes, this blog is running on Azure storage. You can read about all the details here: https://malcoded.com/posts/goodbye-wordpress. However, this problem can be solved with some simple HTTP-Redirects. As I am using Cloudflare for my blog, im using Page Rules to do that.

Second, SSL for custom domain is currently not supported. Again, this problem can be solved by using a CDN, either directly at Azure, or other solutions like Cloudflare.

I hope you liked this little excursion into Azure storage. If you did, please share this post.

Happy hosting!



 
Read More!