Introduction to Live Server

Live Server is a lightweight development server with live reload capability. Ideal for modern web development, it simplifies the workflow and enhances productivity by allowing real-time changes to HTML, CSS, and JavaScript without refreshing the browser manually.

Getting Started with Live Server

To install Live Server, you can use npm. Simply run:

npm install -g live-server

Basic Usage

Navigate to your project directory and execute:

live-server

Your default web browser will automatically open with your project’s root directory. Any changes you make to the HTML, CSS, or JavaScript files will reflect instantly in the browser, enhancing the development experience.

API Examples

Using JavaScript API

Live Server also provides a JavaScript API that can be used in Node.js environments. Below are some useful examples:

 const liveServer = require("live-server");
const params = {
    port: 8181, // Set the server port. Defaults to 8080.
    host: "0.0.0.0", // Set the address to bind the server. Defaults to "0.0.0.0" or a different interface.
    root: "/public", // Set root directory that's being served. Defaults to cwd.
    open: true, // When false, it won't load your browser by default.
    ignore: 'scss,my/templates', // comma-separated string for paths to ignore
    file: "index.html", // When set, serve this file for every 404 (useful for single-page applications).
    wait: 1000 // Waits for changes, before reloading. Defaults to 0 sec.
};
liveServer.start(params); 

Stopping the Server

To stop the live server, you can simply call:

liveServer.shutdown();

Application Example

Let’s create a simple HTML application to demonstrate live-server:

   
    
 
    
Hello World!
    
This content will update in real-time as you make changes and save the file.
    
  

 // app.js document.body.innerHTML += "
JavaScript is also reloaded!
"; 

This example sets up a basic index.html and app.js. With the live server running, changes to either file will be immediately reflected in the browser. This demonstrates the power of live-reloading during the development process.

For more detailed information and advanced usage, refer to the official documentation on npm.

Hash: d0fa44414ecb4f9d9d4763378ad1c29d98f75a227ed20defee65c942e2dcc012