# ritwickdey/vscode-live-server

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ritwickdey-vscode-live-server).**

6,778 stars · 1,770 forks · TypeScript · mit

## Links

- GitHub: https://github.com/ritwickdey/vscode-live-server
- Homepage: https://ritwickdey.github.io/vscode-live-server
- awesome-repositories: https://awesome-repositories.com/repository/ritwickdey-vscode-live-server.md

## Topics

`live-reload` `live-server` `livereload` `typescript` `vscode` `vscode-extension`

## Description

This is a local development server extension for VS Code that provides static file hosting and automatic browser reloading upon saving source files. It functions as a live reloading tool and static file web server, allowing developers to preview web pages locally with support for custom ports and root directories.

The project distinguishes itself by offering a local network preview server that exposes projects to other devices on the same wireless network via IP. It also includes a development proxy capable of adding Cross-Origin Resource Sharing headers and proxying traffic to external URIs.

The server covers a broad range of networking and management capabilities, including proxy request routing, remote network access, and directory-to-route mapping. It supports multi-root workspace serving and provides configuration options for network settings, project-specific behaviors, and browser integration customization.

## Tags

### Web Development

- [Static File Servers](https://awesome-repositories.com/f/web-development/static-file-servers.md) — Hosts static files from the local disk over HTTP based on a defined root directory.
- [Development Proxies](https://awesome-repositories.com/f/web-development/development-proxies.md) — Functions as a development proxy that adds CORS headers to bypass cross-origin restrictions.
- [Directory-to-Route Mappings](https://awesome-repositories.com/f/web-development/directory-to-route-mappings.md) — Mounts specific local directories to custom URL routes to organize the served web structure. ([source](https://ritwickdey.github.io/vscode-live-server/CHANGELOG.html))
- [Filesystem-Based Route Mappings](https://awesome-repositories.com/f/web-development/vue-development/route-mapping/filesystem-based-route-mappings.md) — Implements routing that maps local filesystem directories to custom URL endpoints for organized web structure.

### Content Management & Publishing

- [Development Preview Servers](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/development-preview-servers.md) — Provides a local server for previewing HTML and CSS changes with live reloading.

### Development Tools & Productivity

- [Browser Reload Triggers](https://awesome-repositories.com/f/development-tools-productivity/browser-reload-triggers.md) — Monitors workspace file changes to trigger automatic browser refreshes for a live development experience.
- [Development Iteration Workflows](https://awesome-repositories.com/f/development-tools-productivity/development-iteration-workflows.md) — Facilitates rapid iteration on web pages with automatic browser reloads as source files are edited.
- [Development Preview Servers](https://awesome-repositories.com/f/development-tools-productivity/development-preview-servers.md) — Hosts a local preview environment that automatically reloads the browser when files change. ([source](https://ritwickdey.github.io/vscode-live-server/docs/settings.html))
- [Development Refreshers](https://awesome-repositories.com/f/development-tools-productivity/development-refreshers.md) — Automatically refreshes the browser instantly when workspace files are modified. ([source](https://ritwickdey.github.io/vscode-live-server/docs/settings.html))
- [Live Reloading Tools](https://awesome-repositories.com/f/development-tools-productivity/live-reloading-tools.md) — Monitors source files and triggers immediate browser refreshes to reflect changes in real time.
- [VS Code Extensions](https://awesome-repositories.com/f/development-tools-productivity/vs-code-extensions.md) — Implements these server capabilities as a dedicated extension for the Visual Studio Code editor.
- [Local Network Preview Servers](https://awesome-repositories.com/f/development-tools-productivity/local-network-preview-servers.md) — Exposes local web projects to other devices on the same wireless network via IP for testing.
- [Server Root Definitions](https://awesome-repositories.com/f/development-tools-productivity/server-root-definitions.md) — Allows setting a specific sub-folder within the workspace to act as the root directory for the server. ([source](https://ritwickdey.github.io/vscode-live-server/docs/settings.html))
- [Project Workspaces](https://awesome-repositories.com/f/development-tools-productivity/workspace-management/project-workspaces.md) — Supports hosting files from multiple project folders simultaneously by defining specific entry points. ([source](https://ritwickdey.github.io/vscode-live-server/CHANGELOG.html))

### Networking & Communication

- [Local Network Previews](https://awesome-repositories.com/f/networking-communication/remote-access-connectivity/local-network-previews.md) — Exposes local web projects to other devices on the same wireless network via IP for cross-device testing. ([source](https://ritwickdey.github.io/vscode-live-server))
- [HTTP Proxies](https://awesome-repositories.com/f/networking-communication/http-proxies.md) — Provides an HTTP proxy to intercept and redirect incoming requests to external URIs or network targets.
- [CORS Header Injection](https://awesome-repositories.com/f/networking-communication/proxy-headers/cors-header-injection.md) — Injects Access-Control-Allow-Origin headers into responses to enable requests from different domains. ([source](https://cdn.jsdelivr.net/gh/ritwickdey/vscode-live-server@master/README.md))
- [Request Proxies](https://awesome-repositories.com/f/networking-communication/request-proxies.md) — Provides a development proxy to route network traffic and intercept requests for adding CORS headers. ([source](https://cdn.jsdelivr.net/gh/ritwickdey/vscode-live-server@master/README.md))

### Software Engineering & Architecture

- [Live Reloading](https://awesome-repositories.com/f/software-engineering-architecture/reactive-change-detection/live-reloading.md) — Maintains a WebSocket connection between the server and browser to trigger real-time page refreshes.

### System Administration & Monitoring

- [Server Network Configurations](https://awesome-repositories.com/f/system-administration-monitoring/administrative-operations/linux-system-administration/networking/server-service-binding/server-network-configurations.md) — Provides configuration for custom port numbers and hostnames to control how the local server is accessed. ([source](https://ritwickdey.github.io/vscode-live-server))

### DevOps & Infrastructure

- [Local Development Networking](https://awesome-repositories.com/f/devops-infrastructure/local-development-networking.md) — Manages custom ports, HTTPS protocols, and proxy settings for local website access.

### Testing & Quality Assurance

- [Local Network Access](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/test-frameworks/execution-and-infrastructure/test-infrastructure-configuration/cross-device-testing-tools/local-network-access.md) — Exposes the local development server to other devices on the same wireless network via IP for mobile testing.