Build a Modern JS Project - #12 Publish to GitHub Pages & NPM
Hey guys, in this final episode we are going to create our very first release, publish the package on NPM, and deploy Storybook to GitHub pages. This is going to be a closing video for the playlist, and we've got quite a few things lined up, so let's get into it!
First, we already have a nifty component playground that we can show off to the public. With Storybook, we can build our project into static assets that we can then publish to any host (Now, Netlify, Surge, etc.). Since it's an open source project, let's deploy it to GitHub Pages. This doesn't cost anything and only takes a minute to set up with gh-pages https://www.npmjs.com/package/gh-pages
Next, we will create our first release. We should first commit any left-over changes to make sure they go into the release. Then we tag from the master branch and push the new tag. Once the tag is up, we can log in to GitHub and add release notes. Simple enough.
With NPM, it's a bit trickier. First, we need to make sure that we either add a "files" field in package.json https://docs.npmjs.com/files/package.... or create an .npmignore file https://docs.npmjs.com/misc/developers The former is easier in our case, since we only want to include the dist folder. Other files, including package.json, readme, changelog, etc. are included implicitly.
Then, you'd need to sign up on NPM and log in from your terminal using npm adduser/login. You can always check if you're signed in using npm whoami https://docs.npmjs.com/cli/whoami.html From there, don't forget to build your library. To save your future self, be sure to also add a prepublishOnly script with the build command in it https://docs.npmjs.com/misc/scripts
Finally, once ready, version the package (following semver https://semver.org/) and publish it to the registry. Feel free to then verify the package with npm info. The video should illustrate every step, but if you need more guidance, look no further than this article https://medium.freecodecamp.org/how-t...
At the end, we'll close off with the readme. If you enjoyed this series, let me know, and I might come back to it with follow-up videos, e.g. about prop types or tree shaking. Be sure to leave a comment as to which topics you'd want covered. That's it for now! See you around.
See the final project on GitHub https://github.com/alex996/react-css-...
Watch video Build a Modern JS Project - #12 Publish to GitHub Pages & NPM online without registration, duration hours minute second in high quality. This video was added by user Code Realm 12 March 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 22,64 once and liked it 25 people.