How to Deploy Angular Application to Azure App Service?

In this post we can see how to deploy an Angular Application into Azure App Service.

Create Angular App

1. Install Node.js from https://nodejs.org/en/download/
2. Open Command Prompt
3. Run command npm install -g @angular/cli
4. Create Project ng new AngularAAD
5. Go inside folder & Run command ng serve
6. Open the website http://localhost:4200

Build the Angular App using command:

ng build –prod

Now you should get the dist folder which we need for deployment.

Create Azure App Service

Go to Azure Portal > App Services > Create New > Choose the version depending on the Node Version.

Run command node to get the version

Choose Operating System > Windows

Click the Create button. Wait for the creation to complete.

Go to Advanced Services (KUDU Console) of the App Service

Open CMD window & Go to wwwroot folder.

Copy the contents of dist folder to it.  (Drag & Drop from Windows Explorer to Browser)

Test Deployment

Now you can Browse the App Service URL from the main page.

https://angularaad.azurewebsites.net/

You should get the page displayed as below.