Upgrade to Pro — share decks privately, control downloads, hide ads and more …

deploying_angular.pdf

John Papa
March 02, 2018
18

 deploying_angular.pdf

John Papa

March 02, 2018
Tweet

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