How to deploy angular application with azure blob storage?

Suthesana
3 min readAug 15, 2020

What is azure storage?

The Azure Storage platform is Microsoft’s cloud storage which enables durable and highly available, secure, and massively scalable storage. Blobs, Files, Queues , Tables, Disks are the main storage services provided by the the azure storage platform.

Blob storage

Blob storage is an all-in-one storage which can store all type of files. You can store any kind of file such as unstructured data, such as text or binary data like image,video,audio,documents.

let’s move on to how to create storage account using azure portal.

  1. Go to the azure portal and search for storage accounts and click on the create storage account.

2.Click on the Add button to add a new Storage account.

3.You have to fill all the details in the appearing window.

Fill storage account name select locations and select other options if you needed. Click on review+create button.

4. After creation you can see your storage account appeared in the panel.

Deploy angular app to azure blob storage

Here i have used azure cli to deploy angular application.

  1. Open your angular application on an editor (i have used visual studio code) and run the command below on the terminal from root folder.

ng add @azure/ng-deploy

3. When you execute above command package will be downloaded to the project and you will asked to login your azure account and select a subscription to create a storage account for you.

here a resource group will be created and azure.json file is created in you root directory which updates angular.json settings. In this azure.json file you can find all details of created account.

4. Now you have to generate static files for your front-end .So execute below command in the terminal.

ng build — production

It will give a generated files within a folder inside dist folder in root directory.

5. Now we can deploy our static files to azure storage. Execute the below command

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

in my case expense-tracker-frontend is the folder name inside my dist folder.

Now we have deployed our angular front-end successfully. You will get URL for your deployed site.

You can find your files in storage account.

  1. Go to azure portal and and click on the created storage account .

2. In storage account scroll down the left panel and in blob services click container. You can see two containers. If you go to $web container you can see the uploaded static files.

NextTopic:How to Integrate Active Directory with angular application

--

--