How To Deploy An Angular Application Using Visual Studio Code

In this article, we are going to see a simple and easy way to deploy an Angular application using Visual Studio Code IDE. We need to create a web app service using Azure Portal. While creating an app service we need to follow the Configurations and your App Service Plan pricing tier determines the location, features, cost, and computer resources associated with your app.

Once logged in to the Azure portal home page. Please click App Services --> Create menu to create a new app service. 

In the new app creating section, we need to mention all the configurations and settings, including subscriptions, resource groups, region, and app service plans. Please refer to the below image.

Once entered all the information please click Review + create button to review the information and create the app service. 

Here I have mentioned the app service name like testangularsat. Once I created the app service successfully next create an angular application using Angular CLI. 

Install Angular CLI by opening a command prompt and following the below command. 

npm install –g @angular/cli 

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

ng new testangularsat 

After the Application is created then change the path directory to the app folder and run the server in the application using the command. 

cd testangularsat 

Please run the command ng serve --open or ng serve-o or npm start 

Next, I am going to add and install the Azure App Service extension in Visual Studio Code. Open the VS Code and open the project folder path. 

In VS code search Azure App Service and install. 

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. 

The above command will build our Angular project and create all deliverable files to a dist folder. 

ng build --prod 

We need to deploy this “dist\testangularsat” folder files to Azure App Services. right-click and choose the option Deploy to Web App, please refer below image. 

After choosing the web app a command popup will be shown on the right. Click on Browse and choose “dist\testangularsat” folder under your application. 

After selecting you just need to authenticate your Azure account and select the specific app service. Here I have selected testangularsat service. 

You will see a few prompts and notifications. Select Yes on the “Are you sure you want to deploy…” dialog to overwrite any previous deployments you may have done to your Azure Web App. 

Once the deployment is complete, you will receive a notification with a convenient button to browse the site. 

When you make any changes to the code you just need to deploy it again. After every code change, you must build the application again with the same command using ng-build –prod. 

Again, 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. 

Here I have added the text version 1. and You will see the changes in the deployed app service again. 

I hope this article was helpful for you.