How To Deploy Multiple Angular Applications To Single Azure App Service

Satheesh Elumalai
May 11, 2022

9.8k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

in this article, we are going to see how to deploy multiple angular projects in a single azure app service.

First, we are going to set up and install angular CLI. For example, here I have created 3 new angular projects please follow the steps below.

open a terminal window and run the following command.

npm install -g @angular/CLI

Once you've installed the client successfully, next run the CLI command ng new and provide the application name like TestAngularProject1.

Here ng represents angular. The ng new command prompts you for information about features to include in the initial application.

Angular CLI installs the necessary Angular npm packages and other dependencies. This can take some time to render the changes.

ng new TestAngularProject1
cd TestAngularProject1

ng new TestAngularProject2
cd TestAngularProject2

ng new TestAngularProject3

cd TestAngularProject3

Once you've installed all the above commands please run the application using the ng serve—open command.

Then run command ng build gets dist. deployment build files for all the 3 projects.

Next, I am going to create an azure app service from Azure Portal. Once you create the app service you need to add some configuration settings.

Here I have created an app service named testangularsat. -->Go to azure portal home page and click the app service testangularsat. In the left side menu select configuration under the Settings menu.

In the configuration page, I have selected the 4th tab Path Mappings. In the path mapping, I'm going to add Virtual applications and directories.

Next, I'm going to add 3 Virtual applications and directories for TestAngularProject1, TestAngularProject2, and TestAngularProject3. Click + New virtual application or directory button and add the directory name Please refer to the below images.

Here I have added Visual Path names like TestAngularProject1 and Physical Path names like site\TestAngularProject1. Site refers to the rooting path.

I have added 3 directories for TestAngularProject1, TestAngularProject2, and TestAngularProject3.

Once you've created all the virtual directories open the app service root and add the 3 folders like TestAngularProject1, TestAngularProject2, and TestAngularProject3.