How to Deploy an Angular Application in Azure: Azure Blob Storage

Azure Storage :- Azure Storage includes object, file, disk, queue, and table storage. There are also services for hybrid storage solutions, and services to transfer, share, and back up data.there are 4 types of storage available in Azure. here, I’m going to use Blob storage to save Angular generated static files. Azure Blob storage is Microsoft’s object storage solution for the cloud. Blob storage is optimized for storing massive amounts of unstructured data.

Ok, Let’s we move to how to create Azure Storage Account through azure.

Step 2:- Deploy Application with Azure Storage

for that we need create that,As before mentioned, through the link https://portal.azure.com you open your Azure portal. then you need do click on menu button and click Storage Accounts or Search Storage Accounts or Select Storage Accounts in home.

Then for new Storage Accounts click on Add Button

Then You got Create Storage Accounts page on it you need fill below details.

create storage account

1. In the Subscription field, select the subscription in which to create the storage account.
2. In the Resource group field, select an existing resource group or select Create new, and enter a name for the new resource group.
3. In the Storage account name field, enter a name for the account. Note that mentioned guidelines
4. In the Location field, select a location for the storage account, or use the default location.
5. For the rest of the settings:- for Performance:- Select Premium, for Account kind Select BlockBlobStorage. and for Replication Leave the default setting of Locally-redundant storage (LRS).
6. Choose the Advanced tab.
7. If you want to optimize your storage account for data analytics, then set Hierarchical namespace to Enabled. Otherwise, leave this option set to it’s default value.
8. then Select Review + create to review the storage account settings.

yes we got it…… now we finished the Azure storage Account..

Now let’s move to the project and connect to the Azure Storage

ng add @azure/ng-deploy

Execute above code. when we execute we will login our azure account so need input Password of azure account and the we need to select a subscription to create a storage account for us ,and it will generate the azure.json file inside our project. and it created in our root directory which updates angular.json settings. In this azure.json file we can see all details of our created account.

and then we need static file for our front end. so execute it.

ng build — prod

through execute above code we got generated files with a folder inside dist folder in root directory.

for deploy the static files in azure storage, execute the code

ng run {folder-name-inside-dist-folder}:deploy

in my case expense-tracker-frontend we can see it above image. If we did correctly then we got URL of our application’s front-end inside the terminal. so we did deploy our frontend application successfully… next we check and confirm it..

so now move to azure portal..we can check the files in our Storage accounts. for that click the storage accounts created(same as account name in azure.json)

then, scroll down and click on Containers.

We can see the two containers. if we click $web container we can see the static files in dist folder uploaded.

inside the $web

that’s it, done it, we consumed Azure storage service for deploy our application.

Now we deploy our application’s front-end as well as back-end.

so let’s see you in another services of azure that is Azure Active Directory…. see you soon..

Thank You…..