tapio/live-server

★ 4,560JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((live-server))
    What it does
      Serves local files
      Auto-reloads browser
      CSS hot-swap
    Who it is for
      Front-end developers
      HTML/CSS learners
    Options
      Custom port
      SPA fallback
      HTTPS mode
      File ignore patterns
    Tech stack
      Node.js
      JavaScript

mindmap root((live-server)) What it does Serves local files Auto-reloads browser CSS hot-swap Who it is for Front-end developers HTML/CSS learners Options Custom port SPA fallback HTTPS mode File ignore patterns Tech stack Node.js JavaScript

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Serve a local static website during development so browser security restrictions do not block file fetches, with instant reload on every save.

USE CASE 2

Configure a fallback page for a single-page app so refreshing deep URLs does not return a 404 during local testing.

USE CASE 3

Use as a Node.js module inside a build script to programmatically start and stop the dev server as part of an automated workflow.

Tech stack

JavaScriptNode.js

Getting it running

Difficulty · easy Time to first run · 5min

Requires Node.js, one npm install -g live-server command is all you need.

License details are not described in the explanation, check the repository directly.

In plain English

Live Server is a small development tool that runs a local web server on your computer and automatically refreshes your browser whenever you save a file. It is aimed at people building websites or web apps who want to see their changes instantly without manually hitting the reload button each time. The main reason to use it is that web browsers block certain features, like fetching data from other files, when you open an HTML page directly from your file system. Running a local server sidesteps that restriction. The live-reload feature adds convenience on top: when you change a JavaScript or HTML file the page reloads, and when you change a CSS file the new styles are applied immediately without even a full reload. Setup requires Node.js to be installed, then a single command installs the tool: npm install -g live-server. After that, you type live-server inside your project folder and it opens the browser for you. There are no browser plugins to install. The tool works by injecting a tiny script into each HTML page it serves, that script opens a connection back to the server and listens for reload instructions. The command line accepts a range of options. You can change the port, restrict which files are watched for changes, ignore certain folders, serve a fallback page for single-page apps, enable password protection, set up HTTPS, or proxy certain URL paths to another server. The same options are available when you use the tool as a Node.js module inside your own code, passing them as a plain JavaScript object. It is intended for development only, not for running a production website. The project notes it is best suited for hacking on HTML, JavaScript, and CSS files during the building phase.

Copy-paste prompts

Prompt 1

I'm building a vanilla HTML/CSS/JS website and want my browser to reload automatically every time I save a file. Show me how to install live-server globally and start it in my project folder.

Prompt 2

I have a React SPA that I've compiled to static files. Configure live-server to serve the dist/ folder and redirect all unknown routes to index.html.

Prompt 3

Show me how to use live-server as a Node.js module inside a Gulp build script so it starts when my build task runs.

Prompt 4

I want live-server to only watch my src/ folder for changes and ignore the node_modules/ folder. Give me the exact command with the right flags.

Open on GitHub → Explain another repo

← tapio on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.