How to create a NPM Package Registry on Gitlab

hello everyone i hope your day is going well and today on all things cs we're going to talk about the get lab package registry dealing with mpm in particular so pre prerequisite that you'll need is you'll need to have node installed as well as you will need a repository set up you can go up here click new new repo new project right there and go through the steps of setting that up all right let's go to our repository here we have it and i'm just going to do mpm init that is not how you spell in it there you go and if you want to you can use yarn as well you know some people like to use yarn but for now we're going to just stick with npm npm knit all right and just hit enter and there we go and you'll see that we have a package.json now let's open up this encode vs code you can use any editor that you prefer and so a couple of things that we need to do is we need to set the scope for this package and so we're going to do an at and what are we adding at well if you go up to your up here you're going to see this at and i have all things cs and so that is the word that you're going to use that's your that's your scope per se you can see it up here as well and so in their documentation they have this foo that's what they that's what foo is supposed to be it's a little confusing reading through the documentation figuring out exactly what what you're supposed to use sometimes so that is what you want to use so we're going to put that in here all things cs slash [Music] there we go okay it doesn't like capitals capitals cap capitalization right and so we are going to just uh create a file that we want to export okay so index.js yeah we're just console.log hello all right next thing we're going to need to do is we're going to look for that so we're going to do files and then we're going to just put in index.js another thing that we want need is we will need a publish config and in this published config we are going to put this guy here let me find it here we go we're going to want to put this essentially so and we're going to want to change a few things so we're going to change all things cs and if you have an instance get that instance then you will put your instance in there i am on just gitlab.com i'm going to leave it as that and then you want your project id here so let's take a look at our project id tutorial and this is our project id right here that's where you find that let's paste that into here and there we go let's save all right so what else do we want to do the next thing we will want to do is we will want to set up a mpmrc so this is kind of something funny that i i found is there mpmrc stuff and not a big fan of it personally and this is this is their naming convention stuff by the way and i will link this this in this description there but i'm just going to copy this right here we're not going to use it exactly like that though we're going to modify it a little bit so let's go like this get rid of that get rid of that and then i want you to see here so so it shows your token and so by the way um all this stuff right here npm config set that basically is setting this to your root npm rc i don't want to do that i'm just going to set it in the project folder which is completely fine to do and you can you can do variables as well if you like i'm just going to do it like this modify this get rid of that example foo we need to change that to all things cs and yep yep looks good so auth token what's the auth token and why why do we need that so that's going to link it here and so we're going to go over here to your project so we're in our project right now and then we're going to want to go to repository and deploy tokens right here click that and you can create a name so let's do git lab tutorial and expiration date if you want username if you want and we are going to click these ones read package registry by package registry and we're going to deploy that token and this right here is the password the token and you want to save that okay and then we are going to come here go to ci cd go to your variables add a new variable and let's just call this gitlab okay and mask it i don't need them and there you go another thing we're going to need for this is we're going to need a runner now if you don't have a runner set up for this project you will need to do that so i believe right now it will automatically set one of these shared runners but you can create your own runner if you want and there's instructions to do that here i'm just going to use one of these shared runners as that seems to work all right and there may be a few steps that you have to go through um to set this up if you've never set this up before you have to give gitlab your credit card information which they don't do anything with they're just authenticating that you are a real individual and essentially they don't want random people using up the running space so all right so we have that token let's paste it in here there we go and so the reason why we're doing this here is because it's going to be used when we run our pipeline i believe i've tried it without this and it doesn't seem to work so it's just kind of something funky with with the package registry and yeah get that it's a new thing so i believe there's still stuff going on with that all right so the next thing we're going to want to do is we want to set our gitlab ci so i'm just coming down here and then we're going to get our gitlab ci right here okay great about ci all right paste in this context fun contents and so stages if you've never seen gitlab ci before if you're unfamiliar with it um it is a little haunting at first i suppose and so basically the stages thing this will run each of these stages deploy in certain orders and so you can modify this to deploy on different um stages and so like if i had a deploy i could i could make a build and create another one that would be build down here like such you know and so yeah definitely look into that more but for now we're just going to go with this and so this is echoing uh bmrc glam ci token and get that project and i believe it should work without that you know let's just for good old time's sake let's just um ignore get ignore this this mpmrc and let's let's see what happens it's always good to test things experiment a little bit and so i believe we have everything that we need right now actually and i'm sure that there's something i'm probably missing but let's just kind of do a quick scan through i believe if there are yarn too there's instructions for that but yeah i'm not really that concerned about that okay all right oh and oh and this is essentially what i did there it's that's that yeah and it says that it says to do this if you're installing it from an outside source but from my experience you says install npm packages from other organizations but from my experience you always need this which seems kind of ridiculous to me but if you know otherwise please figure download so let's uh push this hit status let's see all our untracked stuff get out and hit command also if you want to have a semantic release involved in your in your npm package registry there is an option for that as well but this for now is just the simple the simple version so that's why we're doing this first commit all right well not first command but first package one more thing let's go to our versioning so this is going to be the version number and whatever i choose this to be that's going to be the version number so if you try to to commit the same version if you don't add in correct um get push and stuff like that if you don't change this it will not run the pipeline so and let's do a oh yeah i forget exclamation marks and commit messages are not a thing i got a little over excited there all right okay um what what what is going on here okay oh yeah well that's okay just it'll just be version one that's that's fine all right let's uh let's see how it's going here pipeline hopefully nothing fails and it's running so we'll see just gotta wait a little bit takes a little while i think with these shared runners but not too long in the meantime let's talk about um going beyond going beyond just using the simple basic hello world you can you can indeed um if you are a react developer for instance or i suppose you use gatsby you can create um javascript files and for creating javascript files not necessarily react but if you have a javascript file and you want to publish that to your to your package registry there will be a few more things that you'll need to do you will need to use use rollup rollup.js and there's a few configurations doing that and so essentially here where you have your files you will roll up everything into a dist i'll just spell that out just and so you will need to roll everything up into there and look at that there for javascript if you are doing react you will also need babel bobble babel yeah and in order to roll up components and things such as that otherwise uh yeah you'll you'll run into issues and i plan on making a video about that as well so all right this worked yeah all right job succeeded so let's check it out let's go to our packages and what do you know we have our first package all right that's cool so yeah um let's see if we can install this let's just make one really fast create a blank project test environment um all right so basically here we're just we're just going to test it and see if this works all right so we have our packages and so here you'll see in our package registry back over here we'll have these couple commands echo all things and so you're going to need this mpmrc in your project project root or you can do in your computer root but project root works well you're not clutting cluttering up the big mpmrc and um okay so um let's see what's going on here let's do code yeah okay it's there now i don't know why i should oh probably because it's a hidden file okay yeah so and then we will do this oh just a note on this other one it seemed to be fine without that hidden so hooray that's good that's good i like that and we're going to try this and you will see it does not work ah it says not found so like what the heck what the heck is going on why is this not working yeah funny thing get that so yeah that's that's something that i have to gripe with get that and this is still new so i imagine that perhaps it will get better in the future but for now yeah that's i feel like that's a big problem if you have to um my bad i'm skipping around a lot here so if you have to have a token in your mpmrc every time that is really really something and it works now what do you know so having this you can you can uh use a variable if you want and just you don't have that in your bash but um yeah why do you have it like that gitlab i don't know and if you guys know leave a comment down below but as far as i'm concerned there should be an easier and better way so that's the gist of it and yeah now we have package.json and you can see all things cs is now a dependency that is the basics of creating a package registry using mpm i hope that was helpful if you like this video please leave a like and subscribe for more videos and everyone have a excellent evening

Channel: AllThingsCS

Views: 352

Keywords: gitlab, npm gitlab package registry, package registry, npm, gitlab package registry, how to, registry setup

Id: OqS6jb22AFE

Length: 20min 11sec (1211 seconds)

Published: Mon Oct 18 2021