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

Stop Worrying and Let the Robot Publish to NPM

Evan Tahler
September 02, 2020

Stop Worrying and Let the Robot Publish to NPM

Managing and Automating Package Testing and Releases

For CascadiaJS 2020

https://github.com/evantahler/cascadiajs

Evan Tahler

September 02, 2020
Tweet

More Decks by Evan Tahler

Other Decks in Technology

Transcript

  1. Stop Worrying and
    Let the Robot Publish to NPM

    Managing and Automating Package Testing and Releases
    @evantahler - Grouparoo

    View Slide

  2. INTRODUCTION

    View Slide

  3. THE PROBLEM
    Release Management is Hard for packages that other people depend on

    View Slide

  4. @evantahler

    View Slide

  5. HUMANS WORKING TOGETHER

    View Slide

  6. 02 Metaphors
    How can we apply the best ideas about deployment and release management to our NPM packages?

    View Slide

  7. CONTINUOUS INTEGRATION & CONTINUOUS DEPLOYMENT
    CI - Merge back to the ‘integration branch’ often
    Small units of work
    Tests to know that the feature is done & that it will continue to work
    CD - Deploy the ‘integration branch’ often
    Allows for ‘human’ testing and acceptance
    The real ‘end-to-end’ testing of the work
    Determines if the work can go to users (production)

    View Slide

  8. CONTINUOUS INTEGRATION & CONTINUOUS DEPLOYMENT
    CI - Merge back to the ‘integration branch’ often
    Small units of work
    Tests to know that the feature is done & that it will continue to work
    CD - Deploy the ‘integration branch’ often
    Allows for ‘human’ testing and acceptance
    The real ‘end-to-end’ testing of the work
    Determines if the work can go to users (production)
    Testing Builds Confidence

    View Slide

  9. Bad Releases are a failure of testing

    View Slide

  10. GIT FLOW

    View Slide

  11. Git Flow
    Integration

    View Slide

  12. Git Flow
    Integration Branch
    Release Branch

    View Slide

  13. Git Flow
Feature Branch
    Integration Branch
    Release Branch

    View Slide

  14. Git Flow
    Feature Branch
    For Developers
    Integration Branch
    For PMs & Leads
    Release Branch
    For Users

    View Slide

  15. What does Git Flow look like with Build Artifacts?

    View Slide

  16. NPM FLOW? (™)
    BUILD 01
    TAG 02
    TEST 03
    PUBLISH 04

    View Slide

  17. NPM FLOW! (™)
    Feature Branch
    v1.0.0-feature.0
    Integration Branch
    v0.9.0-alpha.1
    v0.9.0-alpha.2
    v1.0.0-alpha.0
    v1.0.0-alpha.1
    Stable Branch
    v0.9.0
    v1.0.0

    View Slide

  18. NPM FLOW! (™)
    Feature Branch
    v1.0.0-feature.0
For Package Developers

    Integration Branch
    v0.9.0-alpha.1
    v0.9.0-alpha.2
    v1.0.0-alpha.0
    v1.0.0-alpha.1
For Testers

    Stable Branch
    v0.9.0
    v1.0.0
