AWS/Azure/OpenShift Version Control System (VSC)

How to deploy your Angular App to Azure from Visual Studio Code


This guide will show you how easy it is in deploying your angular app to azure right from your IDE-like visual studio code. The integration of Azure with VS Code is very seamless when you put the right things in place and you do the right thing. Azure is a public cloud computing platform from Microsoft. Some of the solutions it offers are infrastructure as a service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). This cloud solution provides you with computing, storage, networking capacity, and many more. Visual studio code is an integrated development environment software with a graphical user interface with different development tools that delight any developer.

Create an Azure Web Service in Azure Portal – Login to your Azure portal and click the “Create a resource” button and choose the Web App template. Here are some guides: How to create Windows 11 Bootable USB drive, How to fix Windows Task Scheduler Service Greyed Out in Services MMC, The term “git” was not used as the name of a cmdlet, function, script file, or executable Program recognized, Azure DevOps and GitHub integration for Docker and Kubernetes deployment, and how to build your first CI/CD Pipeline in Azure DevOps using ASP.Net Core Application, and GitLab-runner is not recognized as an internal or external command, operable program, or batch file.

Azure Portal

Select Web App as shown below

Creating your Azure resources

On the next page under your Azure subscription create a Resource Group.

Configure your instance details:

  • Give it a URL name
  • Select Code as the Publish
  • Select either Node 14 LTS or Node 12 LTS as the Runtime stack
  • Depending on your operating system select either Linus or Windows
  • Select Region

Configure your App Service Plan
Note: App Service plan pricing tier determines the location, features, cost, and computes resources associated with your app.

  • Create your windows Plan

Then Click Review + create and wait for the review page to open then click on Create and wait for some seconds for the Web App to be created.

Creating your Web App on Azure

Click on create as shown below

Creating your Web App on Azure

After the deployment, the Web App will be ready for use

Web App Deployment

It’s now time to create an Angular application using Angular CLI. Install Angular CLI by opening a terminal window and running the following command:

npm install –g @angular/cli
NPM installation via PowerShell

Then run the CLI command ng new and supply the name you want to use for the app.

ng new techdirectarchive

After the App is created then change the directory to the app folder and run the server in the app directory.

cd techdirectarchive
Angular App installation via PowerShell

Run the command “ng serve” as shown below.

ng serve
Angular App installation via PowerShell

After the creation of the Angular application, open it with Visual Studio Code.

You will also need to install the Azure App Service extension in VS Code.

Installation of Azure App Service Extension on VS Code

Sign in to Azure and you will see a new Azure workloads button at the bottom side. When the button is clicked you will see all the Azure workloads.

After signing in to the Azure portal from Visual Studio Code, you can see the list of available subscriptions and web apps for that user.

Azure with VS Code

Initially, we created a Web App “techdirectarchive” using a node runtime stack. It is very easy to deploy our Angular application to this Web App on Azure.

Before deploying to Azure, we must build our Angular app using the below command which will build the Angular project and will create all necessary files to a dist folder.

ng build --prod

But note that sometimes another subfolder may be created in the name of your project.

The Build Command

We must deploy this “dist\techdirectarchive” folder to Azure by right-clicking it and choosing the  Deploy to Web App option.

Deployment from VS Code to Azure

By default, it will display the default Angular project folder and make sure you select the correct folder.

Deployment from VS Code to Azure

Go ahead and open the application on the Azure web service

Angular App Deployed to Azure

Your Angular App is live on Azure. When you make any adjustment in the code you just need to deploy again. After every adjustment you must build the application again with the same command:

ng build –prod

After that select our Web App and choose the Deploy to Web App option in the visual studio code. You can reconfirm the Angular App again via Azure to see the changes.

Notify of

Inline Feedbacks
View all comments
1 year ago

An Angular app that does nothing!, how bout with a .net core api behind it

10 months ago

Many thanks for the article, it helped me a lot!

10 months ago
Reply to  Juan

You are welcome!

Would love your thoughts, please comment.x