Build Angular App With .Net Core 2.0 Template(VS 2017) + Deploy On Azure - Step By Step Guide

Note
You can find the source code of my sample application here.

In my previous article, I explained how to use .NETCore 2.0 Identity in your .NET Core 2.0 application, you can find the article here.

In this article, we will see how to create your Angular application using Visual Studio 2017(.NET Core 2.) and will deploy it to Azure.

prerequisite

• Visual studio 2017 community edition, download here
• Azure account, you can create free trial account here
• .NET Core 2.0 SDK from here (I have written a post to install SDK here)

Create the Angular application using .NET Core 2.0 template in VS 2017

Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application,

Click on Ok and in the next window, select Angular as shown below,

Visual Studio will create a well-structured application for you,

I will not go deep into the Angular structure in this post but if you require more details then I have written a detailed post on Angular and .NET Core 2.0 which you can find here.

Once you run the application on IISExpress, it will have the landing page as below,

So far we have successfully created an Angular application using Visual Studio 2017 template and run it on IISExpress.

Publish the Angular application on Azure

Right click on the solution and select Publish,

It will open the window in which you can publish your application on different hosts. Select Microsoft Azure App Service and click on Publish,

Once you click on Publish, it will try to sign you into your Azure account and Visual Studio will fetch the details (like your subscription, Resource Group etc) from your Azure account and will show it on the form. If you are not signed in automatically, you need to sign in manually.

Currently, it is trying to fetch the details from my Azure account,

Resource Group and App Service Plan

Resource Group is a container in which Azure resources like Web Apps, Databases, and storage accounts are deployed and managed.

App Service Plan is used to specify the size, location etc of your Web farm which will host your application.

Click on New and add Resource Group and App Service Plan if you do not have it already.

If you want to add Database then click on Service tab and add\manage the databases,

If you do not wish to add the database then simply click on Create, it publishes the Angular Web App to Azure and then launches the app into the default browser:

Note

If you observe the URL then you would understand that the Web App name specified in the publish wizard is used as the URL prefix in the format.

For example – http://<app_name>.azurewebsites.net

You have successfully hosted your Angular application on Azure.

RePublish\ReDeploy the recent changes

Let us make some changes on the page and publish our changes to see if the changes are getting reflected in the Azure cloud or not:

I will change the home.component.html page and will modify the texts as below,

Save the changes and right click on the solution and click on Publish again.

Once the process is done, the browser will be launched,

As you can see, our changes are reflected in the Azure cloud.

Now whenever you want to push your recent changes, click on Publish and the Cloud will be updated.

You can manage your web application in the Azure under App services,

Note

You can find the source code of my sample application here.

Hope it helps.