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

image_thumb[3]

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.

image

Run command node to get the version

image

Choose Operating System > Windows

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

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

image

Open CMD window & Go to wwwroot folder.

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

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.

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s