Angular 5 continues deployment to Azure App services using GitHub

In today Agile tech industry clients want zero downtime and quick turn around time from dev to prod, with more these process integration like continues development to continues deployment and so on.. (other DevOps process). With these process automation, each team Dev/Testing/QA/Admin all can perform their role easily and independently without any flow caveat till deployment and finally customer is happy 😊

Microsoft Azure has this capability in-build without and additional cost and it supports multiple cloud supported repos. out of which GitHub is also supporting this integration which is widely used by the opensource community.

Steps for Angular 5 continues deployment using GitHub

On the high-level, we need perform below steps
  1. ng build --prod --aot
  2. install kudu support
  3. update .cmd file using kudo script
  4. Commit to GitHub branch.
  5. Done! Check the portal.

What is --AOT angular 5

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. - Angular.io

Why --aot 

So basically, this will compile HTML and TypeScript code during the build time and hence increase in application performance rite from it's initial load time and app functionality. cause browser always gets pre-compile code version which it can render immediately.

What is Kudu

Kudu is the cloud service to build/deploy and explore azure websites

1. Build: 

ng build --prod this is always better before deploying so that we can identify and package time error.


2. Install Kudu Script:

npm install kuduscript –g  This will install kudu package globally. Then, kuduscript -y --node this will create two files .deployment and deploy.cmd files.

3. Edit deploy.cmd file:

Simply copy the below code and update in your deploy.cmd file


4. Miscellaneous setup:

Go to package.json and update below portions 

"scripts": {
"ng": "ng",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build": "ng build --prod --aot"
}

Add web.config file

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Update .angular-cli.json file

"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets/data",
"favicon.ico",
"web.config"
],
...

4. Comit to GitHub

Finally commit to your configured branch.

5. Check the Azure Portal

Browse your site after tick mark.

-Ratsub

Related Links:

Comments

Post a Comment

Enter your comments..

Popular posts from this blog

Secure When a HTTP request is received Power Automate a.k.a MS Flow

People picker Control in PowerApps

Upload attachment to SharePoint list item using Microsoft Flow

Approval and auto escalation with time out in Microsoft Flow

Modern page provisioning using page template

Headless-Daemon calling AAD secured API

Developing custom reusable components in PowerApps

Step-By-Step Azure AD App Registration

HTML field & Date Time formatting in powerapps

Create and configure custom connectors for PowerApps and MSFlow from AzureFunctions