VS Code Live Server: How to Open & Use It

To open your project with Live Server in VS Code, right-click on your HTML file in the Explorer and select Open with Live Server, or click the Go Live button in the status bar. This launches a local development server and opens your page in the browser, automatically reloading whenever you save changes. Below is everything you need to know about setting it up, troubleshooting it, and using it effectively.

What Is Live Server and Why Use It?

Live Server is a popular Visual Studio Code extension that creates a lightweight local web server for your static files (HTML, CSS, JavaScript). Instead of opening an HTML file directly via file://, which can cause issues with modules, fetch requests, or relative paths, Live Server serves your files over http://localhost. This mimics a real web server environment, so browser features like the Fetch API, ES6 modules, and shared workers behave as they would on a production site.

The main benefit is live reloading: when you save a file, the browser automatically refreshes. This saves you from manually switching to the browser and pressing F5 after every small tweak. It’s especially handy for front-end work, quick prototypes, and testing responsive layouts.

How to Install Live Server

1. Open VS Code and go to the Extensions view (Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on macOS).
2. Type Live Server in the search box. The extension by Ritwick Dey is the most widely used one (the publisher is “ritwickdey”).
3. Click Install on the matching extension.
4. After installation, you may need to reload the VS Code window (click Reload in the notification that appears).

That’s it. The extension adds a Go Live button (usually at the bottom right of the status bar) and several commands you can access via the Command Palette (Ctrl+Shift+P).

How to Open Your Project with Live Server

There are three common ways to start the server:

• Right-click method: In the Explorer, right-click on an HTML file (e.g., index.html) and choose Open with Live Server. This starts the server and opens the page in your default browser.
• Status bar button: Click the Go Live text in the blue status bar at the bottom of VS Code. This serves the current workspace folder and opens the file that is currently active (or the default index.html if present).
• Command Palette: Press Ctrl+Shift+P (Cmd+Shift+P on macOS), type Live Server: Open with Live Server, and press Enter.

Once running, the status bar shows Port: 5500 (or a custom port) and the browser opens at http://127.0.0.1:5500/ (or localhost). The server keeps running until you click the same button again (now labeled Port: 5500) to stop it, or you close VS Code.

Live Server Settings You Should Know

The extension is configurable via your settings.json file. The most useful options are:

• liveServer.settings.port – Change the default port (5500) if it’s occupied. For example, set it to 5501.
• liveServer.settings.root – Set the root folder that the server serves. By default it uses the workspace root. If you have a src or public folder, you can point to it.
• liveServer.settings.wait – Delay (in milliseconds) before reloading after a file change. Default is 100 ms.
• liveServer.settings.browser – Choose which browser to open (e.g., "chrome", "firefox", or "microsoft-edge").
• liveServer.settings.ignoreFiles – List of file patterns to ignore, so saving those files doesn’t trigger a reload (e.g., ["**/*.scss"]).

To edit these, open the Command Palette and select Preferences: Open Settings (JSON), then add your custom entries.

Common Problems and Fixes

Even though Live Server is straightforward, a few issues pop up frequently:

• Port already in use: If port 5500 is taken, the server fails to start. Change the port in settings or close the other process.
• Page doesn’t open automatically: Check your default browser settings and the liveServer.settings.browser option. You can also manually navigate to http://localhost:5500.
• Changes not reloading: Make sure you’re saving the file (Ctrl+S). Also, if you’re using a build process (like Sass or TypeScript), ensure the output file is in the served folder and not ignored.
• Live Server not working in a multi-root workspace: The extension may not support multi-root workspaces well. Open the specific folder as a single workspace.
• HTTPS required: If you need to test secure features (like service workers), Live Server can run in HTTPS mode. Set liveServer.settings.https to true and provide a certificate and key. The extension includes a self-signed certificate for testing.

Live Server vs. Other Local Servers

Live Server is not the only option. Alternatives include:

• VS Code’s built-in Simple Browser: This is a basic preview that doesn’t support live reload or a real server; it’s only for quick views.
• Python’s HTTP server: Run python -m http.server in your terminal. It serves files but has no live reload or automatic browser opening.
• Node.js packages like http-server or browser-sync: These require installing Node.js and running commands. Browser-sync even supports live reload and multi-device syncing.
• VS Code extensions like “Five Server” or “Live Preview”: These are similar but may have different features. Five Server is a fork of Live Server with some improvements.

For most simple front-end projects, Live Server is the easiest because it’s a single extension with no configuration required. If you need advanced features like proxy or integration with a build tool, you might prefer a Node-based server.

Is Live Server Safe?

Yes, Live Server is safe to use for local development. It only serves files from your workspace on your localhost, which is not accessible from the internet unless you explicitly configure port forwarding. However, be cautious: if you’re working on a public network, anyone on that network could potentially access your server if they know your IP and port. For sensitive projects, keep your firewall enabled and don’t expose the port unnecessarily. The extension itself is open-source and has a large user base, but as with any third-party extension, you should review its permissions before installing.

Frequently Asked Questions

Why does Live Server open a different file than the one I want?

When you click Go Live without a specific file selected, it serves the workspace root and opens the default index.html if it exists. If you want to open a specific file, right-click that file and choose Open with Live Server.

Can I use Live Server with PHP or other server-side languages?

No. Live Server is designed for static files only. It does not process PHP, Python, or Node.js server-side code. For PHP, use a local server like XAMPP or the built-in PHP server (php -S localhost:8000).

How do I stop Live Server?

Click the Port: 5500 button in the status bar (it toggles to stop), or right-click any file and choose Stop Live Server. You can also close the terminal process if you started it manually.

Why is my CSS not updating with Live Server?

Live Server reloads the entire page on save, so CSS changes should apply. If they don’t, check that the CSS file is in the served root and that you’re saving the correct file. Also, disable any browser caching extensions that might interfere.

Can I use Live Server with a framework like React or Vue?

Yes, but only for the built output. If you’re using a framework with a build step (like Create React App or Vite), those tools have their own development servers with hot reloading. Live Server is best for plain HTML/CSS/JS projects or for previewing the dist folder after building.

Does Live Server support multiple files at once?

It serves the entire workspace, so you can access any file in the root by navigating the URL. However, it only opens one browser tab by default. You can open multiple tabs manually, and all will reload when you save.

Related

• Validate Database Restore: Beyond Row Counts
• Best Sony Walkman Signature Alternatives for Audiophiles
• iTunes Going Away? Here’s What Replaces It