Transcript for:
Building an Angular Open Source Library

a [Music] too oh no open my soul but babe how could I know [Music] [Music] shame now you're all going so welcome everybody to today's stream this is the first time I actually stream on YouTube so I'm experimenting a bit if I should stream on YouTube in the future or if I should still continue streaming on Twitch let's see so in in today's stream what we want to do is hello welcome three to the Stream how are you doing how is it going um so in today's stream what I want to do is basically show how we can build a open source library from scratch so an angular open source Library without anything in place right so how do we go about that so the first thing that we do is we open up a browser window we go to GitHub [Music] and of course we generate a new repository we will call this one um let's call it Release Me Daddy I think that will be a um probably a starter template that we can then also use for all for other projects so once we have that in place we can use reuse it whenever you want to generate a new open source Library so let's start by basically coming into or changing into a directory and in here what we use we will use the angular CLI so we are in angular CLI version 17 which is the latest I think it's not I think it's not the latest one I think there's a newer one let's go with the install the latest one hi am mind turning down music no that's not a problem I will do that um quickly check let's turn a bit down I hope it's better now let me know if it's if I even need to turn it further down yeah okay cool cool yeah sorry for that um I said it's the first time on YouTube right so NG version and so we have 1703 which is good so we are going to say engineu to generate a new uh Release Me Daddy feature and we call it minus minus create application equals false so that will only generate the workspace but not the application right because we want multiproject angular workspace so we have that in place so that's already committed so if we would do git lock we could see that we have the initial commit but of course we haven't yet connected our repository so let's go ahead take that and push up the changes to the repository and now if we refresh the repo we can see that our changes are there right the release me Daddy project is there we don't have any projects folder at this moment so what we will do is we are inside this repository we will generate first a library which we call Le me Daddy yeah that's the library name uh um no hi hi abdulah F how are you doing how is it going I'm not sure if I pronounced the name correctly right so now at this point we can of course open up the our favorite ID which I will do here on the second screen that I have and we will open our project that we just generated uh that's documents I don't need or maybe I need it like code private and then the release me Daddy project I mean the the webstorm is kind of SL low on Startup but once you have it I think it's pretty cool once you have it it's it's really amazing so now what we are going to do or what we did now let's inspect the changes Also let's see if the font size is correct I think it's font 2022 um that's usually the font size I use for streaming so what we see now that in the changes we see that we generated an angular chasing a package chasing and the bunch of unversioned files so we basically generated a project folder right which is the library can you briefly um about how angular NG surf works yeah we will CNG surf in just a bit because at this moment we cannot surf anything because we have only generated the library right but the basic way it works it's under the hood it starts a def server so in the past it was a weback def server but at the moment we basically switch to um es build so under the hood it starts Ved a Ved server and that basically serves up the page that's how NG NG serf works so um as I said we generated the library so let's go ahead and commit that generate Library yeah generaliz Library I think that's a good commit message and let's push that to our main branch we directly push on Main it's good for our case and now what we are going to do is ngt app that will be the application and we call it usually I usually like to call it showcase it could also be like I don't know demo I don't know with what we want to go showcase demo I kind of like showcase a bit better just because I'm used to that so we go with SAS server side rendering we can actually do here so let's go with server side rendering out of the box and here we go we have it let's commit that generate showcase project let's let's push to main also note the rocket here on the side that is going up whenever I push that's pretty cool feature I like that I think that's pretty neat why am I ghosting like see that somehow the light is not so good somehow ghosting a bit for whatever reason uh maybe it's because of my shirt actually because we first compile code with typescript compiler um yeah it will first compile the code because at runtime you cannot run typescript right it's only JavaScript um do you know if angular 17 SSR supports nestjs I don't think so it's currently um an Express server that is included there and how did you get that rocket the rocket is basically I am using um for the setup I am using hyper JS and then oh my Posh and in hyper I think it's let me see where the rocket is I think that's is there I think there's a hyper config or something maybe even in hyper itself we can go to setting things and that will open something that's the hyper chair file yeah was was in the correct place and then basically here we have the the G rocket that's a hyper plugin that you can install there so we have two plugins one is the G rocket the G rocket is basically when you push and then you have a space pull that's another rocket that lands if you pull and I quickly I'll be right back I quickly have to change the shirts because I'm I'm ghosting here like you can see through me right and I think it's because of the shirt because it's it's too close to the background so I I quickly change the shirt be right back yeah look at that nice so I'm not ghosting anymore right cool um so let's go ahead and that's the cool thing now with angular 17 you can just RW npm Run start and it will serve it up directly with SSR right so that is already SSR if we go to Local Host 4,200 this is SSR it's super bright whoa but whatever so as mentioned in the video description we will focus mainly on um how to implement or basically the whole release process around right so we will quickly do a let's say we have a library I don't know they just um Release Me Daddy we just have something that is called yeah that's actually already the library releas me that it works and then in the Showcase you would basically now start consuming that Library so it Standalone Imports Comm module why I don't like that why does this import common module uh service yeah we have specs we don't really need the service for the starter let's get rid of the service and then inside here we would release M daddy component then let's go inside our rep component and let's just do this it's an H1 something like that and if we rerun that we can see that so that's basically that's the library code right that's coming from the library so I bumped that a bit and this is the Showcase so what we did is consume library in showcase also one thing that comes to mind is because somebody was asking about the git rocket and if you are interested in the general um terminal setup that I have feel free to go over to angular experts iio on blocks and there we have written this one is basically a up of my terminal setup so I am using a couple of things hyper chairs oh my Posh and then an angular theme that's some theme that Thomas and I we created ourselves so that's basically the theme that will give you here like the information on which angular version you are right we can see directly we are on angular 17 in this project Noe 20 npm 9 and we have 83% better which is a super important information but the other ones are pretty cool um I didn't have any short hand forgit commit so what I'm using to commit is a plugin called git commit so I think we can find it here git minus C set is G commit that's a plugin and basically what it does it allows you to choose the feature type and it it commits with icons which I kind of like so that's why I use it you can see which icon it uses I like that it commits with icons so if you now check out the release me Daddy commits we can see that here we get the guitar for features and so on so I kind of I kind of like that so good um so we have to release me daddy show showcase and what we of course want to do next is now we want to focus a bit more on the setup so one thing that is like a m I would say is um prettier so prettier is kind of like something that you need and then what we usually do or what I usually do is for such projects I always create a script that is called format check format check lip probably so that would be pretty um pretty check AI is doing a good job here was correct pret check project Release Me Daddy so we check basically everything here so we can run form a check lip and that will list the files where he thinks like something code style issues were found right um I always do the same for check showcase and that would be release me Daddy minus showcase and then I do one script form a check which is basically both and then I run form a check which checks both [Music] um the next thing this is just a check so I always do the same for right right um where else so that would be Prett I think it's minus minus right but I'm not sure so now what we do is if we check the status we still have package Chason and package Lock And if we do format right we can see that all those files now got reformatted by prer right so um but still check showcase yeah so let's see what it changed in app component HTML you can see it did some formatting stuff right wherever we have it and once you have done that then it's kind of good so now actually I should have done two commits here because one is the setup one is the formatting so we do it with one but I really like this I really like this lipstick icon so I always want to commit with that but actually it would be a chore and it would be a style commit right but um reformat code or run prettier actually it's run and set more more like setup and run prettier oh so we push that pre set up nice um another thing that I like is whenever we have a r me so there are a bunch of assets you should always have on a open source project all right so one thing if we check another one of my open source project one thing is a code of conduct that's basically um there are a bunch of files that you should have like so the code of conduct basically describes like how new how you should treat people like in and basically how you should behave on that project so I think that's a cool thing to have like so we add a new file code of conduct and there are many great um code of conducts out there so I usually take like the same that I have for svg2 TS then a contributing MD that's important that's basically saying like how do you contribute to a project so it describes like the whole setup for for people like how can they start contributing to your project um that's the wrong yeah so what we describe here is first like a welcome and I mean basically whenever you have a contributor you are glad that you have a contributor on that project you link the code of conduct and you link or you link basically here to the code of conduct and the commit convention so later we will set up conventional commits and automatic fully automatic releasing and for that we basically need yeah conventional commits and therefore it's I think it's good to mention so you could mention whatever you want here as well so other stuff um then of course a license is important so here this project is under the MIT license license file is just like this so we add those assets um yeah I guess that's kind of it and pick docks add assets so that's something that we have then in the Ry we have a Ry right and the Ry we kind of have to treat a bit special because we have some stuff in the r me inside here development server all this kind of stuff is probably not really accurate so this is a demo project that shows how to release a library to npm and then usually what you have is like getting started is basically something like this so you do like it's probably npm install sometimes AI is a bit in my way so npm e and that's basically the name of the library right so you would install that and then you usually go with usage and that's then basically typescript and then what you would have is you have a component and basically whatever will be before like my component and in the template you would use how did we use it in the inside the app component Le Release Me Daddy which maybe is not the best name let's just call this release me [Music] Daddy so that would be the component and did you pass did we pass in something no I think that's just it least me that it works good and then we add an Imports array with release me it's not Dad it's it's component not modules because modules are kind of gone and done so good we have that like whatever you would document the stuff here right but what is pretty cool here what I kind of like to have is I like to use a tool that is called dock talk and inside my package Jason I like to do like uh uh generate table of content and what I do here is I always do anex doc talk the module is called do talk check spelling of imports oo yeah nice one future billionaire future billionaires yeah cool um so now the cool thing is we have our R me right we have it like this and we can even do a preview of the read me which looks like this so we have getting started and now mm run generate table of content and what this will do is you come to your project and now you can see that you have a table of content I don't really like the table of content to be here on top I personally like to have the title on top then a short description and then the table of content and now you can move those things here down and then whenever you go and say getting started or instead of getting started we call this installation now if we will check out how it looks books we still have getting started but if you regenerate the table of content he updates it here right so we have installation and usage so I think that's something I I usually like to do maybe do the minus here so that's something that I really like then one thing that is is important with the r me is basically you have your R me here top level which is cool whenever somebody comes to your GitHub repository and checks out like SVG TTS for example you come and you have a top level R right here you see the table of content that is generated with dock talk so that's nice but the thing here is also this is GitHub right but what you also want when you publish it you basically want to have if you go and oh that's again bright if you go to svg2 TS and if you come here you basically also want the r me to show up here so how do we do that well what we usually have is we have another R me inside here and the the thing looks new to me all this thanks for sharing yeah that's cool because I thought this is a valuable stream for many because I think this is not so explored right there are not also not so many tutorials about that so therefore I wanted to do this um and thanks for the feedback it's cool it's also very valuable for me if my content helps somebody that's pretty cool so yeah the thing is if you would now go ahead and build so even in the package Chase we don't yet have a build we have a build but does this build a lip this doesn't so because we we have a multiproject workspace so NG build doesn't out work out of the box so we would need to go build lip NG build Release Me Daddy and build showcase re me Daddy showcase so we are currently interested in the build right or sorry one thing NG build we would do NG build we would do NP run build lip and build showcase so now we are building the library so this is basically building the entry point for the release Maddy library and the other one is is to Showcase where we have a error because because we use it still with lip but we rename the selector so let's rebuild uh register is not a function what just I think the build lip itself works great oh we didn't what mm run build lip not minus minus for both just build the library what so now I'm a bit confused why this build doesn't work but we will figure it out out I don't know but that's building the library now so some package was missing and the thing here is now we are building the library right and you can see that the r me ends up here but it's not our top level re me so it's not the thing that we wrote here right it's not this Release Me Daddy so you can either so what can we do about this there are basically three ways to go about this so the first thing is you have a separate R me and you kind of keep those two in syncs because that's the one that's showing up on GitHub that's the one that's showing up on npam you can keep those two in sync which is not the best thing right because whenever you change something here you have to think about it's very error prone you forget it that's not the best approach second approach is before we build we copy that one inside here and then it gets built automatically which is also not the coolest approach because whenever you copy you have to check it in again so I will prefer or what I do is preferring the third approach that is basically calling a or generating a pre can we use anx work space for lips and different projects yeah we could use enx we could use anx [Music] for the thing with anx is the releasing gets much more complex than here I guess especially when you then start to have like multiple projects because I did that too if you interested in that Medium whoa that's maybe it's okay let speak um let's see let's see let's see because I did quite some work there and I even had a call with some guy from the enx team because they are now building enx release and they were interested in couple of things that I did there um or they wanted to chat about it because there were some things that my library does a bit more than enx release so I have generated this one open source project that is called anx release and their command is also called anx release now so therefore they were also like yeah sorry your repo will be kind of like name clashing but this was a was basically a set of enx generators and NX executors which allow it to release in enx library and the thing is what I wanted to show you I'm not sure if it's let me think for a single Library I think it could work but here I basically made like two researches how to release npm libraries with anx and let's say you have a project you have an NX project and okay there are okay this is a pretty complex topics so I don't know how how deep we want to go because there are many use cases right so the first thing is basically let's say one thing is you have an application and you only want to that's the simplest use case what we are doing right now here is the simplest use case because that's like one angular or one angular project which is a library and one which is a showcase and that's it you have one project no dependencies nothing but in an enx monor repo yeah I mean here you could also have that actually maybe we are comparing like two two things that are not the same I guess the short answer is it would work with anx as well yeah it would work please link block sure um I'm not sure if it's is it behind the pay wall maybe I do like just to be sure I do the friend link um which is this one because there are two blocks I give you the friend links for both and let me quickly before you go ahead and read that quickly quickly explain two things because the thing is pretty complex so the thing is let's say you have this architecture right you have a application and you have two libraries you have a full library and a bar Library both are publishable and buildable and you also have a b Library which is publishable and buildable now V consumes Fu and bar consumes V like and you want to release that and that will will get very complicated so because the first thing that you have also what I wanted to do is basically all of that automatic versioning bumped versions based on conventional commits linting testing build all that kind of stuff and it took me quite some time to figure all that out but um basically the first question that you have to ask yourself if you have multiple libraries with one Library it's not an issue like what we are doing here it's clear you have one version that's it but in the setup that I showed you you have three libraries now you want to release them how do you go about it do you do like one version for each Library so let's say you do a feature in let's say you do a feature in Fu only would you just bump like the version of Fu and keep bar and pass the same version that it is what do you do when you bump pass how would you do that because fu is actually consuming B basically those are the kind of questions will you go with like each one has its own version or do you see more like for example is it grouped because angular for example in angular you would have this would be the angular core angular common angular router for example whenever you release one when you do a change here you want to release everything right so that they are always in sync and that's the first question that you kind of have to ask your yourself if you go with such an approach and one of the blog posts is with multiversion approach and this one is this is multiversion and this is single version approach and therefore we kind of figured out which one to choose it's all described here right but that's that's the mental model behind it that's how it will work right so so let's say we do a change so those are our lips we do a change in Fu then we run all those things for Fu only and we want to commit back to stuff and this is things that enx release is not is not capable of doing then yeah it gets complex right and then we call basically in the exec plugin we do bump the versions with anx release that's my project and we commit back back the stuff in bar and in package Chase and even in the build version so and in the end we all publish everything together but that's that's the idea here and it is pretty crazy if you have to do this yourself but you can check out the video where I basically show how to do all of that in like 10 minutes because I kind of wrote those libraries to capsulate all the complexity away so what you can do now is also use um yeah you can generate the libraries but then you can use NX release so you install NX release and then you do NX generate NX release config and then you get through a wizard which asks you a bunch of questions and you can say which ones you want to release and then it will configure all the things for you right and then it's pretty simple it's a pretty easy setup but yeah what we are trying to do today is a is a much simpler version of this because that's that's yeah very complex and I think is only the case for like bigger Enterprises I would say so but yeah generally your question enx would work like I just don't like I know that that this is an unpopular opinion but I don't like anx too too much for all like I love enx I'm a huge fan of enx but only I would only choose it for the right use case so for cases that are simple enough like releasing one Library I would not add the extra complexity of enx I know the enx team is kind of like use it always use the CLI and so on but for me it's still extra complexity over the angular CLI but that's I think that's an unpopular opinion probably many would probably disagree so where were we pre-build lip and here we basically have to say we no it's actually more like a post build um we copy the read me yeah yeah the license we can oh AI so we copy the read me we copy the license no no no that's too much the license do we need the license I think we need the license actually and these things we don't need so just like this so let's go ahead now let's see if the r me ends up here so this is the correct read me right if you're using ngx store is a good practice to create a separate lip for that um so you are speaking about a enx setup I guess because in the NX setup I would basically go like generate apps as kind of shells and then the libraries are the features and per feature I would do like this these stores right because you get this these slices I think I haven't used ngx since a long time actually um so Release Me Daddy we have that we copy yeah that's it we copy um J copy assets on post build now another cool thing that I like to use use is basically whenever I do open source libraries is I like to mention I like to give credit to to contributors right because when somebody takes it's not like I'm looking for the for the English word um because I speak German actually and self it's not naturally yeah I mean what I want to say is basically somebody has to invest his free time or just generally his time to contribute to your project so I think you should give credit to those guys right and what I like to use is basically here always at the end of the table of content I like to include contributors and then basically list all the contributors and also for the contribution that that they do which I think is cool so and there's a cool a very cool tool and that tool is called all contributors and you can set it up by basically CLI installations for some reason it doesn't really work for me when I do it from here impex impex all contributors in it it doesn't do anything but that's I think that's a fish problem but if I do it here what that should actually do something but I guess it's um isn't there on Mech this other terminal because I think I've seen that this is [Music] terminal complete node minus V do I have that here [Music] what uh minus D all contri let's install the all contributor CLI locally let's see if that does something then here we go all contributors in it yeah don't know why the does it work here like no here okay so fish somehow doesn't see my local installed I don't know I still have to Fig figured it out so what's the name of the repository Release Me Daddy who's the owner we use GitHub um github.com where should the you can also have like a dedicated contributors file but I like to have to read me um yes I want the number of contributors um yes patch that's cool you can even choose how big the Avatar should be 100 pixels is okay um Auto commit that then angler do you want to add a footer should we add a footer did we do that I think so let's add it so what this does it basically initializes the project so you now have this all contributors with the settings right that's the all contributors file and now I can come and say um all contributors add so I add myself for and they have a bunch of contributions so I think if you go to the all contributor sites you can say that there is basically audio accessibility bu block business whatever like you can choose those and we just say I add myself then I get added to this array here but I should also be added in the r me so if I now check out the rme we see that I am added as a contributor maybe one thing that comes to mind is before we copy so we have this post build right what we probably should do first is is always update our table of content um generate table of content to to just keep that up to date and now we basically have set up this the cool thing is if you receive now like you have an open source project and you receive a PR what you can do here is you can go pull requests and let's see one of the closed ones for example okay that was myself but for example this was a contribution from Thomas what you can then say is like hi all contributors please add Thomas for code and all contributors will then say well I've put a pull request and you can see how he then adds Thomas for COD right so with that it's pretty cool because you can do like simple comments and then based on that comments you can then easily um yeah you can keep the contributors alive right I think that's pretty cool keep the contributors alive keep the list of contributors alive right would you see this as a as a docks or a jaw commit I see it more as a docks nice yeah I also I also really like this cool so now what else do we need what what else comes to mind um linting how about some linting we don't have lint so I think what we need to do is angler is lint where is it at is this the official one let's see if they have it on angular death what he is linked migrate to es lint I'm somehow I think the one that I had was correct yeah yeah let's let's just use the other one like angular es Lind because they have yeah I think it's this one so let's go ahead and run that command would you like to proceed [Music] yes so what we probably need is again the same so we have that for format there are quite some scripts now but you probably need a lint linting script and a link for the lip I guess we just run es link on yeah yeah yeah yeah that looks kind of good I would say so so we don't yet have there's an error in the Json um yeah I thought there is something that will do this but let's init the config adlin fix I by default I already have the minus minus fix I don't know maybe it would make sense to have two um so why do we need it to enforce code Style no that's prettier to check syntax and find problems so import export none of these where does your code run in the browser what format I like chasing yes um which package manager npm so okay no issues then the next thing right there is there is quite some stuff included if you think about it if you want to do it like full or like complete the next thing is probably husky we want to use some commit linting um I know there are people who don't like kit hooks I still think they are cool for like running prettier or I still think it's cool so what we will use is husy husy husy and they changed like from one version it dramatically changed how husky works so what I still don't like about npm I'm not sure if I'm the only one but like I don't like that here you don't have the option A minus D that would be cool minus the H HK is is there a module called HK I'm just curious and even how many downloads you get I think that would be everybody typing okay there is not maybe we should do one module that we provide under hassk and then just log out some funny Hy art with a husky or something or that would be nice just to troll people um okay so I think we just can copy that also not sure run prepare GI hooks installed nice um we need a pre-commit hook and what we will do here so what what is going on here like it generates the Husky it generates it generates the pre-commit hook and here we run n PM test now what we probably want to run here is prettier and there's a tool called pretty quick and pretty quick pretty quick allows you to run prety only on change changed files what you previously would need to do is you would using a tool called uh how is it called lint staged I think lint staged was basically checking or taking all the the staged files and running your task only andn that but I think pretty quick is easier for that so we we basically install it minus D pretty pretty quick we pretty quick install pretty quick so we have pretty quick and now I'm pre-commit hooks pre-commit we just do pretty quick minus minus staged something like that and then what else do we want to do I'm not sure if I want to re I don't want to be like I want to commit to be fast right I don't want to link test than two stuff here because that's none of my concern somehow I just want to format the files and one thing that I want to guarantee is like the the conventional commit right um I think it's called commit link so that basically you follow a commit message because we need that for releasing so well let's see what that does echofu also have some nice Christmas cookies here so let's see nice yeah basically what you can see that the type must be of one of those things right so it lenss your commitment message mhm config angular is cool let's go ahead so that's the commit L thing actually it's a bit of an overkill for our library to do all these kind of things but still it's more like if you want to do like a real open source project um then how do we integrate so so so so so um we installed that we have husky add a hook which we already have the hook we have question is if we even need to install that so let's see if we just bump that in here because I guess if you install it commit link something like that so let's let's try it let's say if we do get at everything and we go and say git commit minus m let's go okay pretty quick command not found maybe we have to do npx here but the hook is executing that's already good right oh husy PR PR is all config sync is not a function why um okay let's see if you create there's if you create a I somehow like on my now basically I have to do it like this okay yeah if you create notes or blog posts about this project will be great yes definitely definitely that would be a very good idea because it's probably easier to follow um yeah prettier resolve config is not a function but only inside husky is plug in Pre tier 4 and pre tier three that can be [Music] maybe do we even have the es l prag in [Music] prettier so which version of preter do we have so we have preter free and pretty quick free that should actually be okay and do we have a angler lint we don't have a pretty plugin um maybe we have to do like pretty quick because it's on pretty quick pretty quick will break with pretty okay yeah that sounds that sounds right pre tier two let's go now pretty pretty quick work but [Music] um we can see that this was basically Al Everything is Awesome input set up es lint please add rules to your commit lint config found one problem so we didn't commit but we probably have to go to our we don't even have a commit L config maybe we forgot something when we initialized that um commit commit commit is there an init commit L CI I mean do we have here is there an in it link your commit messages path to the config file edit local setup yeah yeah yeah test the hook I think we were config conventional do we have that yeah we have config angular yeah I need to yes I need to that's for sure like that so if I get commit like this I mean that basically fails like that shouldn't work right that shouldn't work but what is confusing me that we don't have any rule configured ah he even says getting started guide that's what we did so we did install config ah configure you know a person who can read is in advantage that's how we say it in German like so now we basically have the commit L config but we don't want to have to extend the config conventional because we are using the config angular so now now we get the correct error and now it's basically what um what sha shaba I I don't know like Shava probably is the last name um was saying now we basically have to use the correct commit type so you can see that it says chore setup es lint um Everything is Awesome type must be off build or whatever what did I do so we do chore I did chore let's see if because that should pass through setup commit L Type must be of one he doesn't know chores why is this the angler okay there I'm surprised that angler conventional commits let's see angler full spec wow maybe angular conventional commits doesn't know Cho course fix feed breaking change but why there is chore are allowed for example config conventional based on the angular convention recommends chore and others so and he says type must be one of build CI dogs feet but he doesn't know chores somehow for whatever reason commit L config angular what was it Con conventional probably we need both commit L config con config conventional can I type G status now what is that s new file s so now we should be good add the file s so CH setup Husky and commit link right we didn't install that so you see like that's also why I want to provide a starter because there's a lot going on there's a lot of things if I have to type this message again I'm going crazy and why type must be of one why um let me also quickly try it with a feet like because common types according to committin based on angular convention can be chore there it is chore so real world EX samples look like the ah you know what let me check still set up Comm set up Husky and commit lint I think he's always like one behind or something why does he even get like the the robot here because in the I think what if I just do this yeah so [Music] now wasn't that the same and now he still thinks because he's still linting the last one Lind last commit from history but why not the current one ah because wait CI set up can we expect more videos on angler Advance concept and best practices yeah sure try removing angler from commit to the chairs uh you mean from the config sure let's try that but I think we are also linting the wrong commit maybe we are running it in the in the wrong hook I think but there was something on I don't want to be stuck here too long commitment message right that's a different hook that's not pre-commit hook so that's a different hook so you can see how we have a commit message hook and inside here we run that and then let's let's quickly add again just the angular one config angular I don't know if we need the other one I mean we will we will try it out so we will basically uninstall or maybe we try it first and then we will see wrong and pi okay at least he's taking now the correct message right previously we were always one behind now let's try um the suggestion here which is config conventional and just remove the angular one let's see CH setup commit L and hus key yeah but what is the difference from the angular once but actually I don't mind like I just mind that we have the type in there but let's see summary the conventional commit is a light convention on top of commit it provides blah blah blah which makes it easier to write automated tools on top of yes are allowed for example recommends dra and others okay I don't know I let's go with let's go with the con config conventional I mean that works I don't want to maybe I'll figure that out after the stream but I don't want to be blocked here so what we will go and we we will basically uninstall the commit lit config at commit link config angular so we remove that and then actually and pretty quick we don't need those right because we used it with impex yeah so it picked angular versions yes okay cool I'm still curious what the difference is why does the this commit like a chore commit not work with the angler version yes okay so it picks the last one cool I thought it kind of merchant them but that's cool get add everything get status npx get C set sure um ah you know what the problem is that's not so cool but we have to say maybe we still need it let's let's let's leave it probably because then they are I guess they are cached then we can actually roll back back everything here go to the ENT the commit link config angular we can actually remove that and then go ahead and do an mpmc an npmi actually yeah it's weird yeah I also agree sure um what do we do great cool so we are making great progress h now at this point it's probably time to set up the GitHub actions because we don't have any build yet so what we will do is yeah we have all that nice um get up actions get up actions so I usually go to an existing project and just copy what I already have right because what we want to use here and that's so this will be a complex part but it will be pretty cool because I think that's a really really nice setup right so we will go ahead and generate the first thing that we do is on Release Me Daddy we will do a new directory. GitHub slash workflows I think it's workflows yes and I usually do a caml or like a branch to the we can also call I don't know what's the best name but that the idea is that this runs on a feature Branch so what we will do here is basically on feature Branch we will that is not our main branch what we will do is we will check out we will NM install we will run te ooh we will run link oh my God there's more to it I now think like coverage report and stuff now the question is do we even have test we didn't spoke about testing yet so curious let's see testing is the next part okay okay um then let's see let's see we can do this uh probably for test again so again I want to have two scripts one for test and one for uh one one for the Showcase and one for the lip where do you get um ideas for libraries or project so I think sometimes I just try out new angular stuff and I get ideas for basically based on some new stuff um for example last time on stream that was still on Twitch stream but I think I will probably now switch to YouTube more because I think that's more interesting um what we did was a library that is called battery smoo for example and on that Library there there I was just playing around with view transitions because that's a new feature in angler 17 like view transition itself is a new feature in the browser and Ang 17 released it so that you can have few transitions in the router and the idea here is basically with you transition you can do like some pretty cool things I mean look at this that's also something I did on a twitch stream is basically when you click here you see this transition like that's view transition so then I was playing around with that and then I thought like wow I like that I don't only want this on routing can I also have it somehow when I filter a list and therefore I came up with this project called battery smoo where you have a list and when you filter I don't know if you can see it but it's basically transitioning right it's not just filtering the list like easy it's like nicely fading in and um even like look how the elements kind of go next like they move nicely right so I thought because this is not possible out of the box you have to do some magic basically what I did I implemented a custom ng4 which does that and I thought maybe this could be a cool Library so why not release it I haven't released it yet because I'm still doing the setup but this could be a cool library right or other ideas that I get so that's something basically you get like new features you play around with it and then you think how could this be useful for somebody else and then you start providing a library another thing that is a great resource for features for example of course um if you have like interesting client projects right if you do some interesting things for your clients a lot of things or most of the work I do for clients is closed Source but there is some stuff that is open source or that I can kind of is close source and I want to solve a specific problem then I go home think about the problem and start to implement an open sour package to solve something but the problem has to be like not business related right it has to be like pure technical because you cannot publish out business logic so pure technical things and what I did for example was SVG TTS was such a project that I started because my client needed to solve something with icons and I came up with sg2 TS which is a cool project and now if you go like Curious what the alltime stats are but you see it it has quite some it even had like weekly on one what is it one day 11,000 downloads but like a total download of 1.2 million that's cool and that's a project that I started like because I needed to Sol solve some specific problems and I think whenever you have those problems I think it's kind I mean you cannot do that for all the companies but I have clients which are kind of I hope they are okay with that that because you also benefit because I did that right and I did it on my free time started it then during work time I could do a bit more whenever a feature was needed here so I could kind of do a bit of Open Source also when it's needed for the client um and then another cool thing is like other companies benefit from my work and also we had that cool thing for my client basically somebody used in another company I don't know somewhere else across the globe and he was contributing some stuff which then was also something that my client was benefiting from right so that was pretty cool but the idea so to answer the question where do you get the the ideas from is either from UM playing around with stuff thinking like how could I share things just playing around or like solving a real problem right so that's how I get ideas for new stuff and sometimes I just publish out like also right like just for fun some some some packages that I have are just for fun Harry Potter names I mean that I published seven years ago what is that that's like a name that gives you if you want some testing data like don't import a extra library to generate testing data don't do that like zero downloads it's also good but it gives you like a random Harry Potter name and stuff but it was more to play around see what I can publish out Prime NG stuff whatever yeah I have quite some projects out right some are more useful some are less useful also couple of things if you publish out the library the name is important for example I think this one is a library that I did and I think it's a super cool library because angler has this new transform feature right this one that I wrote about where you can basically say on inputs you can have um a transform function so let's say you have an input character let me Mount that a bit and you get a input and here you use character name uppercase so you would basically transform a character and just return an uppercase name so that's this new import transform right but there is also a two build-in functions one from number attribute from angular and poine attribute both from angular and those function automatically convert the input to biner number and that's pretty cool because you can then use like my product show details this would not compile without the transform attribute um yeah so and you can also use it like this because this would also not work this would be interpreted as a string and the idea is if you want to use that in an existing copay of course this is like hard to do because you have to go through everything so I wrote a Transformer that will automatically check your bllen attribute and the number attributes and transform them right and add this Transformer to those things but the note module is called a transform Transformer so nobody will nobody will look for that right therefore it's also not so discoverable sorry I'm speaking too much right would be great if you stream on YouTube cool thanks thanks for the for the feedback because I was only on twitch and it was cool for a couple of months now I'm thinking about transitioning to YouTube because I have the videos here I think I also reach more people here uh probably cooler so um where were we testing testing testing start view transition is not a function because it's experimental API so um it's not experimental it's just not supported by all the browser release me dad no we are still using Karma here right I guess it's still Karma so one of one but probably we cannot wait for this to finish right or wait because we hang I think it hangs so that's yeah doesn't that quit NG test I just want a single run how can I let that quit I don't want watch I mean if I do npm run test lip right like close it yeah that's what I want I want to exit run completely ah oh I didn't knew that I didn't know that they run in watch mode by default and you have to O basically you have to override it to say like minus minus watch I was not aware of this now okay we have one error but I think they work so test lip itself probably works no some of you tested a full page reload um I mean yeah Karma where is the config we have the projects source is is now inlined because I never use Karma to be honest I always use chest do we have to switch that to chest there is no Karma config ah it's probably an angular Jason TS config yeah that's the this build right and can we do here like options probably not um I mean it kind of works but karma watch false it's always funny how how the testing is somehow a problem client clear context I mean what I want to do it's not crazy right I want to test my library test lip Release Me Daddy minus minus watch fold no idea why uh otherwise we will just migrate away from Karma but this this should work like not sure and angular testing migrate to just like ooh ooh angular oh duck on the Ang team we believe okay angler has toally taken fairly opinion yeah with Karma being the ah yeah they have now a chest test Runner so at the same time we have seen in the community around chest the unit test yeah yeah yeah yeah experimental support we have seen nice so I just I guess I just switched to Builder I that I have never tried it because when we did like chest testing it was not really supported we did it with chest preset Angler I never tried it with this Builder TS config polyils um not sure what I'm in the wrong project no yeah yeah yeah that can very well be did I not destroy something no so we use the chest Builder chest is not installed yes minus DJ probably we then also have to in uninstall Karma I guess so chest environment chest Dom is not installed well then let's go ahead and install that H wait [Music] but T config spe Chason aha but we are running on the lip maybe there should [Music] be not here's config but here it's buil angular I've never used this never tried it well can it be so hard like ensure the file is part of the typescript program um app compon spe is missing from the typescript comp compilation and why are you even doing the Showcase like is it not build angler chest it's where is it why is it red here I think you need to adjust config file maybe maybe but yeah probably angler chest Builder this this is not it this is something else angular Builders chest run but should they don't have preview chest um yeah Builder if you don't remove the options ahuh do we have to remove the options but all of those options if you don't remove the options that were in the old configuration is it really true it's cool how you do a stream about open source life set up and then everything works kind of okay and then you come to the testing part and soon you're stuck but don't they have like yeah we have to Builder but how I mean there I'm actually not really happy that this is this is such a bigger thing that's the article we had so he just uses chest and [Music] options maybe it's also not done for multiproject workspace I don't know let's let's quickly roll back and otherwise we do it with the um sorry sorry for that so test test lip NG test Release Me Daddy and showcase so this should work so we start the browser it works okay close it but yeah then he comes with some of your tested the full page reload but so the the question is also how can you do that with Karma like minus minus watch fults I'm also wondering if there's some something called single run because it's all encapsulated by the Builder Okay so so so oh my God I hate testing in front end but I'm still a bit disappointed I do a multiproject workspace right this is the setup like the out of the box that up from angular and I don't know like how can I do this in the CI angular Karma single run in CI can we also angular Karma maybe we can use a head we anyway have to use headless Chrome probably this uh minus minus watch false minus minus browsers Chrome headless CI from headless that's prob browsers yes finally wow okay so that's the config we need have to same for the Showcase and now we can go ahead and run test lip which runs both yes that's one of one and why only one because test showcase is start even something yeah that's even failed but why does test leap because we only do NG test so I would want to see this fail now yes perfect so we run both right and now that let's go ahead and fix that I mean we can still do the title rendering we just say Release Me showcase is basically that's it it should render so let's run the Showcase test and then nice now good so actually we should commit that but uh let's go to our branch yaml no now what do we want to do it's the question um so the idea here is we probably want to report some coverage right I guess so so test lip test showcase um test lip minus minus coverage minus coverage is it minus minus codee coverage I just trust you AI I just trust you but you've done me wrong so many times uh this one I have to copy so now if we run this we should actually get [Music] a test how do we call it Lip lip coverage so we should get a coverage folder and then we want to report that somewhere right yeah we get this coverage folder here cool and what is it it's an index HTML okay okay okay now May may I know your Twitch channel name it's um it's actually linked in my YouTube channel I think that's the easiest it's this one n death but here I past it here I mean feel free to go follow there probably I will now do like more on YouTube I would say so yeah so um good what we want to do is reporting the coverage and there are two things two cool um two two pages where we can put report the coverage one is uh uh cover alls and the other one is code C I think I think I used coveralls now not not this D thanks thanks for the follow future building iones um cool sign in GitHub sign in so cover alls here it is here we go um and now we should be able to find our project which has the name Release Me Daddy so we turn on coveralls here now um we have cover alls turned on and then I think that's already it we have to do GitHub actions because we now have to report it so yeah that's the GitHub action use latest we copy that so let's go to our Branch we run the test um test and coverage so we run test what do we want to actually we want to basically I mean this is actually stupid all right uh test CH coverage is actually for nothing right we can still leave it but what we are important or what we are interested in is basically flip coverage because we are releasing a library so what does the consumer care if we are using um if you have 100% coverage on our showcase and nothing on the library right nobody cares so um the file I guess we just go with that I don't know if we need anything else and then we just do like NM or the name will be name is built and we do a npm run build so now probably what we still need is a GitHub token so for this action to work we have to have a GitHub token and now what you need to do is you go [Music] to your profile no actually to your yeah so the first thing that we need to do where was it where was it where was it sorry I just have to think um it's your profile then repositories then you go to the release me Daddy repository then you go to settings then you go to secrets and variables and then you go to actions and here you can have like new repository secrets so what I can do here is I can generate a GitHub uncore token I think that's the standard also coveralls expected coveralls expected as GitHub token so let's do it as GitHub token now of course I cannot share this here on my screen because that's I mean yeah you could have the token and do something but I will do it on another screen here so that you don't see it and then what you basically need to do you need to go to GitHub um on your profile and settings and then developer settings personal access tokens and then you go to classic tokens then you generate a new token and then we have to use GitHub authenticator um um um um um I hate it I hate it here and then get up so you enter and then you give the token a name like get up token how release me then you give it an expiration date and you give it to reper rights and I think that's everything I think it needs so then you generate the token you copy out and you give there the value and then you add it secret and then basically if you have that what fail to add secret secret must not start with GitHub why okay new repository secret okay you cannot use somehow the prefix GitHub so I do GH token so basically I added this token here right and now let's go back for showcase coverage it should be C minus code minus coverage um let me see so I guess you are speaking about showcase yes wow nice thanks a lot um yes then we basically have that and now we still have to provide it secret and there's a way to Alas the secret which I don't remember by heart but I know where I did it yeah so you can basically take your secret and set it as an in environment variable and we set it as GitHub token so we take the secret that we just generated set it as a GitHub token and now how do we call it Branch um we call it testing setup what this get status you don't have to do right that's just me being paranoid that I didn't that stuff setup testing testing setup here we go so now we should get a new branch so Release Me Daddy so we create a PR now we can see how we get the GitHub action that is already running right so we install no then PM we install no modules we lint actually here linting we should probably we lint everything so we also linted the Showcase not sure if that makes sense for our case or if it would make more sense to just link um yeah just link the library also this maybe we call it now I'm curious if this works nah nothing to report I guess he doesn't have the the coverage file right um because he probably doesn't know where the coverage is um we somehow have to give him I mean we can also kind of file default all files that could be found local path to the coverage report file produced by your test Suite if no file was found yes nothing to report okay files all coverage files that could be found space separate list so that's multiple ones but I guess I mean we also did Cover alls for enx release even like so we can basically cheat and go and see how we did it there okay any other redon that's anx anx plugin can I also filter by the ones that I have man how can I why can't I filter the ones that are enabled like because look at the amount of projects I have so okay there was one yeah the sendic release um so then let's quickly go and just curious because HX release has test coverage so coverage reporters is alov let's also remove to this test coverage let's see where we generate the coverage boom boom so there is coverage is it the reporter oh that's the wrong approaching no yeah it's his alov info probably we need an elk reporter I guess so so um I guess on our coverage on our test T Test lip coverage minus minus AI you there you're sleeping oh no do I have to Google it now is the time to shine co-pilot alov only I mean what does that do what do you do what do you doeas me daddy where are we we are in the coverage report we go one up we remove the coverage we run the test lip coverage error found alov is not cannot load reporter angular test generate alov Port um um um is it here maybe reporters let's see um cannot load reporter aloh if it's not registered perhaps you're missing some plugin yeah but do I have to install that Karma coverage ahuh is it on the plugins or maybe coveralls how does coveralls works like the action step needs to run further has to Output an alov file so basically angler reporter I don't know how Karma does it like because that's something that you usually set up like once and then it's good it's done go into Karma config which is no longer there coverage reporters reporters type elov maybe maybe this is alov only I don't know yeah but I don't really have access to the karma config because that's encapsulated now with the builder I guess so right in my f in my project I don't really have this is karma. config I don't really have that I mean coverage Karma generates angular Builder Karma elov I mean I would expect expect [Music] coverage coverage report yeah for example suppose you want to have a minimum yeah yeah yeah but there is now this Karma Builder this sucks build angular Karma yeah yeah whatever so that's Karma but elov plugin angular Karma Builder so they now encapsulated everything away right but this Builder isn't it yeah no no no find how much code you're testing maybe I can generate the karma config I'm not sure I want to find the docks on this Builder angler death kit Karma because I don't know I mean they should document it somewhere right if they generate the Builder Karma uh build angular Karma oh my God that testing setup is always like a because it's an angular Death kill kit build angler Karma where can I see the options can I jump somehow here no no no I mean it's at angular death kit build angler and then plugins karma karma karma karma karma karma Builders Karma schema so we have a main we have a t config we have a here we go Karma config so we can have our own but still I would kind of prefer to do the same scripts to be included in the build Styles [Music] okay we had Source map progress watch poll browsers so browsers is basically like the Headless we could actually rewrite that code coverage that's true code coverage exclude so I guess everything that we can do in the config reporters but that's what we did so we go to angler Jason we do reporters I don't remember how the reporter was called for elov that's maybe the next thing right and it should be under options so the question is karma elov reporter so that's reporter right reporters alov and what we can do inside our package Jason browsers we take Chrome headless so we just put that in here I mean is it really browsers should be in Array right um um browsers type string okay so I guess we can basically remove that so we can make that a lot simpler so oh God browsers can go away same here go away go away this watch Falls watch fals by default so then I guess we can also get rid of that that's the simpler it gets the better right so now we should still get an error but we should still get like headless and single run that's good so alov is not registered but I guess that somehow the schema code coverage reporters Karma reporter is directly pass to Karma Runner and how would you generally do that like I don't know how you register that in karma maybe we just have to install it unable to run coverage of karma cover yeah because maybe we need this alov because what do we have inside the package Jason slash karma karma coverage karma chasmine karma chasmin HTML reporter and I guess there's a package o coverage reporter reporters maybe maybe maybe let's try that maybe you are saving me here man reporters but this is Chason yeah I'm not sure if if I not sure because I would really want to avoid to write a Karma config but let me check again because the schema says on reporter it's just an array type array an items out of typ string cannot load it's not registered error yeah but coverage reporter like we don't have that um all of my setup plugins yeah but how do I specify plugins really isn't this possible with this Builder um yeah that sucks but that that has to be possible like so he says cannot load reporter perhaps you're missing some plugin perhaps what if I try this what you did like this but it should be a string here I don't know maybe this is maybe it's a bug I don't know but yeah I would be pretty surprised if this is a bu but if we don't do the reporters I'm curious what we even get because I didn't look really into the coverage file that would be the the funnest thing if you already have an alov no we only has have a coverage a normal report right but how can we do that do I really have to now write a Karma config I probably have to okay let's let's go with the karma config does it have to be CHS I guess it has to be CHS yeah let's do a builder but you cannot do the stuff right maybe is it merged now is this config overriding everything that I have so how do I do watch fals po fils do I I need that plugins I'll probably do that I don't know if I need all of them Porters Al HML as well let's go here and let's say Karma config now the question is this yeah Karma config JS I I have zero clue if this will work like so TS config leave here then or I mean in still doing the tests I have tons of error yo yo yo maybe that's I hate writing configs myself error in config file yeah yeah I guess I've never written a Karma config from hand those polyils do I need need them here maybe I don't know um base Puff I guess base puff you know what this should be like testing like um generate me sorry for the language generate me a Karma config for angular project I mean here in svg2 TS did I really go no I don't I don't trust that um this is so annoying this is really so annoying because I want to do the coverage right what do we do here Source lip a that's not an angular project and we are using chest also like what is wrong with the cover with the conf error in config file cannot find module Release Me Dy Karma config CHS what so he says error in config file so it's under projects it's karma config.js browser option must be an array so here it's an array then let's do that found to load errors so cannot load reporter elov it is not regist no what is there like plugin for elov is there like this Istanbul whatever oh my God how I hate this yeah how to add a Karma plugin that has no Karma config yeah Karma team City Reporter how is also what's the name of that elov reporter like Karma elov reporter I think it's said karma coverage plugin right because that has alov and HTML so actually I could probably say here like just Al it's not perhaps you're missing oh my God Karma coverage require Karma coverage it's there right Karma coverage we need this [Applause] even I don't know so I'm thinking if we should leave courage out for the moment because we cannot get that alov file and that's the problem Karma coverage Istanbul reporter is it that one I have no idea because they say a Karma plugin which generates code coverage and they said the reporters progress coverage what so again again again because I I still believe that this somehow has to be [Music] where is the elov yeah I don't know how to get that Al file here out progress so I am not sure no courage you need to install Karma coverage like that should be already there right the karma coverage should be there that's already there um yeah he reporters type but that's maybe something we could try because we only tried them as array right so I mean we that was already a suggestion in the test uh in the test in the oh my God in the test because I'm so obsessed now with the test um in the chat so basically this type alol and I cannot do here this doesn't work must be a string yeah I don't know I really don't know and I kind of am a bit upset that this is so complicated like I have the Builder I want to report Karma reporter is to use direct pass Karma Runner something I'm doing [Applause] wrong yeah that's what I that's what I kind of tried but I mean we can go back and try to do here again a Karma config file and then we go and we say we say we say we say uh [Music] um where are we angular Chason so we say karma config Karma config and inside here which is say reporters what you were suggesting like type Al exactly the same thing so we get cannot Lo but wait wait wait wait wait wait wait wait so cannot load reporter object object it's not registered um probably what we will do is we will go probably go with chest preset angular um PR maybe we go with that because the other one [Music] like I don't know how to do it right I'm so sorry like I have to figure that out somewhere um I'm just thinking if we should just skip the coverage for the moment and then I will try to figure that out because I don't it's taking way too much time right so what did we do like Eng Jason we have the karma config I think that we can roll back see yeah I guess now we cannot fully roll back it what did we do here we had like browsers Chrome headless we had like code cover code coverage true is wrong we had like watch false and what else um so this should still work okay but I quickly have to PE so be right [Music] back [Music] k [Music] [Music] the so now I'm back uh let me see okay so good I guess we continue without um I check something so good I guess we continue without coverage like I will try to figure it out I will let you know keep you posted like but this this really really sucks so if somebody figures out how to do that for sure let me know to your dot files um I can share it I can share the repo on GitHub or like here in the chat or what do you mean with the dot files you want access to the to this reper or not sure ah terminal setup yeah the terminal setup is basically the dot files I have some more stuff in aha you are looking for now I get it so you are looking for let me see what I have in here first before I go ahead and share that [Music] config so many things are just like um just font settings but I guess the most interesting stuff here are is the plugin section aha the so that would be like what you have to put in the in the hyper config right but the fish in the fish I have some config that I cannot share unfortunately some work rated config with some Secrets um so what do we want to do so we still have that we adjust so unfortunately we cannot do the coverage that means basically here we would basically just test andm run link andm R test with the coverage but then this one we we remove the report coverage and then we actually also don't need the GitHub token on this stage or in this [Applause] chop so let's finish this like feet so yeah okay I mean the the whole thing is basically a lot to do and the main struggle we had was test setup the main struggle we had making Karma like a single run the main struggle we had was the coverage report so cool great let's test Let's test yeah but the setup should be a bit bit better I think like I will try to figure out how it works but generally how coveralls would would work is that you can see whenever you commit something you can see how many or how much coverage you have right so for example here the NX Ang X purpose NX or the NX plugin has like 92% coverage you can go into details and you can then see like all the push um and you can see how basically what is covered um that's job ID I think you can go into the packages then you can even see the the changes the coverage change right all these kind of things so you can see the usually I don't know how long it's um kept maybe it's it's too long but you can see like a lot lot of the details right yeah but that would be the idea but now we basically are where are we so we have to release me Daddy we have one pull request open which now passes because we don't do the coverage and we merged that cool and now nothing happens so the next thing that is interesting is basically our release chop so and the release chop that's the cool thing now so new file release. ammo we basically take it again from here workflows release the ammo we take the raw file we take it over we have to release the ymo we paste that in we go if we are on Branch Main and then we basically do the same step that we do here like actually everything till here name check out run and build so on build we do build both but then we use release and now we have to configure semantic release so how do we do that semantic release is a tool that basically allows you to yeah to release based on Commit message so the way you configure that is by adding a DOT release RC on the top on the root level of your file not the scratch file a new file do release RC which we add here so the package route would be this but it's not just this because for us if we build it right if we go ahead and we removed this and we endon build L what we will get is not the this directory but we will get this slash Release Me Daddy and then we are going to use a bunch of plugins and we have to install them so we have to install it's semantic release change lock semantic release commit analyzer execute git notes generate release note generator and the conventional commit stuff right so we install those plugins and now we have another script to provide which is bum version bum version is a script that basically goes ahead and bumps the version in the package Chason so it's actually something like this bump versions and what this one does it takes yeah it bumps the version of the livon choke of actually the main and the lip so we use a package that is called replace Chason property um replace chasing property is a package d Road really you cannot install because so replace Jason properties a package Arro which allows you to replace a chasing property and what you can do is we can say bump version this has to be the same as here bump version and we will do replace Jason property and we will replace the version property with with basically the version that we set here so I guess it's doller version but let me quickly check that dollar version but we still have to give it the file right which file it has to replace it so we have to say please replace inside the package Jason and please whoa no can I please just T projects slash this is super annoying because I yes thank you sometimes c p is so annoying uh Release Me Daddy with one package Jason and we bumped the version here as well that's in later very important um yes yes yes that's kind of it and we need an N PM token as a secret so I again have to quickly open up a browser where you cannot see and I go to if if it doesn't hang come on I go to to mms.com you go to your profile access token you generate a new token you take a classic token you log in and you give the token like a published no it's an automation token which will be used for CI and now again you go to I'm doing this all on the other screen so because tokens like I should not share right your profile your profile Release Me Daddy Release Me Daddy and then we go to settings secret actions and then we do a new repository secret which we call enmore token BM we paste it in and good so again we have now like two secrets and N PM token and the GitHub token on our repository which we then reexpose here and that's actually it I I don't imagine that we get that right on first try probably should also have a new file change loog MD and I don't think we get it right let's see oh we push on Main it fetch because let's go and push on release setup so we go to release me Daddy and now what we do is we have Release Me Daddy one branch where is it [Music] so hang on a minute it will be cool it will be cool if this works if this works it's going to be great because that will be really cool so we create the pr and then we have the the CI pipeline which is going to run and as we can see in the CI pipeline we run install no modules Lind and so on okay thanks for whoever shared you will not regret following my my repo iier hello how is it going software CDN hello what's up so we are building like again that's that stream that we did quite some time you're not in twitch um I used to get notifications when you're up yeah yeah I'm I'm thinking about switching to YouTube and going away from twitch so yeah let's see so but if you're subscriber to the YouTube channel you should also get notifications I think I think so um why the switch basically because so we we merged here and now we see how the um main pipeline is running so why the switch basically yeah I think on Twitch somehow like also if you now check the stream I don't know how many viewer are here now like 10 I think or 11 since quite some time um on Twitch I never got like I think I was reaching less people and I like the platform somehow but also I thought this morning about it it actually makes more sense to have maybe like one place to have like the videos and everything together in one place streaming on one place I'm not yet sure if it is the case but it seems like it's worth it so far yeah that was the idea because otherwise I kind of feel like I have to build like two platforms I have to build like YouTube because I anyway do YouTube videos and I have to build Twitch and this feels more like I have to build like I focus on YouTube and I kind of forget about twitch but so I'm not yet sure I'm still thinking about it but there are pros and cons to both right um sure no problem so now again the release fails right I told you we will not get it right on the first try reading name semantic release reading name yeah we need branches we need a branches config here I think that's something that they changed in the version um I think we need to say branches main but maybe before we do that you see that's the um have you seen the rocket on pool um that's the the space how is the plugin called space pool that's the space pool plugin um J yeah I'm still a bit um annoyed by that Karma coverage thing where we lost so much time why why am I another main [Music] now now we push because that's like kind of the last did I just reward my changes what did I do I somehow did something wrong branches I somehow reverted my changes so yeah it's a bit sad that we didn't get the coverage working because it would be so cool like then we would have the complete setup right it's annoying it is annoying but now we get a new pipeline run scheduled let me also bump here a bit maybe 150 is enough yeah test and coverage like I mean we generate coverage but just that Al of info I don't know how it's meant to be used with the new Builder I really I really have to figure that out but again I never use car but I still think if you ship the Builder out of the box it should be and you let people configure the reporters with a string that should somehow work I guess that's a buck I guess so so yeah we are building let's see if the release works I don't know if it's yet clear where we are going here with this but I think you will be pretty amazed once we see the final result because I really like this setup I did it already couple of times so we are no so we release M daddy the command kit push dry run yes so that's a cool error that we see here like a cool error that you see behind me let me scroll up a bit because that is basically something where you will probably if you do this setup like lose so much time um so it says basically permission to permission deny to GitHub action spot so the thing here is that by default GitHub action cannot push or cannot do stuff unless you go to settings and then you go you go to um where is it you go to developer settings no that's the access token I think there is somewhere repositories you see I also don't know where it is um but it's somewhere here is a setting I thought it's under actions they change that where is it because I think datab actions blah blah blah no that's not it where is it like ah that that's that's the profile I'm in the okay okay okay okay we are getting there so we go to the I mean there's a lot of stuff coming together repository so you go to your repository and then you go to settings and then there is actions and then you go to General and then you need to go down here and you need to give your workflow permissions read and write permissions and then what we can do is we can basically go to our job and just rerun it and then it should hopefully work I don't I'm not sure like usually when I do this setup I need like four five tries but that's also why I want to do this release Mead maybe even customizable would be nice if you have like if you can Fork it and then maybe run a script and it customizes all the settings for you so that you can just like take it Fork it customize it and then focus on Library setup and then you have like the full setup there right that would maybe be cool that could be fun oh also I have to watch the time because today oo I soon have to go today I have like a how is it called a meeting from a company meeting with the company I own with a bunch of others so let's see so build build build now release okay let's see what it does wo whoo wo we are getting further and we are still failing so we are one step further where we basically um analyze the stuff and then we even have this and he knows okay well we analyzed the commits and the latest one like there was no TX so this has to be version one and then oh my God you know why it fails let's see if it already did something it's the commit hook it's the hook so it failed completely that's good but it's the hook so can we somehow semantic release get can we somehow say please no verify um because it tries to commit is this semantic semantic release kit what kind of options do we have there would be nice if we can really yeah yeah but gear authentification I mean we already do oh we we include the release note which just say like message release next release version skip CI but probably shouldn't include the release notes um what kind of company do you own I own a like own own is maybe the the wrong word like together with a bunch of colleagues we have a nice company um wait I will quickly commit I will explain maybe uh do not commit release notes so basically with a bunch of colleagues we have a company where we do like freelancing together so our our idea is that we act as individuals but still as a company so we act as a company but we are still individuals and you can take a project you cannot take a project we share the accountant we share all those kind of things like the the legal things we are in one company but still you can do whatever you want like you are self-employed you can do whatever you want but we have to company together and it's a pretty nice concept right so it's not that we are doing some we also did some small products together but the general idea is just that it's like um a framework for freelancing for us more or less I would say maybe that's the best way to put it together independent is our um idea yes together independent nice yeah it's a pretty cool concept now this looks better I think this looks pretty nice nice nice post checkout so we are through cool so what happened like probably that's not fully clear because I um let's see you so we released a version to npam that has version one we released the Remy the correct one as we have seen we have the contributors list as we have set up everything now what is the rest that happens and that's the cool thing let's check out our repository we can see that we now have a tag the tag is version one in the tag we have proper release noes we have the source code we have all that kind of stuff there right and then what we also have is we have the package Jason the top level package Jason has the correct version version one the package Chason inside our projects folder that one that one should have version one as well so that's a bug that should also have version one that's something we have to fix but um but what else so we have the release tag we have a chang lock update where everything gets written to the change lck and of course we did the automated release to npm so this is like a fully fully release setup and whenever now a new contributor comes we can just accept the pr we know it's following the conventional commits because we set that up with Husky and the commit link we can merge it and then it will automatically go and release new versions of our package I mean that's that's super con convenient that's so cool maybe the background music should be removed yeah yeah I'm thinking about that I don't know because some people say like that they like the background music some don't so so far I haven't really figured out but I could remove it easily I mean maybe I do want a poll or something like if people like a background music or not but yeah that's basically the setup now we could take this further and of course fix that one bug here um by adding the version here as well then there are a couple of things like committing version maybe not here like maybe here committing the version then we have a new issue that would be um what was it that Karma or basically generate alov info right that's something that and the last one and then we have it like fully complete and that's maybe the bigger one is deploy showcase yeah code coverage yes so those are the three that are basically missing but besides that and then will be like the idea here as well like um that could be something a customization script where make it reusable so let's see that will probably be something that I do like on one of the future streams um yeah I'm also thinking I'm not yet sure what I am thinking about I kind of would like that somehow to have a stream where we basically build I don't know probably a to-do list so my idea was building the same application in react and in angular at the same time like next to each other so we will do something in react and something in hler and I have never written react so I would just be curious how it goes how it feels like I mean for sure angler will feel easier for me because that's where I'm good at but still I would still want to try out how it feels like react like what are the what are the better Parts the worst part and also kind of try to maintain an objective view not to be too subjective because I think re is also some cool things but that was something that I I was thinking of I don't know if I will struggle brutal with the re part because but I mean like you do components you do you write it weird CHS X which I don't like at all but probably many people like it but yeah I mean that could be cool maybe maybe that will be a fun stream let's see anyway I would yeah I probably have to leave at this point so how do we do on YouTube you don't rate anybody right it's just like I think it's just over right I don't think there's a raid function so then yeah so thanks everybody for joining the stream um again this was the first YouTube stream and I think from what I've seen like thanks for the stream this was great yeah thanks for joining and thanks for um thanks for participating in the Stream that's also one of the reasons why I wanted to switch to YouTube because I think now this stream was pretty cool for me also because you folks participated in the Stream helped me and I think that's much more motivating than because on Twitch I didn't have that experience like depends on Twitch I had couple of folks that were always there like iler was always there Tia was always there that was cool but um yeah so it's also Al so cooler if people participate right see you on webinar oh yeah that's Wednesday if you haven't signed up yet good point Chad brains on Wednesday I will be a guest speaker on the chat brains webinar like make sure this one make sure to register where we will talk about angular signals yeah I still have to prepare that probably tomorrow a bit right but I already have it like more or less ready but there are still some things that I need to do okay so then thanks everybody have a great evening have a great start to the weekend and hope to see you soon bye-bye