How To Run JavaScript In VSCode with Node JS (LiveServer localhost)

hey guys in this tutorial I'm going to show you how to run JavaScript in Visual Studio code in three different ways we're going to run JavaScript from the terminal we're also going to run it using the code Runner extension on the command line and finally we're going to use the live server extension to run JavaScript in vs code inside a browser running on localhost address for web development and before we get started I'm gonna ask for one small favorite from you guys which is to leave a like for the YouTube algorithm it does take several hours to put these videos together so a simple like does help the channel quite a bit okay so go ahead and go to Google and type download nodejs and in the search result go to the first link now you will end up on this page for Windows installation I'm going to get the 64-bit version just click on the button and the file will start downloading now that you download the file go ahead and simply click on the file to start the installation process press the next button accept the node.js agreement click next and make sure to install it to C slash node.js now the installation is going to take a while so I'm just going to speed this up until it's fully installed on our system now just go ahead and click on the Finish button and in The Next Step we're going to add node.js to our environment variables now in order to do that go to your start button and start typing environment variables now go ahead and click on the open Button or just hit enter and on this window go to environment variables button and here in the box at the bottom locate the system variable that's called a path click on the path and go to edit so here go ahead and click on the new button and type C slash node.js or just make sure that this matches the folder where you installed node.js in the previous step now I already have node added to my path and environment variables so I actually added it a second time which I can probably just delete that but make sure that you have one copy of the C node.js installation folder there now just click ok ok and okay now as soon as you do that you'll be able to run node anywhere on your hard drive including from Visual Studio code terminal now go to your start button again and start typing CMD and hit enter and on the command line that shows up type node dash dash version and if you see the version of node displayed here here that means node.js has been successfully installed on your system now go ahead and open a new Visual Studio code window so here's my blank vs code editor and go to extensions button and start typing JavaScript es6 Snippets I already have this installed but go ahead and click on the install button right over there now go to extensions search box again and start typing code Runner so here go ahead and click on the first search result and that says code Runner and again I already have this installed but go ahead and click on the install button now go ahead and close all of the windows in vs code and what I'm going to do is I'm going to create a new JavaScript project so I'm going to go ahead and go to file open folder and here on my C drive I'm going to go scroll down here to my projects folder here I have my projects folder I'm going to go inside here I have typescript react python next JS C plus plus angular and all of those projects from my other tutorials on this channel so I'm going to go ahead and go into my JavaScript folder and I'm going to click on the YouTube folder that I prepared for this tutorial and I'm going to click select folder doing that will open a JavaScript project in vs code and so what I'm going to do is I'm going to run JavaScript on node.js from vs code so I'm going to go ahead and create a new file by clicking on this button here I'm going to name it youtube.js and in this file I'm going to write a simple JavaScript program and all it does is basically just print out a simple message on the console so here I have hello from node.js or maybe hello from JavaScript now we're going to run this from vs code terminal first so go to terminal and click new terminal and here in our Visual Studio code terminal on the command line type node and the name of our program which is youtube.js and as you can see we successfully executed this youtube.js file printed out a message to the console now there's another way of running JavaScript in vs code and that's using the code Runner extension we installed earlier so in the upper right corner here after installing coderunner there will be a play button or also known as The Run code button so go ahead and press on that and that's the second way of running your JavaScript individual Studio code okay guys so this is only for running JavaScript on the command line with node.js but how do you actually run JavaScript as a website running on localhost as a web server in your browser now let's head over to the extensions tab again and type live server click on the first search result and click on the install button here I already have it installed in my vs code but go ahead and wait for it to install then go to this settings button and go to extension settings option now on this page in the upper right corner click on settings.json button and in your settings.json file which could be empty but just make sure that you have this line over here that basically says live server dot settings dot Advanced custom browser command line and name of the browser you want to open your JavaScript code in which in my case it's Chrome so just make sure you have this line and save settings.json file now let's go back to our project so here I have my basic JavaScript file with the title of how to run JavaScript in vs code from localhost address in Chrome browser on Mac or Windows and so once we installed live server at the bottom here you will see a new button saying go live and pretty much that's all you really have to do just click on go live button wait for the browser to open this page over here now here I have my JavaScript running in the browser and the cool thing about live server is if you edit this Javascript file in vs code hello from JavaScript live server and hit Ctrl s to save the file it will automatically reload in the browser as you're editing it so if you want to set up running JavaScript in vs code for web development this is definitely the way to go so guys in this tutorial I've shown you three different ways of running JavaScript in vs code one was from terminal then we used the code Runner extension and then we used the live server extension as well I hope this tutorial is helping someone out there if so like the video and post a comment and thanks for watching guys

Channel: Ghost Together

Views: 38,696

Keywords: javascript, run, how to, vscode, terminal, command line, cmd, nodejs, node js, live server, code runner, html, website, browser, chrome, localhost, webdev, web development

Id: 0gFp6U1RGzM

Length: 8min 32sec (512 seconds)

Published: Wed Nov 23 2022