How to host angular application using Azure Cloud

In this post , i will introduce you to azure cloud . Also we will see how to deploy our angular application to azure using azure’s Web App Service.

Step 1: Azure Subscription

You would need to subscribe for azure portal in order to use azure services. Below is the link for azure portal –

If you do not have an Azure account, provide your email or telephone number and it will verify that you are not in the system and will invite you to create an account. There is an option for a free trial account with $200 USD in credits for 30 days, so you can play with Azure resources without spending money during those 30 days.

Step 2: Create a resource

Once you are subscribed on azure , you can go to “Create a resource” link and search for Web App. Click on Create web app and you will see the form as below –

Creating Web App resource

These details are required while creating web app service. You need to select a windows operating system for creating resource. Once all the configuration is done you can just review & create the resource.

After resource is created , you can go to all resources tab and can see these two resources created –

All resources

First resource is an App Service where our angular application will be deployed .

Second is application insights where you can monitor performance of your application.

Step 3: Resource Configuration

Here you can do the configuration for the resource created in step above.

Create resource configuration page

Step 4: Deploy application

Now build your angular application using below command –

ng build --prod

This will create an deployable artifacts under /dist folder . You have to copy this content for hosting it on cloud . To copy the content go to “Advanced Tools” menu and click “Go” –

Kudu services page will open as below –

This gives us and FTP services to copy our deployment artifacts generated after build process. Now go to Debug Console -> CMD . We have to drag and drop the contents created in build step under sites/wwwroot folder on kudu services .

Step 5: Configure Path under configuration

Now edit the path to direct to your application folder uploaded in kudu service and click save-

Path addition

Now your application is up and running . You can see the link for your application on resource overview page as below –

Close Bitnami banner