Live Server Extension for Visual Studio Code | Full Tutorial

hi everyone welcome back to my channel coding with Stephanie this is our second video in the series where we will be covering Visual Studio code extensions in this video we will talk about the live server extension how you can use it and how you can customize it with live server you can preview your websites and web applications in a live browser window without having to manually refresh the page each time you make a change to your code when you make changes to your code in any of the files live server detects those changes and automatically reloads the page in the browser this can save you a lot of time right no more clicking on the reload button awesome so let's see how you can install it and how you can start using it here we're in Visual Studio code if I go here and I open the extensions panel I can search for live server and here I click on the first result it's the result that has more than 36 million downloads so far after I see this I click on the install button after the extension is installed you will see these two buttons after you install the extension the first change that you will see is this button go live this button basically starts that local server and opens the HTML file on your browser on your favorite browser or default browser here I have my folder opened with two files HTML and CSS you can have a quick overview of the content of this file I only have one CSS selector over here so we can see live server in action so if I go here to my HTML file I have two options to start live server I can either click on this button or I can right click here and choose open with live server this should work on Windows and Mac okay here I'm using a Mac but it should work exactly the same on Windows just to try it out let's click on this button I'm currently in my HTML file okay if I click here I see starting and I immediately see that a new browser window is opened in this case Chrome a chrome window and I see my HTML heading with the style that I applied you can see that we are working on a local server this is a local IP address we have the four 5500 and here we are currently seeing the file index.html awesome so let's make a change and see what this does here I have my browser window to the right and my visual studio code Editor to the left so let's make a change to one of these files let's change the color of the heading and let's see what live server does if we didn't have live server and we made a change to these files we would have to click on this button the reload button continuously but notice what happens if I change the color over here if I change the color over here and then I save my file with Ctrl s or command s you can see that this style was automatically updated here we see that heading in purple now so that is awesome no more reloading with this button manually you know how it works and how you can start the server right but after you are done working with that server you will also need to stop the server okay because otherwise it will continue running here on your local IP address on localhost to stop it you just click here where it says Port 5500 and you just click to close the server and now you see the button again when you install the extension you may also see a pop-up a message here that says that the server has started or stopped great so now let's see how you can customize the settings of this extension because it has many different settings that you can customize some of them are more advanced but the just depends on your background on web development and back-end development so let's go to my installed extensions let's find live server here and if I click on the gear icon and then I choose extension settings I will see all the extensions that apply to live server here we have advanced custom browser command line Chrome debugging attachment usually we keep this exactly the same as it is you don't necessarily need to customize this okay we can choose a custom browser we specify the custom browser settings for live server by default it will open your default favorite browser so here I have no so this is the default option but you can also choose it explicitly like chrome chrome in private mode Firefox Firefox in private mode Microsoft Edge please or any other browser that you have installed on your device I will keep this in no and here I also see the setting to not show the information message this setting disables information pop-up messages from the extension currently I have that customized by default it will be disabled so we will see the messages okay what happens here if this is disabled is that when you start a server thanks and you click on go live like this you will see this information message server is started at Port 5500 I had this disabled now I enabled it and it will be enabled by default but you can also customize this okay we can also see do not verify tax we can also turn off prompt warning message if the body and head or other supporting tag is missing in the HTML by default this is disabled we can enable it when set we can also serve this file for every 404 which is a status code that says that the resource was not found in the server it says that this is useful for single page applications okay if you have experience with back-end development then this setting is for you we can also enable full reload this can also be helpful by default live server injects CSS changes without full reloading of the browser you can change this Behavior by making this setting as true this is also helpful for a full reload of the browser we can also switch between localhost or this local IP address by default we will use the local IP address and that is what you will see here on the browser over here on the search bar this is the local IP where the server is running you can also set this to localhost if you would like to see localhost over there you can customize the settings if you need to use https for the server as well you can enable it you can add your cert you can add your key passphrase you can also ignore specific files you can configure this by editing it in the settings.json file so for example by default you will ignore any file in the hidden BS code folder you will also ignore SAS files scss files and typescript files but you can customize this if you open the settings.json file and you can also mount a directory to a round that is also related to servers and back-end web development you can create an entry point of the server when you're in multi-root workspace and that is something related to visual studio code you can have multiple folders opened and you can also set if this is true if this is enabled the live server will start without any browser open so by default when you click here on the HTML file and then you start the server a browser window will be opened automatically but if you just want to start the server without opening a new window automatically then you can just enable this option you can also set a custom port number if you don't want the port number to be 5500 then you can customize it in settings.json here you can set it to zero if you want a random Port if you just want to reset this setting you can just click here on the gear icon and reset the setting and you can also use a proxy you can set the custom route of the live server as well and you have many other configurations show on the status bar use a local IP as the host use a web extension the browser extension and this can also be helpful this is the last one this is the delay before live reloading by default the value in milliseconds is 100 but if you would like to reload your application even faster than that you can set a smaller number or a larger number if you would like the reload to occur less often awesome so this is live server I hope you like this video and stay tuned for my upcoming videos on Visual Studio code extensions I will see you in the next video have a great day

Channel: Coding with Estefania

Views: 30,463

Keywords: Learn to Code, Programming, Code, Coding, Visual Studio Code, Live Server, Code Editor

Id: _Tl-6HeV0Rc

Length: 8min 54sec (534 seconds)

Published: Wed Jul 26 2023