Build and Deploy Angular App to Azure from Github via KuduScript

Hi Friends,

In this section, I thought to share deploying any app to Azure via Github. Building app and pushing the same on Git is no brainier. But, deployment on Azure is bit tricky here.

Therefore, let’s see the same in action.

Once project gets created, then we can go into that project and cross check once, whether its running fine or not.

Now, let us go ahead and create git repo for the project.

Now, let’s go ahead and create web app.

Once site gets created successfully, same can be navigated https://ng-5-git-azure.azurewebsites.net/ .

Now, we can set deployment options as shown like below.

Here, my Git credentials are already setup.

Here, I have chosen, my latest created project from GIT. Let’s optimize the project before deployment by using ng build –prod.

This will create dist folder, which needs to be deployed in production.

Now, let’s push the code in git.

At this time, when I see Deployment options, it will start deploying.

Once the deployment gets completed, it will show like

At this stage, if I see the site, it will come like

This happened because Azure doesn’t know how to serve angular app. This is the place, where we need to do custom changes. Therefore, here we need to use custom deployment script generator. For this, kuduscript comes to rescue. This will simplify the whole process. Therefore, for installing the same, we can use npm install kuduscript -g.

Now, for deploying it as node backend, we need to say kuduscript -y –node. Upon executing this command, it created below two files.

Now, deploy.cmd will tell azure how to run angular app. Below, I have pasted the snippet here.

Here, Kudusync will copy the files from source folder to target folder. But first let’s understand the folder structure in azure. For that, we need to click on console link as shown below. Here, we can see the angular files gets pulled in from GIT. However, if we go one folder up, we can see that there is a repository folder as well.

Now, let’s see what is there inside repository folder. Therefore, whenever we commit anything on GIT, it will pull everything from GIT and push the same in repository folder.

Now, Kudusync will copy all the files from repository folder to wwwroot folder. Therefore, I am going to do ng build in repository folder and then push the same in wwwroot folder. Below is the modified script of deploy.cmd.
Now, need to adjust few dependencies in package.json file.

Here, I have moved angular cli and typescript in dependencies section. Also marked ng build with prod flag. Now, let’s push the changes. Once changes pushed to github, it triggered build. We can see the logs as well. Here, you can see detail logs as well if you want by clicking on View Log. At this instant, when we refresh the site https://ng-5-git-azure.azurewebsites.net/, it will show that correctly. However, at this instant routing won’t work in azure as IIS won’t know how to handle the routes. For that URL Re-write rules need to implemented.
After this, we also need to include web.config in assets directory in .angular-cli.json file.

With that being said, I will again check-in the components, then it will queue the build again.