$30 off During Our Annual Pro Sale. View Details »

deploying_angular.pdf

John Papa
March 02, 2018
39

 deploying_angular.pdf

John Papa

March 02, 2018
Tweet

Transcript

  1. To the Cloud !
    @john_papa
    John Papa
    Developer Advocate, Microsoft

    View Slide

  2. Going to the cloud
    is easier with great tooling
    @john_papa

    View Slide

  3. Optimize
    @john_papa

    View Slide

  4. Build
    Optimize
    @john_papa

    View Slide

  5. Deploy
    Build
    Optimize
    @john_papa

    View Slide

  6. Building Angular
    @john_papa

    View Slide

  7. Scaffold a new Angular App
    ng new my-app
    @john_papa

    View Slide

  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

    View Slide

  9. $ ng build Development build
    Consider the Personas When we Build
    $ ng build --prod
    --build-optimizer
    Production builds
    Minified, optimized, cache busting
    @john_papa

    View Slide

  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

    View Slide

  11. The Angular CLI
    makes production builds
    smaller and faster
    @john_papa

    View Slide

  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

    View Slide

  13. Webpack Bundle Analyzer

    View Slide

  14. CLI Deploy to Azure
    @john_papa

    View Slide

  15. @john_papa

    View Slide

  16. Deploy the Node App to Azure
    @john_papa
    https://aka.ms/jp-vikings-azwebapp
    $ az webapp new –n vikings-rule

    View Slide

  17. Easy Deploy
    @john_papa

    View Slide

  18. Do the versions of Node
    match, both locally and
    in the cloud?
    @john_papa

    View Slide

  19. Automate
    the build and deploy steps with
    consistency and confidence
    @john_papa

    View Slide

  20. Debugging Node.js in Docker
    with VS Code
    @john_papa

    View Slide

  21. Dockerfile
    @john_papa

    View Slide

  22. Dockerfile
    1 Self contained script
    @john_papa

    View Slide

  23. Dockerfile
    2
    1
    Provides a recipe for creating and running our app
    Self contained script
    @john_papa

    View Slide

  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

    View Slide

  25. Sample Dockerfile
    Sigh.
    @john_papa

    View Slide

  26. Generate Docker files
    @john_papa

    View Slide

  27. Generate Docker files
    https://aka.ms/docker-code
    VS Code can do that!
    @john_papa

    View Slide

  28. Multi-stage Docker files?
    @john_papa
    https://aka.ms/ng-essentials
    Angular Essentials Extension for VS Code

    View Slide

  29. Running Angular in Docker
    Create Dockerfile
    @john_papa

    View Slide

  30. Running Angular in Docker
    Build and Run
    Create Dockerfile
    @john_papa

    View Slide

  31. Debug
    Build and Run
    Running Angular in Docker
    Create Dockerfile
    @john_papa

    View Slide

  32. Debugging
    Docker Apps
    @john_papa

    View Slide

  33. Get Your Docker Inside VS Code !
    @john_papa
    https://aka.ms/docker-code

    View Slide

  34. Tag, Run, Push from VS Code
    @john_papa
    https://aka.ms/docker-code

    View Slide

  35. To the Cloud!
    @john_papa

    View Slide

  36. Docker to the Cloud
    Compose
    @john_papa

    View Slide

  37. Docker to the Cloud
    Tag
    Compose
    @john_papa

    View Slide

  38. Docker to the Cloud
    Push
    Tag
    Compose
    @john_papa

    View Slide

  39. Docker to the Cloud
    Push
    Tag
    Compose
    Web App in
    the Cloud
    @john_papa

    View Slide

  40. Docker to the
    Cloud
    @john_papa

    View Slide

  41. Key Points
    3
    2
    1
    @john_papa

    View Slide

  42. Key Points
    JavaScript CLIs optimize the builds
    3
    2
    1
    @john_papa

    View Slide

  43. Key Points
    Docker makes it run “everywhere”
    JavaScript CLIs optimize the builds
    3
    2
    1
    @john_papa

    View Slide

  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

    View Slide

  45. Great Tools Make
    Deployment You Better
    @john_papa

    View Slide

  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

    View Slide