How to publish an Angular App in Azure Linux Web App Service explained from scratch

Tags: angular, azure, devops, webdev
Published: 2020-05-17 13:43:09

In this article, I will explain from scratch in just 5 steps, How to Setup Azure Web app for Linux and publish your Angular application. You can also setup Azure DevOps Pipeline to setup continuous integration for automatic deployment of your app.

1. Create a new **App Service Plan. **If you have already created then skip this step. App service is like one container or a VM machine. In a single azure app service, you can host N no. of web apps. Based on the load you can split your apps to separate app services if required. To create a new app service. First, you need to set a resource group name if you already have created it, can use the same or else can create new. Next, fill the app service name, Select OS as Linux. and then select a pricing plan based on your needs and create.

**Note**: Selecting Linux is not necessary you can use Windows also. But, if Linux supports it why not use it, Linux App services are cheaper than Windows-based app services.

![](https://cdn-images-1.medium.com/max/2344/1*diQbE8lr9OKhIskuA8I7oA.png)

![](https://cdn-images-1.medium.com/max/2156/1*Bqy3n_ACvxX1c8Cw0UPXKw.png)

In a few minutes app will be deployed

![](https://cdn-images-1.medium.com/max/2952/1*9lQqHWVHBFzc4xoO-gKMgA.png)

**There is a free app service plan available for both Windows and Linux Azure app services**

[https://azure.microsoft.com/en-in/pricing/details/app-service/windows/](https://azure.microsoft.com/en-in/pricing/details/app-service/windows/)

**Linux**

![](https://cdn-images-1.medium.com/max/3704/1*3JgK4U-Ba7ghOID26tohNA.png)

**Windows**

![](https://cdn-images-1.medium.com/max/3396/1*ejWhW6feW901o5G8MnYirg.png)

2. In your app service. Select **TLS/SSL Settings. Change some parameters**

![](https://cdn-images-1.medium.com/max/2594/1*1kOVcJX8b5t4nRgrPLe7Ig.png)

3. Go to **Configuration -> General Settings**

Include **Startup Command **-> **node /home/site/wwwroot/server
**Also change **HTTP Version — 2.0**

![](https://cdn-images-1.medium.com/max/2398/1*MSRzIjYyemLUk5Sl94_7fg.png)

Now, your Azure app service is ready for deployment.

Next, few steps are related to **building your angular app in VS code** and publishing to App service using VS code App service extension.

**3. Download VS Code** if you don’t have and install **Azure App service extension**

Build your angular app

![](https://cdn-images-1.medium.com/max/2606/1*SRT7VtnMTeo5a6iT9YqEIA.png)

Click on Azure App service Extension. Initially it will ask for subscription details and your Azure Ad Login. Fill those details. Once filled all apps will be listed. Select your app and click **Deploy to Web app**

![](https://cdn-images-1.medium.com/max/2000/1*ATLnAluRCxJNPsXfX2V7cw.png)

4. Browse the dist folder where your angular app was published.

![](https://cdn-images-1.medium.com/max/2000/1*lqBuSY8BEvreHZb4dlt0iw.png)

![](https://cdn-images-1.medium.com/max/2000/1*SOPq_05Kx2qWf3bsdBgWTQ.png)

5. After selection click deploy — Deployment will start

![](https://cdn-images-1.medium.com/max/2000/1*pkAB2Wh6Q1jMIFzlCsF_KQ.png)

That’s all you can Browse the website. Your angular app is published to Azure Web app.

Next time, your configuration will be saved you can just click on dist folder and click deploy. Within minutes your Angular app will be published.

![](https://cdn-images-1.medium.com/max/2000/1*YQgV8GM6RhslEEuDF9Lolw.png)

You can also use **Azure DevOps pipeline** to automate this process.
https://dev.to/bharatdwarkani/how-to-publish-angular-app-to-azure-web-app-for-linux-ftp-using-azure-devops-pipelines-explained-from-scratch-o03


**Hope you find this article short and crisp. If you are interested in more such technical resource please visit my site** https://sharetechlinks.com/