How to Setup Live Server on Visual Studio Code

Endrit Qerreti

Endrit Qerreti

In this tutorial you will learn how to create a local server on your computer to view HTML changes in real time, just like you would see if you uploaded the HTML file on a normal server. If you are into web development and work with HTML, CSS and Javascript then this extension is going to make your work easier.

Step 1 - Launch Visual Studio Code

Launch visual studio code, click to View on the menu bar and choose Extensions.

You can also open the extensions window by pressing CTRL + SHIFT +X.

We used Linux Mint in this tutorial, if you don't have Visual Studio code installed in Linux Mint, you can easily install it by following our tutorial How to Install Visual Studio Code on Linux Mint

Step 2 - Install Live Server Extension

Once you open the extensions window, we need to lookup for the live server extensions.

The extension that we need is called "Live Server" which at this time of writing this tutorial has 32,581,652 downloads.

To do this, simply type "Live Server" on the search box and press enter, and you should see all results based on your search.

Next, click on the first result as showing in the image above, and click the install button to install Live server extension

Next, you will see the disable and uninstall button once the installation has been completed.

Alternatively you can Install this extension by pressing CTRL + P on Visual Studio Code, and executing the install command

Run the command below in the search box and press enter

ext install ritwickdey.LiveServer

And the installation should begin.

Step 3 - Add project folder

Add a project folder on visual studio code in order to test if the extensions runs without any problem.

Go to File >> Open Folder >> and upload your project

Step 4 - Start Server

Now that you have added the project, start the live server by right clicking over the index html file on your project, then click to Open With live server. Index.html is the file that you'd need to open with live server. However, this depends on the project.

Next, you should see this pop up, this means the live server has started.

And it should also automatically open a tab on your browser which address is 127.0.0.1:5500/index.html

If your browser doesn't open automatically, you can manually go to 127.0.0.1:5500 with your favorite browser and any changes made will also appear there.

Another method of seeing the real time changes on your project is by using the "Embedded Preview" feature on visual studio code,

And you should see the html file rendered

How to Stop Live Server

You can stop the live server by clicking the Stop icon on the blue bar as shown in the image below

Once live server is offline, you can start it again by clicking Go live button

How to Uninstall Live Server Extension

Click View button and then go to Extensions, then search the extension you want to uninstall and click on it, once you are in the extension page you should see the uninstall button.

Conclusion

In this tutorial you learned how to create a local server through Visual Studio Code to improve your productivity and make your job easier.