Introduction to live-server

live-server is a lightweight development server with live reload capability, designed to accelerate your web development workflow. This simple tool automatically loads your HTML, CSS, and JavaScript files in the browser whenever you make a change, ensuring your latest modifications are instantly visible.

Basic Usage

To install live-server, use npm:

npm install -g live-server

Navigate to the root of your project and start the server:

live-server

This will open your default browser showing your project’s index.html file. Now, any changes you make to your project will automatically trigger a browser reload.

API Examples

live-server comes with a variety of command-line options and configurations to suit different development needs. Here are some of the most useful API features:

Port Configuration

You can specify the port number that live-server listens on by using the --port option:

live-server --port=8080

Host Configuration

To set the desired hostname, use the --host option:

live-server --host=127.0.0.1

Proxy Setup

If you need live-server to proxy requests to another server, use the --proxy option:

live-server --proxy=/api:http://localhost:3000/api

Directory Listing

To enable directory listing for a specific directory, use the --mount option:

live-server --mount=/public

Browser Specific

By default, live-server opens the default browser, but you can specify a different one:

live-server --browser=firefox

File Watch & CLI Options

Watch specific files or ignore certain patterns with the --watch and --ignore options respectively:

live-server --watch=index.html,styles.css

live-server --ignore=*.min.js

Full Application Example

Here’s a more extensive example of using live-server in a development environment:

  // Directory structure
  // /my-project
  // ├── /public
  // │   ├── index.html
  // │   └── styles.css
  // ├── /api
  // │   └── server.js
  // └── /scripts
  //     └── app.js

  // To start the server:
  live-server /public --proxy=/api:http://localhost:3000/api --watch=index.html,styles.css --ignore=*.spec.js

In this example, live-server will serve files from the /public directory, proxy API requests to localhost:3000/api, watch for changes in index.html and styles.css, and ignore all files ending with .spec.js.

Utilizing these capabilities, live-server becomes an essential tool for rapid development and efficient testing of web applications.

Hash: d0fa44414ecb4f9d9d4763378ad1c29d98f75a227ed20defee65c942e2dcc012