deploying_angular.pdf

Transcript

1. To the Cloud ! @john_papa John Papa Developer Advocate, Microsoft
2. Going to the cloud is easier with great tooling @john_papa
3. Optimize @john_papa
4. Build Optimize @john_papa
5. Deploy Build Optimize @john_papa
6. Building Angular @john_papa
7. Scaffold a new Angular App ng new my-app @john_papa
8. 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
9. $ ng build Development build Consider the Personas When we Build $ ng build --prod --build-optimizer Production builds Minified, optimized, cache busting @john_papa
10. 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
11. The Angular CLI makes production builds smaller and faster @john_papa
12. 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
13. Webpack Bundle Analyzer
14. CLI Deploy to Azure @john_papa
15. @john_papa
16. Deploy the Node App to Azure @john_papa https://aka.ms/jp-vikings-azwebapp $ az webapp new –n vikings-rule
17. Easy Deploy @john_papa
18. Do the versions of Node match, both locally and in the cloud? @john_papa
19. Automate the build and deploy steps with consistency and confidence @john_papa
20. Debugging Node.js in Docker with VS Code @john_papa
21. Dockerfile @john_papa
22. Dockerfile 1 Self contained script @john_papa
23. Dockerfile 2 1 Provides a recipe for creating and running our app Self contained script @john_papa
24. Dockerfile 3 2 1 Configurable to adapt to different environments Provides a recipe for creating and running our app Self contained script @john_papa
25. Sample Dockerfile Sigh. @john_papa
26. Generate Docker files @john_papa
27. Generate Docker files https://aka.ms/docker-code VS Code can do that! @john_papa
28. Multi-stage Docker files? @john_papa https://aka.ms/ng-essentials Angular Essentials Extension for VS Code
29. Running Angular in Docker Create Dockerfile @john_papa
30. Running Angular in Docker Build and Run Create Dockerfile @john_papa
31. Debug Build and Run Running Angular in Docker Create Dockerfile @john_papa
32. Debugging Docker Apps @john_papa
33. Get Your Docker Inside VS Code ! @john_papa https://aka.ms/docker-code
34. Tag, Run, Push from VS Code @john_papa https://aka.ms/docker-code
35. To the Cloud! @john_papa
36. Docker to the Cloud Compose @john_papa
37. Docker to the Cloud Tag Compose @john_papa
38. Docker to the Cloud Push Tag Compose @john_papa
39. Docker to the Cloud Push Tag Compose Web App in the Cloud @john_papa
40. Docker to the Cloud @john_papa
41. Key Points 3 2 1 @john_papa
42. Key Points JavaScript CLIs optimize the builds 3 2 1 @john_papa
43. Key Points Docker makes it run “everywhere” JavaScript CLIs optimize the builds 3 2 1 @john_papa
44. VS Code tooling makes it all easier Key Points Docker makes it run “everywhere” JavaScript CLIs optimize the builds 3 2 1 @john_papa
45. Great Tools Make Deployment You Better @john_papa
46. https://github.com/johnpapa/vikings https://aka.ms/ng-essentials https://aka.ms/vsc-node https://aka.ms/jp-viking-azdeploy https://aka.ms/jp-free @john_papa