Deploying Angular to Azure

#GlobalAzureBootcamp #GlobalAzureBootcampIndore

and mention @indoretechcomm

Pankaj P. Parkar

Technical Lead

Synerzip Softech India PVT LTD

• Microsoft MVP (3 times)

• Angular GDE

• Opensource Contributor

• Stackoverflow Topuser for Angular and AngularJS

• 100k+ reps on Stackoverflow

• Community Contributor

About Me!

@pankajparkar

Angular Terminology

Angular 1.x = AngularJS  

Angular 2+ = Angular     

@pankajparkar

Angular

• Platform independent
• Speed and performance
• Incredible tooling support
• Everything out of the box.
• Seamless version upgrades
• Trust factor
• Adaptive to upcoming web standard
• Use Angular outside Angular (AE)
• IVY Renderer(opt-in state)

Platform Independent

• Works on Mobile and Desktop
• Framework has considered mobile-friendly approach, so that it can work smoother on mobile as well. 
• Native Script for native application development

@pankajparkar

Speed and Performance

• Super fast change detection mechanism to update bindings on the page.
• AOT mode helps to ship less bytes of code to the client machine
• Angular Universal can be used for Server Side Rendering 

@pankajparkar

Incredible Tooling in place

• Typescript:  static typing, modularity. 
• Angular CLI - Command based interface, helps to create things by simple commands.
• Incorporated all the best practices.

@pankajparkar

• Full fledge production ready application
• RxJS - Reactive (async) Programming paradigm

Angular Packages

Seemless Upgrades using CLI

@pankajparkar

• Upgrade Angular app using simple command

• Angular material commands directly add whole stuff just by firing below command

 Trust Factor

• used at Google on 600+ project
• Any new changes, are deployed to this 600+ projects and verified internally before shipping new versions to audience.

@pankajparkar

Highly modularize and maintainable code

@pankajparkar

Source: https://angular.io

Adaptive to upcoming Web Standard

• Angular supports web-component out of the box
• Angular Components can be easily use outside of Angular using Angular Elements API
• Ivy Render: Will help to ship less number of bytes to client box, this will improve boot up performance

@pankajparkar

Local Deployment

• Create package using webpack
• Host this code and some port

• Run it locally for debugging 
• We ensures code would work on hosted environment. 

What is hosting?

Web hosting is a service that allows organizations and individuals to post a website or web page onto the Internet.

Source:- website.com

• It can be hosted on publicly accessible server
• Azure will be best option to deploy these days

Let's Make Angular application prod ready

Prod read Angular bundles

Deployment Philosophy

Create build Package

@pankajparkar

Deploy Angular on Azure

1. Azure Pipeline
2. Using Docker

@pankajparkar

Azure

• Cloud Computing Service 
• Different features.
  • building
  • testing
  • deploying
  • managing applications and services
  • etc...

@pankajparkar

Azure Pipeline

@pankajparkar

Using Docker

(skipping)

@pankajparkar

Take away

1. Optimize angular application before deploy
2. Azure makes CI / CD easier
3. You can also do containerise build using docker

@pankajparkar

@pankajparkar

References

@pankajparkar