Deploying an Angular application on the Azure Web Service can be a pain if you don’t know from where to start.
This tutorial will consist of the following steps:
- Create an Azure Web Service
- Build the Angular application
- Configure the Web Service and deploy it
Let’s start with creating the Azure Web Service;
If you don’t have any account, you can sign up for free account and $200 dollars will be credit in your azure account to play with.
Login to your Azure Account.
Step: 1.1 Create a Web App
Click on Create a resource → Search Web App → Create
Give your application a unique name, you can leave the rest of the field as default. Service plan is the host where the application is going to be hosted. It has different plans for that but for our demo let it be the default.
Once it is created you can check your application in App Service blade or search for your application in the search bar.
Step 2.1: Build the angular application
ng build --prod
Once this command runs successfully, a
dist folder will be created in your application directory.
Now we’re ready to deploy our application.
It is worth reading the difference between
[ng build --prod](https://stackoverflow.com/questions/49065635/inconsistency-in-ng-build-vs-ng-build-prod).
Step 3.1 Open your Web App in Azure
There are multiple ways to go to your web app, here we’re using App Service click on it and then select your web app.
Click the URL — it is the URL where the application is hosted. By default, azure serve a default static page.
Search advanced tools in the web app search bar and click on
A Kudu window will open. To check the node version of the Web App supports click on Runtime Versions. At the time of writing this article, it is supporting node v8.11.1.
To learn more about how to install a specific version read this.
Step 3.2: Now go to CMD console under debug console and follow the below commands:
- Click site » wwwroot
- Go to Angular Application Folder, Open dist folder » angularDemoDeploy (In this case)
- Drag and drop this folder to the wwwroot folder (CMD console of Kudo)
- Delete the hostingstart.html
5. Go to Azure Web App and open Application Settings
6. In Virtual applications and directories change the physical path
from site\wwwroot to site\wwwroot\angularDemoDeploy and save.
here angularDemoDeploy is the name of the folder which you uploaded.
Hurray! The angular application is successfully deployed on Azure Web App. Go to your application URL and enjoy!
Thanks for reading! Any comments and suggestions are most welcome.