For Package Consumers

    View Slide

  19. Metaphors
    GIT FLOW
    Git Branches
    NPM FLOW
    NPM Tags
    Example Projects
    #next tag
    #latest tag
    CI/CD

    Review Apps
    Staging Server
    Production Deploy

    View Slide

  20. 03 DEMO

    View Slide

  21. https://github.com/evantahler/cascadiajs

    View Slide

  22. View Slide

  23. TAGS !== VERSIONS
    The key to understanding NPM releases

    View Slide

  24. View Slide

  25. View Slide

  26. 04 AUTOMATION
    5 weird tricks so you’ll never type `npm publish` again!

    View Slide

  27. `NPM PREPARE` LIFECYCLE HOOK
    “Run both BEFORE the package is packed and published, on local npm install without any arguments, and when installing git dependencies (See below). This is run AFTER prepublish, but BEFORE prepublishOnly”

    View Slide

  28. `NPM PREPARE` LIFECYCLE HOOK
    “Run both BEFORE the package is packed and published, on local npm install without any arguments, and when installing git dependencies (See below). This is run AFTER prepublish, but BEFORE prepublishOnly”

    View Slide

  29. IGNORE DIST, PUBLISH DIST
    .gitignore

    View Slide

  30. IGNORE DIST, PUBLISH DIST
    .npmignore
    .gitignore

    View Slide

  31. `NPM VERSION` ON CI AND BACK AGAIN
    Integration Branch
    v0.9.0-alpha.1
    v0.9.0-alpha.2

    View Slide

  32. `NPM VERSION` ON CI AND BACK AGAIN
    Custom NPM Version Commands:
    npm version prepatch --preid=alpha --message “[no ci] new version!!!”
    Based on the Branch Name or Feature

    View Slide

  33. `NPM VERSION` ON CI AND BACK AGAIN
    Custom NPM Version Commands:
    npm version prepatch --preid=alpha --message “[no ci] new version!!!”
    Based on the Branch Name or Feature
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Generate a NPM Auth Token on npmjs.org

    View Slide

  34. `NPM VERSION` ON CI AND BACK AGAIN
    Custom NPM Version Commands:
    npm version prepatch --preid=alpha --message “[no ci] new version!!!”
    Based on the Branch Name or Feature
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Generate a NPM Auth Token on npmjs.org
    Push to NPM: npm publish --tag alpha
    Or use custom tags for your branch

    View Slide

  35. `NPM VERSION` ON CI AND BACK AGAIN
    Custom NPM Version Commands:
    npm version prepatch --preid=alpha --message “[no ci] new version!!!”
    Based on the Branch Name or Feature
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Generate a NPM Auth Token on npmjs.org
    Push to NPM: npm publish --tag alpha
    Or use custom tags for your branch
    Push the new version back to Git: git push && git push --tags
    Only on the Integration Branch
    Make sure CI has access to Git. You can usual use a commit message [no ci] to prevent loops

    View Slide

  36. DEPLOY A TEST APP THAT USES `NEXT`
    Stable App

    View Slide

  37. DEPLOY A TEST APP THAT USES `NEXT`
    Stable App
    Test App

    View Slide

  38. `NPM VERSION` For Stable Releases
    Integration Branch
    Stable Branch

    View Slide

  39. PRODUCTION === STABLE BRANCH
    When on the Stable Branch:

    Make a new ‘release’ tag: npm version patch
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Push to NPM: npm publish --tag latest (or skip the --tag)
    Push the new version back to Git: git checkout master && git rebase stable && git push && git push --tags

    View Slide

  40. PRODUCTION === STABLE BRANCH
    When on the Stable Branch:

    Make a new ‘release’ tag: npm version patch
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Push to NPM: npm publish --tag latest (or skip the --tag)
    Push the new version back to Git: git checkout master && git rebase stable && git push && git push --tags
    human discretion here

    View Slide

  41. PRODUCTION === STABLE BRANCH
    When on the Stable Branch:

    Make a new ‘release’ tag: npm version patch
    Grant CI Access to NPM: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
    Push to NPM: npm publish --tag latest (or skip the --tag)
    Push the new version back to Git: git checkout master && git rebase stable && git push && git push --tags
    human discretion here
    Or maybe semantic-release

    View Slide

  42. View Slide

  43. NPM FLOW! (™)
    Feature Branch
    v1.0.0-feature.0
For Package Developers

    Integration Branch
    v0.9.0-alpha.1
    v0.9.0-alpha.2
    v1.0.0-alpha.0
    v1.0.0-alpha.1
v1.0.1-alpha.0
    v1.0.1-alpha.1
    v1.0.2-alpha.0
For Testers

    Stable Branch
    v0.9.0
    v1.0.0
v1.0.1
For Package Consumers

    View Slide

  44. Stop Worrying and
    Let the Robot Publish to NPM
    
Thank You
    All my Co-workers & Grouparoo
    SlidesGo, Flaticon, Freepik
    BenSound.com
    Unsplash
    Carbon.now.sh
    NPM (Sorry!)
    Code: github.com/evantahler/cascadiajs

    View Slide