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.
Select Web App as shown below
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.
Click on create as shown below
After the deployment, the Web App will be ready for use
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
Then run the CLI command ng new and supply the name you want to use for the app.
ng new techdirectarchiveAfter the App is created then change the directory to the app folder and run the server in the app directory.
cd techdirectarchive
Run the command “ng serve” as shown below.
ng serve
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.
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.
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 --prodBut note that sometimes another subfolder may be created in the name of your project.
We must deploy this “dist\techdirectarchive” folder to Azure by right-clicking it and choosing the Deploy to Web App option.
By default, it will display the default Angular project folder and make sure you select the correct folder.
Go ahead and open the application on the Azure web service
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 –prodAfter 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.
