How to Run Node.js in VS Code From Scratch

so you're learning javascript and you've played around with some tools in the browser that can run that javascript for you but how do you run javascript on your own on your computer in this video we'll take a look at running node javascript inside of vs code all right so just want to start off with a little bit of a shout out here i for those of you who don't know am teaching a boot camp called launch code and this round of this bootcamp is virtual so it's got all of its interesting challenges but what we're doing is we've been starting off using a tool called replit where we can write javascript in the browser and run that javascript in the browser and i bet a lot of you have done something similar either on free code camp or on w3schools or lots of other things where you can run javascript in the browser well we're really ready here to kind of run this stuff on our own inside of vs code and that's what i want to show so the two things you're going to need to be able to run javascript inside of vs code on your machine well you're going to need vs code and you're going to need node installed so code code.visualstudio.com you can download vs code for either mac or windows it's a pretty straightforward process of click click click and there it should be good to go similarly with node so from nodejs.org you can download either the installer for windows or mac and for people if you're on uh if you're on linux as well you can do that also with vs code and node as well but most problem prominently we're talking about windows and mac so you'll need to have both of those two things installed now let's go ahead and look at vs code and i'm kind of approaching this from like you're brand new to vs code and you're trying to figure out what's going on the first thing you probably want to do is to open a project or a folder of some sort so notice that i've got lots of things that i've done in my recent well you may not have anything so let's start with opening a folder and now vs code is going to let us go and choose where we want this to be well a lot of my code lives in a directory called code and you can see here's all the things that are in there and then i have a delete me folder which is where i can kind of throw stuff that i know i don't need to keep so this is where i'm going to work and what i'm going to do is i'm going to create a javascript test folder so this is just it doesn't matter what you call it it doesn't matter where it is on your computer but pick a folder and it probably has nothing in it to start so go ahead and open that up vs code will open that folder it will show you in the explorer on the left what files there are inside of that folder in this case i don't have any that's totally fine so i can create a file in here and i can call this app.js for example and now i can write a line of javascript so again i'm kind of thinking about node javascript instead of browser javascript so specifically for node here so i've got this i got this file i've got a piece of code in here now how do i actually run it well the beautiful thing at least from my perspective of vs code is that it has a built-in terminal so if you go to view and then hit the terminal here you can toggle the terminal that's built into vs code and this is where we can run our node command to be able to run this file now i've gone through and i've kind of customized my terminal you can go into the vs code configurations and you can choose what your preferred terminal is if you're on windows probably by default it's going to be either command prompt or i'm totally blanking on the other power cell is the name of the other one and on mac it's probably just the built-in terminal so i've got mine customized a little bit but you should have a turnable turnable a terminal in here and this is really cool because you don't have to open up like a separate application that's right inside of vs code so what you do since you have node installed and you can double check this with node v to double check that it is installed and it should show you which version is installed from here now i can run nodeapp.js so node and then the app the name of the file that i want to run so if i run app.js it will run hello world if i then created a new file and called that app2 and said hello world 2 whatever it's not a super important and then run a previous or run a new command of node app 2 this will run the second one so any file that you want to run you can run that way now the other thing i want to show you is there's a package called nodemon which is insanely cool it's really really cool and you can install nodemon npm install g of nod mom and what this will do is basically start a live reloading server for a node file so once you have that installed you can do this you can say nodeapp.js and sorry actually nodemon app js because we're trying to use nodemon here and it will tell you hey it started node fjs and it's kind of waiting for changes to restart changes uh come on save so when i save this file i just did it restarted here if i update this then notice that it reruns this again so this is a live reloading server with node it's fantastic i highly recommend this now the last thing i want to show you that is very useful as well is inside of vs code there are lots of extensions you can search these they're super easy to install and there's one qual quad called quoca and this is a javascript and typescript playground in your editor so with this extension installed what you can do is command shift p or control shift p to get the command palette uh command shift p on mac control shift p on windows and then here you can then search quoca and then say new javascript file so this thing will create a file for you and notice that it switched down here from terminal to output and i can run something in here oh that should be a string if i know how to type real code so here's my hello world notice that it kind of shows me what the result is here but then it also is a live reloading server and will show me down here so this actually uses the node commands underneath the hood but it does the same type of thing so i would say anytime i'm just trying to like do a little bit of scratch pad work just testing something out really quickly i would throw it into here and see if i get the results that i expect but the majority of my stuff would be actually working in different files running the node or nodemon command from the built-in terminal in vs code again i like that all this stuff is really packaged together and that's how i do it so i'm curious if there's any uh if there's any steps or tips and tricks you have for running node inside of vs code that i might have missed throw them down in the chat below but i hope you enjoy the video hopefully for the people in class this is helping us as we transition to vs code anyways thanks again for checking out the video and i'll catch you next time

Channel: James Q Quick

Views: 259,724

Keywords: vs code javascript, nodejs tutorial, nodejs vs code, visual studio code, web development tutorials, vs code tutorial, quokka extension, quokka js, quokka js vscode, web development, visual studio code javascript, node js tutorial for beginners, vs code terminal, how to run node.js in vs code, how to run javascript in vs code, how to setup vs code, node js tutorial, node js download, vs code download, vscode javascript

Id: sJ7nDNNpOMA

Length: 6min 25sec (385 seconds)

Published: Sat Nov 07 2020