AWS/Azure/OpenShift/Kubernetes Version Control System (VSC)

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

Angular-Azure

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, and 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 Web App template.
Create-a-resource
Azure Portal

Select Web App as shown below

web-app
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.

Create-web-app
Creating your Web App on Azure

Click on create as shown below

Create-web-app2
Creating your Web App on Azure

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

Create-web-app4
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
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
npm2
Angular App installation via PowerShell

Run the command “ng serve” as shown below.

ng serve
npm3
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.

extension
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.

ide
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.

prod
The Build Command

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

ide2
Deployment from VS Code to Azure


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

ide3
Deployment from VS Code to Azure

Go ahead and open the application on the Azure web service

azurewebsite2
azureweb
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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x