Create TypeScript based NPM Packages with CI/CD Automatic Publishing Through Github Actions

hey everybody today we're gonna continue on the typescript train and learn how to publish an npm module not only with typescript but also with your ci cd workflow setup for anyone who doesn't know that is know what that is it's when you push to master everything gets deployed all right um we want a little bit more control than that so we'll have one tiny little ui based action around when we actually publish our npm package but today you get to the end of this video you're going to be able to set up again a typescript npm module that can be used by any node.js anybody who's running node.js so any node.js developer will be able to pull this in even if they know nothing about typescript you will have actually done them some favors by using typescript though and then not only that when you publish changes to your package you're going to be able to very quickly and easily publish it to the world very very very easily all right um so let's get started and figure out what we're gonna use today so i came across this really really interesting bundler um and it's actually called tsdx and it installs everything for you right so pretty cool and what it what it will do once you have everything installed as it sets up your whole project it sets up some github actions for you already which is how we're going to do our ci cd environment and then on top of that it will give you a nice folder structure a basic prettier setup and some auto formatting it will give you your build process as well as all of your output files ready and set up to publish to npm all right let's get started all right so let's pop into our terminal here and we have a few dependencies that you're going to need today so uh i'll be using node.js right so you can check what version i'm using 14.12. i'm going to set up an npm package that's actually capable of publishing for versions of node 12 and 14 i'm leaving off 10 why because it's almost march and end of life for node.js 10 lts version is in april so i'm not interested in supporting a node package for one month for a version of node that's going away forever right um so we're doing node 12 and node 14 and you'll see what i mean uh in a second by that right so let's see the next thing we need to do is get that nice tsdx library um so we're going to install that with npmi g tsdx now it looks like everything's installed uh pretty good and already had it installed yours yours might say a few different things here that's okay all right so then the next thing we need to do is tsdxcreate um and then we're just gonna say um my library to publish all right now it gives you the option of a couple templates here i'm going to choose basic but if you're a react developer and you're familiar with storybook it has one of those out the bat for you which is pretty useful um and then it does have just a react as well so you could you could actually build a you know reusable react npm library and it's really good at getting you set up for that in typescript um but i'm just going to do basic i expect users of my package to use this just in any node.js backend app or you know little script that they write and so you'll see it actually takes a second because it's got to install everything too it doesn't just give you your nice folder structure so we see a couple of things on the screen here typescript probably an interesting one is husky so it actually husky is get commit hooks or excuse me git hooks so that when somebody's contributing to your project which a lot of people contribute to a lot of node modules out there when somebody's contributing to it it will actually run your rules like your lending rules and when you push it will run your build so it attempts to stop people from pushing broken commits or commits that don't conform to your lending rules into pull requests so it kind of handles that for you so you don't have to go you know when you're reviewing prs into your awesome npm module that you created as a result of this you don't have to spend your time reviewing prs for formatting uh overly opinionated rules things like that this library gets you all set up exactly how you want all right so let's dive into the code of this library so that you can see exactly what it gives you all right so you see we've got some a test and then we see we have our very simple file alright so uh it's a single function that adds two numbers and if you're in development mode it says console.log boop okay um so let's just take a look at our little commands here and so that you can actually see what you're gonna what you're gonna run all right i'm gonna make this just a little bit bigger okay all right so you can do a npm run build which is pretty cool it says tsdx build and it will actually finish that process and what it does is it just creates your entry file and it bundles your modules it tells you how long the build uh takes and then there's a couple of warnings uh plug and replace prevent assignment that we're not too worried about right now those are just some defaults that you can you can kind of get into the weeds with that if you want um no real concern on my end and so let's let's check out the assets that it gave us right so it gives typescript types file but it actually builds it in javascript which is great for all consumers of our library that way they don't have to care about typescript to use this okay and then lastly it gives the if it's in the production environment it actually dynamically loads a production bundle of it so you could bundle up different assets for your development flow if you want i'm actually not a huge fan of this i like it when things are you know assume running that you're running in production and then maybe do something different for development not the other way around right because now everyone has to uh depend on this so what i would prefer and i haven't looked into how to do this yet is that it always runs the production bundle unless node emv is set to development all right so maybe we can see about flipping that around at the end but for now we just want to get something published and get it taken care of alright so we have this github action over here right so if you take a look at what it's going to do is the first thing is it's going to set up your build process to just make sure that this app actually builds and the tests successfully run on the net versions of node.js specified so this is matrix and then uh the operating systems that it's going to be successful on as well we do want to support those it's going to check them out it's going to run the lint and the test scripts and then lastly it's going to build all right the next thing that it's going to do is in parallel it's also going to just run a quick size check all right and if if the bundle is too big it's actually going to fail the build so with that being the case let's uh let's add a third github action to actually say how we're going to publish this package to npm and we're also going to set up a github repo all right so let's get started with that all right so i've used a similar github action for this before so i'm just going to make another yaml file in here and call it publish.yaml and then i'm going to go ahead and just paste this in and i'll be honest this is what i always do when i'm building github actions because i use them but not all the time all right i have to do this like maybe once every couple months and every time i do i have to look it up anyways and so what i'm gonna do is just use the one that i already know works correctly all right so here we go you have a name for the action you have the trigger to set up so i want to say when i actually publish this and so what does that mean that means when i actually create a release in github and i'll show you how that works and so we're still going to do install build test and then we're going to run publish and we're going to use an npm access token an automation access token to do that all right so next let's set up a repository and so we'll do um a new library here it's going to be public we're going to say my awesome package test okay and then we're just gonna create the repo give me one sec here and just refresh and it looks like everything got pushed up okay so look at that let's look at our actions all right so what you see here is a matrix build right and because it's a matrix so you have it has to run on node 12 ubuntu windows and mac and node 14 ubuntu windows and mac and hopefully since we just used the uh boilerplate that tsdx gives us those all actually pass all right so we're gonna we're gonna hope for the best there all right and so while our actions are running here we're gonna go ahead and create what we need um in the mpn side to make sure we have what we need to publish all right so you're going to log into your hopefully you have a npm js account so then you just want to go to your profile and get to your access tokens right and you're not going to be able to see these and i'm not i'm going to blow this one away that i'm recording uh after this video so you can try to steal it and use it if you want but it's probably not gonna help you much all right so we're not gonna do read only we actually want automation okay automation means that we'll bypass our two-factor auth so it's a little less secure if you don't hang on to it right all right but you can hang on to it something like lastpass i'm actually just gonna copy and paste mine straight into github and then never worry about it again all right because then i'm not storing it anywhere on my machine github is storing it and npm is storing it so you can give that a shot if that works for you that's good enough for me at work you might have to do something a little different all right so it once you click on it it'll actually copy it to your clipboard for you and after this uh page it will you know never uh be visible again through the ui all right so we'll go to github let me just double check my action what i called it npm token so you can go into your github and settings for this repository and then you go to secrets and i'm just going to say new repository secret and that's npm token paste that in oops and then add that secret so now my github action will actually have the ability to do that okay so pretty cool let's go check on our actions still running like i said the matrix builds do take a while so let's switch back over to our actual repository and make just a little change okay so over in the package.json file you can see we have version 0.1 we'll do npm version patch and then you see it actually made that change right up here and it already committed it and so we'll just do a get push alright and that should have pushed it up so let's go ahead and check back on our ci cd pipeline look at that they're all passed except for once all right you can get colors in here too if you pass like dash dash colors in your package.json script so where it says like tsdx build and test if you if you do dash colors it'll it'll send some colors i'm not too worried about it alright so those built so we got our new version as latest master and so what i want to show here is that it still didn't um you know deploy my package yet but it will soon so again take a look here we have our github workflow for publish only when we publish a new release okay and it's just should go through build everything and publish to npm all right so we'll say zero one one um just a test you can put description in here if you want and so what you'll say is once that publishes all right so we've got the assets it zips up the source code right and go to your actions and here it is so this one is where your publish step will actually get run and so it looks like uh it's actually going ahead and running so everything else must have ran through a little bit faster but let's see what happens here and so the hope would be that once this is done we have an npm package published on our npm username registry and when i go here it should just show up so i'll go to packages oh look at that my library to publish so interestingly enough it used the folder name i think let's see here we go let me switch over back to vs code so it it actually used the folder name that i created when i did tsdxcreate alright so it did actually have the name field already covered it was just down at the bottom and then it had like author jenkins xbot so you're going to want to change that stuff if you're doing this over the course of a long period of time right but for now let's let's go see the magic all right um come on now look at that they even have a little message with how i said i did it with tsdx right so you know watch out you want to definitely clean up their boiler plates for you uh when you you know get your own thing really up and going but overall i mean it's a nice setup right you've got your node mp module already published and ready to go it supports full typescript out of the box and you have now an automated publishing pipeline where every time you create that release in github you know it's going to publish whatever your latest version is so i think that's pretty powerful tool set to have and then not only that if you know typescript pretty well or if people that just use regular javascript are going to be consuming this package um they're going to get the types for your package right so so i'll show you what i mean by that we'll just do a test file real quick so touch play clear this out playground.js and then we'll open this up and we'll just do say const my package equals require and you could actually require from the dist folder and that's because of how the folder structure is set up right it's got an index.js so anytime you require a folder like that if it's got it already set up then you're good to go so now notice the magic real quick right you have the sum function there okay so you could say something like console.log if i can type console.log my package so it just exports that method sum uh and then you see how it's got our little types right in this in this little ui window that pops up in vs code already so we're gonna sum one and two and then we will run this in the terminal playground.js um boop and so it knows that we didn't run in production mode so remember uh in our in our little uh sum file here it says if it's development uh it says console.log boop all right so what we can do now is just show you how if we do node emv equals production and then node playground and see we didn't get that console method so our our package is flexible it's ready to go we got auto publish typescript types you're ready to make npm packages all right with the caveat that you know be responsible with npm packages right all right hope you enjoyed this one everybody uh good luck out there making uh making mpm packages for the whole world to use make the world a better place uh coming up soon i'm gonna actually be publishing a package and i was i was going through this uh pain just not too long ago of how i wanted to set this package up so i thought i'd do a quick video about it i hope you enjoyed um leave me a comment see if it was helpful if there's more you're looking for otherwise tune in and i'll show you what package i'm working on with the twitter api coming up real soon all right cheers everybody

Channel: Jay Wolfe

Views: 2,880

Keywords: nodejs, npm, github actions, tsdx, typescript, github

Id: TJ2bYruWX7s

Length: 18min 54sec (1134 seconds)

Published: Sun Feb 28 2021