Stop Worrying and Let the Robot Publish to NPM

Managing and Automating Package Testing and Releases

For CascadiaJS 2020

https://github.com/evantahler/cascadiajs

Transcript

1. Stop Worrying and Let the Robot Publish to NPM Managing and Automating Package Testing and Releases @evantahler - Grouparoo
2. INTRODUCTION
3. THE PROBLEM Release Management is Hard for packages that other people depend on
4. @evantahler
5. HUMANS WORKING TOGETHER
6. 02 Metaphors How can we apply the best ideas about deployment and release management to our NPM packages?
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)
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
9. Bad Releases are a failure of testing
10. GIT FLOW
11. Git Flow Integration
12. Git Flow Integration Branch Release Branch
13. Git Flow
Feature Branch Integration Branch Release Branch
14. Git Flow Feature Branch For Developers Integration Branch For PMs & Leads Release Branch For Users
15. What does Git Flow look like with Build Artifacts?
16. NPM FLOW? (™) BUILD 01 TAG 02 TEST 03 PUBLISH 04
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
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
19. Metaphors GIT FLOW Git Branches NPM FLOW NPM Tags Example Projects #next tag #latest tag CI/CD Review Apps Staging Server Production Deploy
20. 03 DEMO
21. https://github.com/evantahler/cascadiajs
23. TAGS !== VERSIONS The key to understanding NPM releases
26. 04 AUTOMATION 5 weird tricks so you’ll never type `npm publish` again!
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”
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”
29. IGNORE DIST, PUBLISH DIST .gitignore
30. IGNORE DIST, PUBLISH DIST .npmignore .gitignore
31. `NPM VERSION` ON CI AND BACK AGAIN Integration Branch v0.9.0-alpha.1 v0.9.0-alpha.2
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
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
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
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
36. DEPLOY A TEST APP THAT USES `NEXT` Stable App
37. DEPLOY A TEST APP THAT USES `NEXT` Stable App Test App
38. `NPM VERSION` For Stable Releases Integration Branch Stable Branch
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
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
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
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
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