To the Cloud !
@john_papa
John Papa
Developer Advocate, Microsoft
Slide 2
Slide 2 text
Going to the cloud
is easier with great tooling
@john_papa
Slide 3
Slide 3 text
Optimize
@john_papa
Slide 4
Slide 4 text
Build
Optimize
@john_papa
Slide 5
Slide 5 text
Deploy
Build
Optimize
@john_papa
Slide 6
Slide 6 text
Building Angular
@john_papa
Slide 7
Slide 7 text
Scaffold a new Angular App
ng new my-app
@john_papa
Slide 8
Slide 8 text
Add routing
Set your prefix
Define your styles
Verify the flle names
This is just the beginning
ng new my-app --routing
--prefix ma
--style scss
--dry-run
Scaffold a new Angular App
@john_papa
Slide 9
Slide 9 text
$ ng build Development build
Consider the Personas When we Build
$ ng build --prod
--build-optimizer
Production builds
Minified, optimized, cache busting
@john_papa
Slide 10
Slide 10 text
Environment environment.prod.ts
ng build --prod --build-optimizer
Cache-busting all build files
Source maps not generated
Uglification yes
Bundling yes
environment.ts
ng build
only images referenced in css
generated
no
yes
Code Splitting yes
AOT yes
yes
no
Tree Shaking yes
no
@john_papa
Slide 11
Slide 11 text
The Angular CLI
makes production builds
smaller and faster
@john_papa
Slide 12
Slide 12 text
Tools to Analyze and Optimize
$ ng build --prod --stats-json
$ webpack-bundle-analyzer dist/stats.json
Generate webpack statistics
Analyze the statistics
Optimized build with source maps
Analyze the source
$ ng build --prod --sm
$ source-map-explorer dist/main.xxx.js
https://www.npmjs.com/package/source-map-explorer
https://www.npmjs.com/package/webpack-bundle-analyzer
@john_papa
Slide 13
Slide 13 text
Webpack Bundle Analyzer
Slide 14
Slide 14 text
CLI Deploy to Azure
@john_papa
Slide 15
Slide 15 text
@john_papa
Slide 16
Slide 16 text
Deploy the Node App to Azure
@john_papa
https://aka.ms/jp-vikings-azwebapp
$ az webapp new –n vikings-rule
Slide 17
Slide 17 text
Easy Deploy
@john_papa
Slide 18
Slide 18 text
Do the versions of Node
match, both locally and
in the cloud?
@john_papa
Slide 19
Slide 19 text
Automate
the build and deploy steps with
consistency and confidence
@john_papa
Slide 20
Slide 20 text
Debugging Node.js in Docker
with VS Code
@john_papa
Slide 21
Slide 21 text
Dockerfile
@john_papa
Slide 22
Slide 22 text
Dockerfile
1 Self contained script
@john_papa
Slide 23
Slide 23 text
Dockerfile
2
1
Provides a recipe for creating and running our app
Self contained script
@john_papa
Slide 24
Slide 24 text
Dockerfile
3
2
1
Configurable to adapt to different environments
Provides a recipe for creating and running our app
Self contained script
@john_papa
Slide 25
Slide 25 text
Sample Dockerfile
Sigh.
@john_papa
Slide 26
Slide 26 text
Generate Docker files
@john_papa
Slide 27
Slide 27 text
Generate Docker files
https://aka.ms/docker-code
VS Code can do that!
@john_papa
Slide 28
Slide 28 text
Multi-stage Docker files?
@john_papa
https://aka.ms/ng-essentials
Angular Essentials Extension for VS Code
Slide 29
Slide 29 text
Running Angular in Docker
Create Dockerfile
@john_papa
Slide 30
Slide 30 text
Running Angular in Docker
Build and Run
Create Dockerfile
@john_papa
Slide 31
Slide 31 text
Debug
Build and Run
Running Angular in Docker
Create Dockerfile
@john_papa
Slide 32
Slide 32 text
Debugging
Docker Apps
@john_papa
Slide 33
Slide 33 text
Get Your Docker Inside VS Code !
@john_papa
https://aka.ms/docker-code
Slide 34
Slide 34 text
Tag, Run, Push from VS Code
@john_papa
https://aka.ms/docker-code
Slide 35
Slide 35 text
To the Cloud!
@john_papa
Slide 36
Slide 36 text
Docker to the Cloud
Compose
@john_papa
Slide 37
Slide 37 text
Docker to the Cloud
Tag
Compose
@john_papa
Slide 38
Slide 38 text
Docker to the Cloud
Push
Tag
Compose
@john_papa
Slide 39
Slide 39 text
Docker to the Cloud
Push
Tag
Compose
Web App in
the Cloud
@john_papa