Building a Command Line Tool with Javascript

Key Takeaways

command-line interfaces one of the preferred way for nerds like us to get stuff done people who are better essentially in using the keyboard than the mouse in this video we'll learn how to build a JavaScript command-line interface using node.js that run from anywhere in your command terminal our example will be building a command-line utility called touch 5 which is just a knockoff of the touch command that creates an html5 template file instead we will learn how to create the code create a shortcut command for our code and link it with the operating system so you can run it anywhere if you new here welcome my name is russain and in this channel we discussed or sort of software engineering by example so if we want to become a better software engineer consider subscribing hit that be like and so you get notified every time I make a new video well that's it let's just jump into this video guys all right so let's go through a little bit of it touch command guy for those of you who don't know this command so the first command essentially is a command that you basically give it a file and it will create the file wherever you want essentially it's in the same directory you don't specify a path and it will create it for you and we run essentially anywhere you want okay so what I want to do is to create a can knock off for touch five command which you give it like index dot HTML and this will create essentially an html5 version of that file okay let's just literally create a new file and then shove the HTML template five templates in it okay very simple stuff obviously it doesn't exist that's why I'm getting to this arrow so let's just jump into the code guys to start this we need visual studio code or any text editor we need nodejs installed just go to node gesture org and install that thing just make sure no - vimi gives you a result and you're good to go right so let's go ahead and create a new project go ahead and go file open then I'm gonna create a new project called touch v here it's a brand new folder nothing in it so I'm gonna go ahead and create a folder and then I'm going to create an index to J's file our entry point of this thing okay let's start with just printing some things simple hello all right and to run this you go to the terminal in the same folder okay there's an index DOJ's and if you do know it indexed ojs you see that the command is executed but you need to type literally no space index.html so what what we need here to to build this application touch five right to build that we need two things right we need the file name right so the user need to specify node index dot Jas and then space the file name on top of that okay and we need to get access to the current directory that this is executing it - so two pieces of metadata where do we get it very simple stuff there is a variable or argument that nobody gives us is called art V and if we printed this right let's go ahead and execute it you can see that it's an array of arguments and we get four free two arguments that were useless for us but the first argument is where node is running from the second one is the input code that we want to execute okay and anything after that you add like say my file will be added to this and if you add something else it's gonna keep adding to that argument okay let me make sense so this is what we want so essentially the 0 1 to the third argument is our file name correct so that's what we want to get so that's our file name the third arguments always gonna be the file name that we will write to the second thing we want to know is essentially where is this file again and this is done by process dot current working directly and you execute this function and it's gonna give you the current working directory which happens to be the same directory as we are ok so two pieces information and it's a little bit different from underscore underscore dir which we're gonna use later let's get let's just get into it right so there is that I'm going to right a new function called raw function right html5 code and here's what we need we need obviously the file name right and we we said right argument dot R V sub 2 0 1 2 2 is the third argument which is happen to be the file that we want to write and we essentially want to write it to the desk to write it we need a library a fancy library called file system so let's go ahead and require that file system library it's called FS and free to FS the right before we require anything we need to make my project into an NPM project we need to make it into a node.js project so to do that literally just go to the command line instead of NPM in it - why that means just shut up I know what I'm doing don't ask me any question just create a package to Jason for me create a project ok the moment we do that we get a package - Jason which were you gonna use later and it's gonna give us this nice intellisense like this one because we didn't get it earlier right so now write file sync is what we wanna use we're gonna write this file synchronously we don't care about in synchronous right now it's just a simple test we want our code to look a little bit prettier and we need to give us the path the path is guess what it's the path which is process dot current working directory slash the filename the whole file name is this that make sense right guys what do you want to write it what right - we just want to write HTML like buddy this is not an html5 template but we're gonna fix it guys but this is just to get the tires kicking ok so we have that looks good we need to call this function that's why it's a little bit alike I don't know if you can't tell from my youtube video hopefully I record in 4k so you can't see these things a little bit different so now if I do a node indexed ojs and I say my file - - DML before you can see that enter I go to my file and look at that it created a file called my father's team and that's the html5 again this is not html5 God will fix that don't worry about it we'll fix it later okay but now I have that how about that nice except it's boring or saying you want me to write all of this just to write that might as well just write the file myself this is boring plus this doesn't work everywhere guys it only works in the current directory so boring how do we fix it to fix it we need to do is establish this link that we talked about and it's very simple stuff yeah so you go back to your folder let's delete this so you get you know guys don't get confused so now we have two files like the packaged adjacent which we just created which is this our project that's actually and then then next situation is I'm gonna create a file essentially a bash file which will be executed when the touch 5 commander skull which doesn't exist yet right and I'm gonna call it so avoid confusion I'm gonna call it I don't know Martha okay something else right I don't want to call it touch 5 so you guys don't confuse that it has to be named by 5 right and then reading online I get all this confused between these two so I'd like to still kinda separate thing concerns right as long as possible and this is a batch file so what you want to write is essentially things that I keep forgetting so it's hash tag bank slash user bin in and this is an environment and the environment is note so anything after that is note code that means if I do console dot log and I say hello a word I'm Martha right if I do that now and this is not enough so now I want to execute Martha how do I take your Martha you go to the back adjacent and you create a new entry called bin the binary right then it's just a JSON file and the key for to that is your command that you your beautiful command that the users will see that the users will you and what it won't run essentially is you would think that you want to hide so that's Martha okay and obviously guys you can create folders like then and sorts but I don't like to throw them folders for no reason whatsoever because just confused thing right it just doesn't have to be a bad folder it's just we can throw it anywhere you want for organization obviously yes but you know me I like something simple I don't like to complicate things again that's five Martha will get executed okay Martha has this code so and this now binary is now configured one last thing to do to link it or not to link that is the caution so we're gonna do a sudo in p.m. and then you do literally link and this command will look for the package that Jason it will find there is a Ben it will find Martha will find touch for finally connect link them together it has to be pseudo because it's that link it'll the wiring system so it's like an operating system command so it's an admin and look at that touch Fife is now created and then Martha it's linked to more than so now if I do touch five here it's executed if I go somewhere else let's go to the command prompt that's five runs if I go to any folder touch five it runs that is beautiful stuff it runs everywhere that's what we want guys but the message is just weird what the heck is this hello world I'm Martha mmm let's write some real good guys so go back to Martha and let's write actual nodejs code to there will actually execute our code guys what do we do what do we do okay here's where our code is and here's where the bash so we need to require that and then execute it right we're gonna call this function which is called write HTML 5 to do that you're gonna do exports dot literally any file any function name you on let's go ahead write HTML 5 public right I don't want to use the same thing just so you guys know that what's difference okay so that's the function I just wrote it's here and that's the function that the public will use and the first customer is Martha Martha let's do this okay so I'm gonna require a code and then it's literally you're gonna do slash index to GS you don't have to do is in addition to GS you do that and then you do call right I forgot this function name already write HTML phone public and then you boop-boop and what bucket is that enough let's see hopefully it's enough let's go to the command prompt now if I do touch 5 and I say Hossein dot HTML oh something happened yes created the file what's inside it what's inside it what's it ooh it worked it worked and if I do like touch 5 admin dot HTML if I can spell Edmund look at that nice stuff all right one last thing guys one last thing what I want to do is essentially do a real HTML page 5 page so we're gonna do is index HTML 5 and visual studio cause give us like a nice shortcut where you can do the add HTML 5 and it will just spit off an actual HTML 5 how much supposed to look like and here what we want to do is read the HTML 5 so do what file system to read file synchronously does why not and then what were we doing to do is here we need to use the dir name okay and then index dot HTML the iron name is where your code is located it's not processed the current worker directly is where your process is running from the directory so these are different okay so the other name is where the code and it's always gonna be in the same code right because I'm I want to get the index.html and you cannot use like was it called relative directories because it's gonna get confusing right especially if you're running from different directory so you gotta use the dir name you got a dad we got html5 and that's what we will spit and then that's what just saved go back and then let's just do touch five at mando HTML let's check it one check it ma whoo fancy fancy so alright guys hope you enjoyed this vid so we built a command-line utility from sick garage from nothing and we built a cool application so guys take this and run with it you can write your own command-line utility that will help you do stuff and maybe in another with you we're going to show you how to publish this to the NPM package repository or registry or whatever they call it where you can go to another computer and do NPM install touch five and you can immediately use it right install it globally so you can use it everywhere alright guys hope you enjoy this video if you enjoyed it give it a like and share it with your friends and I'm gonna see you in the next one you guys stay awesome