Workflow: Terminal, Shell, Node.js, VSCode

hello in 2018 or thereabouts I was making a lot of video tutorials around different kinds of things you can make with code that weren't processing or P5 GS and I am ready to do some of that again in particular I am going to make a series about how to code a Discord bot in JavaScript with no JS so I wanted to take a minute for this in what you're watching right now to refresh my old workflow series if you've watched those great maybe skip this one or if this is totally new to you if you have never programmed outside of P5 jazz or processing this is the video for you because I'm going to show you terminal access and I'm going to show you how to install node and how to create your first nodejs project and the videos that follow will hopefully cover in more detail like why you would want to do that in terms of making a Discord bot or some other kind of web server or or project I should say that I am on a Mac and unfortunately what I'll be showing you on on my screen is restricted to Mac when possible I will try to show you screenshots and uh captures of the equivalent on Windows but at a minimum if you go to the video description if you go to the coding train.com the web page associated with this video I will include additional information for the equivalent kinds of things that you might want to do on Windows if you're on Windows because I know most of you are on Windows but I'm on a Mac so here the concepts will be the same my enthusiasm will be the same so hopefully this will be helpful to you if not you could just skip to the next video or a different one it's fine you don't you don't have to stay I made a list of what I'm going to cover so you also could kind of look in the time codes and Skip to whichever part is of most interest to you so I'm going to go over terminal shell what is node and using a text editor like Visual Studio codes I'm going to cover all those things in this video I will not be covering git although that is uh what is git and all of that that is a big part of how I work also outside of the P5 web editor and processing so if that interests you make a make a note to to me in the comments encouraging me to refresh my old git and GitHub for poet series which was probably recorded in like 2016 at this point so that that really needs an update if you're a computer user like me you probably like to make files and open programs and click around and drag windows and type stuff you're used to operating your computer with the graphical user interface whether it's Windows Mac Etc I want to open a window to the computer soul for you I want to show you how to operate your computer in in interface with the operating system do everything you could possibly ever do on your computer but through Texton based commands and the way that you do that is through terminal access now if you watch any my Apple 2 videos you'll know there are computers that just open immediately to a terminal prompt a text prompt where you if you want to do anything you've got to type in the commands my computer does not however built into the Mac under applications utility ities is a nice little program called terminal so you could go and open that up on Windows you might do start command there's something called pow shell the syntax will be different I'll try to address that as I get a little further along here but for me I like to use a different piece of software uh called iterm so any terminal application will do terminal is the piece of software that you run on your computer that op up that terminal prompt for you to type a text command if you're trying to follow along and you're on a Mac go ahead and download this right now and run it this is what it's going to look like now Mac OS is actually a flavor it's built on top of the Unix operating system a very well-known tried andrue olden times operating system I developed in the late 60s early 70s at Bell labs and there are a slew of standard unix commands that I'm obviously not going to teach you all of them I'll include some links of where you can look them up but here are some basic ones for example if I type in Echo and then some text Echo is like print and it will print it back out to the terminal window for me I could also type PWD that stands for print working directory and it's telling me the folder I'm in on my computer is SL users teing I could also type CD change directory maybe I want to go to the desktop now I'm on the desktop and I could type LS for list which will show me everything that's on the desktop I can give it an argument ls- all and it's going to give me the listing of everything on the desktop but with some more information about permissions and file size and date and all that stuff I can also do command K which will clear the terminal window for me and make it all nice and fresh where I could just start over again at the top those are some basic unix commands now there is also this concept called shell so while I'm in the terminal software the place where I can type the commands this is all based on Unix the operating system the shell is the command line interface to that operating system itself and there are different kinds of shells they have all sorts of funny names like borne and corn and Bash and list list your favorite shell in the comments Mac OS uh by default didn't used to be the case comes with the zsh shell installed one of the reasons why I love zsh is you can have plugins for it as well as themes and I love a good theme especially if it's rainbow colored I like to use something called oh my zsh which is a and I agree delightful open source Community framework for managing your shells configuration so you don't need to use this you can do everything without it you might have a different one that you love somebody else might recommend one to you go for it just have fun with your shell color theme it however you want let me know in the comments but I'm going to show you if you want to use exactly what I'm using how to install this one so I can click here on this button install om my zsh and it's going to show me this kind of scary looking things so I should mention if you ever see oh just run this shell script install thing in your terminal pause for a moment ask the question is this a trusted Source this is not something you just want to willy-nilly just copy paste shell install scripts from anywhere into your terminal they could wreak havoc uh it could be malicious all sorts of things could arise uh there but I happen to know I've used this one this is the omsh install script um I don't want to get into all the details about what all these things mean I will mention that that word curl there that's a good one for you to know curl is a command line utility that allows you to fetch data from another server in this case we're fetching a file text file called install.sh that has a whole bunch of shell commands in it and all those shell commands install the theme so uh without getting into it too more all I need to do is hit copy go back to my iterm window you could use terminal whatever you're using I'm going to hit paste and then I'm hit enter and look at that already I see a rainbow of color of om my zsh there's some more information here something really important is this zshrc file that is essentially your configuration file for your shell that's going to come up as I start to install some things later but I'm just going to wipe the window clean with command K I have a lovely blue indicating what folder I'm in right now which is the desktop now I'm ready to install nodejs what node is I'll come back to in a little bit I'm going to walk through how to make your first node project but now let's just look at installing installing node a JavaScript runtime I'll explain what that means in a bit is as easy as going to nodejs.org and downloading the version for your operating system I do want to mention that the tutorials that I'm going to make I will be using node 18.18 which includes some features that are necessary for the code that I will write so that's probably the one you want to use though you're welcome to try a later version one of the the 21 apparently is the current version with the latest features in addition to just downloading the installer that's on the Node website there's a wonderful tool that I like to use called NVM or node version manager this is a separate command line tool from node uh not to be confused with something called npm which I will get to there's a lot of commands and things that I want to do with node NVM is separate from node it is just a utility that will install and maintain multiple versions of node on your computer which I sometimes need to do cuz have a project that's compatible with an earlier version I want to move back and forth I'm helping students and they have this version Let me test it so you don't necessarily need to but let me show you how NVM works I think NVM is technically available on Windows but you might have it's maybe a little bit more difficult to get it running there so if you're on Windows I might just go and install node directly I'm going to click here to install script you can see here's another one of these like oh just curl this thing grab this shell script and run it I'm choosing to decide that this is trustworthy and this will allow me to install uh NVM properly copy back to my terminal paste enter now it's telling me that NVM is already installed that's because I already had it installed uh and it is also saying that it's appending NVM Source string to users teaching. zshrc so this is important when you install a new command line utility it's going to put some things in that zshrc file so what might happen to you I'm going to type NV right now and oh oh I'm so glad this happened I wasn't sure if it would but it actually told me command not found the reason it's not found is because it's newly installed and the shell isn't aware of it yet so a quick thing I could do is just like open up a new window if I open up a new shell window I just hit command n and I type NVM now I can see oh it's it's telling me all sorts of stuff about what I can do in NVM but back here if I didn't want to open up a new window I can reload that configuration file the way that I do that is by saying source and then I happen to know that configuration file is in sluser teing that's my home directory a short hand for my home directory is Tilda slash and then the name of that file which isz shr and by the way if you're typing in a file name and uh you want terminal to autocomplete it for you you can often hit tab it only had one more letter left but I hit Tab and it did it so now I'm going to type that I'm going to enter that that reloaded the configuration essentially restarted the shell and now if I type NVM it's there so what do I want to do once I have NVM you can see there's lots of commands here install use run exact Alias uh I encourage you to look through the readme on the GitHub website about all how all this works pretty much what I want to show you how to do is just use it to install node so I want to say NVM install 18.18 I don't have to say node the only thing I VM installs is node but I do want to give it the version uh I'm going to say 18.18 let's see what happens it's already installed because I already did this um I could just show you like I could install like an older version it's already installed I could install an even older version and oh look it's downloading and installing it so you can see you can install you can install with a specific version or just like the major number like 15 or 16 and it'll pick the last version of that which is 15.14 zero now what I could do is I could say NVM list and this is going to show me there's some other stuff here but basically look I have version 15 16 18 18.0 18.82 20.8 point0 and actually what's important here even though it's kind of maybe hard for you to see with this blue color the default is set to 18.18 I've already set it up that way I'll put on the screen what the command is to set the default but U since I've already set it up that way and that's the one I want to use I can type NVM use I could give the number but in this case I'm going to say default and now it's using node version 18 before it was using 15 because you can see that's highlighted in green and I can confirm that by actually executing our first node command node-- version so typically with anything like NVM node curl these command line utilities there's the name of the command and then arguments to it and different commands have different syntaxes with dashes and Etc so I don't know how to be comprehensive about that but here I'm saying hey node tell me what version you are and version 18.1 18.2 so I am good to go the next thing that you will need to start your first node.js project is a code editor somewhere where you're going to be able to type the code now to to be the truth of the matter is you could actually get a code editor right here in terminal and one of the ones that I love is something called Nano but there's vim and VI and all sorts of other esoteric interesting strange tools you can use right right there in terminal you could use notepad you could use text edit anything will do I happen to these days be using a code editor called Visual Studio code uh it is a product of Microsoft um it integrates well with a lot of the other things that I'm doing it has some great features so I'm going to show it to you you're welcome to follow along but again you could use whatever you want if you're using a different code Eder you have your own favorite one please let me know in the comments i' like to hear those things step one is to download and install it for your operating system I'm going you pause the video if you want to do that while you're following along I've already installed it and there it is Visual Studio code now Visual Studio code is something you know I could probably be here for the next six hours going through all of the features and possibilities of configuration settings I am not the most Adept at Visual Studio code and all of the like latest and greatest on the bleeding edge things you can do with it I'm just an old man trying to use a modern Text Editor to write some code but I am going to show you a few things the very first thing is let's just look at the visual studio code preferences now extensions is going to be something very important there are so many extensions and add-ons you can you can install individual Studio code I'll show you a couple but let's first go to settings which I can also get to with command comma and maybe the first thing that I want to do is right here just make the font size bigger which maybe you don't want to do but I really have trouble seeing these progressive lenses only get me so far plus I'm recording a video tutorial so let's make this bigger now you don't see anything yet but but you're going to in a minute because I'm going to make a new file new text file so soon I'll get into more about uh how to open a directory of files and configure a project but let's just pretend for the moment that I am going to save this file on my desktop and call it Cho cho. JS and in this text file I am going to write a little bit of code now on purpose I've made this kind of horrific to look at I'm having a slight mild uh amount of panic right now not to worry I'm going to show you one of the most wonderful extensions you can get for visual studio code and it is called prettier this button over here on the left is for extensions and you can see some recommended ones some popular ones I have none installed again I I did wipe my visual studio code settings before I started so I could show you these steps I'm going to type in prettier I'm going to click on it and we can see more information here about the code formatter prettier I am going to hit install it is now installed I'm going to go back to my file and now I want to issue a prettier command that will reformat all of the indentation and everything in my code one of the ways you can execute any possible thing that you could ever do in Visual Studio code is through the command pallet so most things are available through the interface there's view selection run Etc you can see here right where was that command pallet shift command P this now is a giant list of all sorts of things you can do in Visual Studio code you can see the two that I use of what I intend to show you are already at the top because I've recently used them but I can just search for one like I want to search for formatting document I'm going to click format ah look at this it's telling me to configure a default formatter I forgot about that so what I want to do is I want prettier the extension to format my code so let's click on figure and I'm going to pick prettier and then look at that it made it all pretty for me let's pretend for a moment this was a p5js sketch just so there's a little bit more code let me format that again beautiful I don't really want to have to run that format command every single time I want to I just want it to autof format every time I save guess what there is a format code on save preference it's somewhere in here but I'm not sure where luckily with all of these preferences and settings there's so many of them I can actually search for something so let me just type in format and oh it came up editor format on save so let me click this and now I am going to add some more code I'm going to hit save and the code autof formatted I know I'm spending a lot of time on autof formatting the code but it's one of these things that brings me a great deal of pleasure in life so please indulge me another setting I really like to have on is render white space so right now I don't actually know is this a tab is that a space how many if I select it you can kind of see those dots there and I actually always like to see the dots so if I go back to those settings and I look for render whitespace I can select all as the option and now you can see those those little gray dots everywhere there is Whit space I'm showing you how to configure all of the settings in the preferences settings menu but that's actually not the way that I do it there happens to be a file called settings. Json that includes all of your settings in JavaScript object notation for you you can find it by going to the settings command comma and then clicking on this icon right up here if I click on this open settings Json this brings me to this and by the way it's look at it it's saying my default formatter is prettier uh format on Save is true render whitespace all font size 32 so you can always already see these are all of the settings that I've set it's not formatted the way I like so if I hit command s wait a second it's not changing it what's with the four spaces well I've got good news for you before I wiped my settings I created a GitHub gist which is a nice way of just dropping in a text file to save as part of my GitHub account uh settings. Json you can see it right here and I can just grab all of this copy it go right back into my settings. Json file paste it in hit save oh you can see it changed the font size because I actually had it at 24 but let's change that back to 32 hit save again you can see it autof formatted the Json file and I've got some other things like I prefer a single quote style many many many more things so please let me know what setting am I missing here I will include as part of the materials that go along with this video check the description a settings. Json file that you can copy paste if you want to use the same exact settings that I'm using couple more things to show you about Visual Studio code before I wrap this video up one thing that I really love to do is use the code command from terminal so what am I even talking about let me go back to that command pallet and you can see there shell command install code command in path now that might not show up first for you just search for shell and you'll see the only two options are install or uninstall I'm going to click install code command in path I'll talk to you about what that means in a minute let's just do it first shell command code successfully installed in path to add the equivalent code command to your path on Windows there's actually a setting during the visual studio code install so I'll include information on how to do that and show you a screenshot of where that setting is right here next to me what is the path everything that I've been running in terminal like when I type NVM that command is available to me because it's part of the path the path is the environment variable on the computer we're going to talk more about environment variables when I get into making a Discord bot that stores all the folders and directories in places on your computer where there are commands that you might want to execute through the shell in terminal so the fact that this new command code was installed in the path means I can just type the word code anywhere into terminal guess what that did it opens Visual Studio code so that might not seem too exciting because I could just open Visual Studio code by you know clicking on the application icon but this is what I use it for let's look at what folders are on my desktop I've got a folder that's called nooc book that's for the nature of code book project that I'm working on a syllabus there's a folder for a syllabus there's the coding train.com website lots of stuff I'd right now really like to look at all of the files that are in the coding tr.com that folder that has all the source code for the coding trains website guess what I can do I can type in code and then I can type in the name of that folder I can tab complete it I can hit enter and all of a sudden I have now a new Visual Studio code window open that has along the left this directory tree of all the files inside that folder I was able to open the coding tr.com project in Visual Studio code directly through one command I can also do that through file open folder for example I could go to the desktop now and pick the nature of code book directory and now you're seeing this I'm going to close this file I don't want to make any changes to it I'm going to close these files I'm going to close the nature of codebook workspace and I'm back now to just this single file now this is me typing some p5js code into a JavaScript text file on the desktop of my computer I could build this out into a full P5 sketch that I run and from Visual Studio code and host locally that's something that I trying I'm sure I've done that in another video somewhere I'll link to it if I can remember that's not where I'm going right now this isn't any code that I could run the next thing I want to do is show you how to actually run JavaScript code with no node what does it mean that node is a runtime for JavaScript and what does it mean to run node scripts as well as build out node projects I'm going to put that into a separate video we will follow directly from this one in a playlist or a track that's on the coding Train website for making a Discord bot so uh if you want to learn about that I'll see you [Music] there

Channel: The Coding Train

Views: 71,314

Keywords:

Id: 46WOuOrMwTQ

Length: 23min 30sec (1410 seconds)

Published: Wed Nov 01 2023