Live Server in Visual Studio Code

If you’re building websites or learning web development, you may find a situation where you have to refresh your page every time, while changing a small part of your code. This is the place where the live server comes in. The live server extension in Visual Studio Code helps you to see the changes directly on the web browser without refreshing the page again and again. In this blog, we will learn everything about the live server in VS Code, how it works with localhost, and how to fix the common problems if anything is not working properly.

Table of Contents:

• What is Live Server in VS Code?
• Why Use Live Server in VS Code?
• Steps for Installing Live Server on VS Code
• Supported File Types For Live Server
• Common Issues with Live Server in VS Code
• Conclusion

What is Live Server in VS Code?

The Live Server is defined as a tool that helps web developers to see real-time changes in their code. It’s available as a Live Server extension in Visual Studio Code (VS Code). The live server automatically opens your website or webpage in a browser and refreshes the page every time you save your code. Thus, if you change any text in HTML, update your CSS, or change logic in JavaScript, the browser will reload automatically and display the changes.

Why Use Live Server in VS Code?

If you’re the person who starts learning front-end development or an experienced developer who creates websites, using a live server helps a lot and saves time. Here is why using a live server is important in VS Code:

1. Automatic Refresh: Live server extension in VS Code automatically refreshes the webpage every time you save your code, without any manual intervention.
2. Live Preview with Localhost: The live server uses localhost to show your website. This allows you to view your website in real time without refreshing your page.
3. Works with Many File Types: The live server is not only for HTML. It also works for CSS, JavaScript, and even some frameworks.
4. Easy to Use: The live server is very easy to use and helps you work faster. You just need to install it on your VS Code.

Launch Your Web Development Career

Start Learning Now

Explore Program

Steps for Installing Live Server on VS Code

Installing a live server on VS Code is a simple and easy process. Here are the steps to download and install the live server extension in VS Code.

Step 1: Open the extension panel in VS Code.

First, open VS Code on your computer, and on the left side, click on the square icon that has four small squares. This will open the extension panel from which you can download any extension.

Step 2: Search for Live Server

In the search bar, type live server and click on the search button or simply press enter. Look at the extensions and find the live server extension made by Ritwick Dey. After finding, click on the install button and install it.

Step 3: Open an HTML File

To use the live server extension, you need to first open an HTML file. You can open either an existing file or create a new file.

Step 4: Start the Live Server

Once you install the live server, in the bottom right corner, you will see the “Go Live” button. Click on that button, and your website will open in your browser at http://localhost:5500. Now every time you save your code, the browser automatically refreshes the page.

Step 5: Stop the Live Server

To stop the live server, just click the Port: 5500, which will appear in place of the Go Live option. You can also press Alt+Q in Windows or Option+Q on Mac to close the server.

Supported File Types For Live Server

The Live Server in VS Code is mainly used for doing front-end web development, and this live server extension supports several types of files that are commonly used for building websites. Here is the list of files that are supported by the live server:

• HTML (Hypertext Markup Language) files
• CSS (Cascading Style Sheet) files
• JavaScript files
• Images and Media files
• Other files, like JSON and SVG (JSON is not rendered directly in your browser)

Common Issues with Live Server in VS Code

Sometimes, even after successfully installing the live server extension, things are not working properly. Here are some common problems that will be encountered by users while installing and running the live server in VS Code:

1. “Go Live” Button Not Showing

After successfully setting up the live server, if you still haven’t found the “Go Live” button, it means either you may not have an HTML file open or you may work outside of a folder or project workspace.

Solution: Make sure that you have an HTML file open in your VS Code, and if anything is not working, then it’s a good idea to restart your VS Code.

2. Live Server Not Refreshing

Sometimes, the live server opens the site in the browser, but doesn’t reload the content when you save changes. The solution is to make sure that you’re saving the file properly, or restart the live server by stopping it and clicking on Go Live again.

3. Live Server Opens on the Wrong Browser

By default, the live server opens your website in your system’s default browser, but if it is not opening in the right browser, then you can set the default browser by following these steps:

• Opens the VS Code on your computer.
• Click on the File option, then select Preferences
• In the preferences, select Settings and under the Settings tab, search for Custom browser.
• Set your browser preferences, like Chrome or Firefox.

4. Port Already in Use

You may get an error, saying that the port (like 5500) is already in use. To solve this problem, restart your computer and close the other programs that use the same port.

5. Address Not Found or Blank Page

Sometimes you see an error page or a blank screen when you open a live server. You see this because you may have deleted or moved your HTML file, or your file path may be incorrect. The solution is to ensure that you’re opening the correct file in the web browser.

Conclusion

The Live Server in VS Code is an important tool for beginners and developers. Whether you’re building a simple HTML page or working on a full front-end project, the live server extension makes your workflow faster. It allows you to see the live changes in the code without refreshing the browser again and again. It is easy to install and enable a live server in the code. If you’ve just started learning web development, a live server helps you a lot.

How to Enable Live Server on VSCode – FAQs