The front-end often needs to have a local server enabled for real-time preview during local development.

Simple to use

  1. Install the Live Server globally

    npm install -g live-server

    Copy the code
  2. Add the following script to the scripts of package.json in the project root directory.

     "scripts": {

    "Server ": "live-server./ --port=2349" // The following number indicates the port number, which can be changed.

    }

    Copy the code
    • What if the project root directory does not have package.json?

      2.1 NPM initialization to generate package.json file.

      npm init

    Copy the code
  3. Run.

    npm run server

    Copy the code

More Configuration Parameters

Live -server is used in your project directory. Automatically launches the default browser. When you change any file, the browser will reload the page, unless it is a CSS file, applying the changes without reloading.

Configuration parameters:

  • --port=NUMBER– Select the port to use. The default port is 8080
  • --host=ADDRESS– Select the host address to bind to. Default :0.0.0.0 (” any address “)
  • --no-browser– Disable automatic Web browser startup
  • --browser=BROWSER– Specify the browser to use, not the system default
  • --quiet | -q– Disable record
  • --verbose | -V– More logging (logging all requests, showing all listening IPv4 interfaces, etc.)
  • --open=PATH– Launches the browser to the specified path instead of the server root directory
  • --watch=PATH– Comma-separated path string for monitoring changes (default: monitor everything)
  • --ignore=PATH– Comma-separated path string, ignored (anymatch compatible definition)
  • --ignorePattern=RGXP– File’s regular expression ignored (i.e.*.jade) (not recommended in favor –ignore)
  • --no-css-inject– Reload the page when the CSS changes instead of injecting the changed CSS
  • --middleware=PATH-Export the path to the.js file of the middleware functionality to be added; It can be a name with no path or an extension that references middleware bundled in the Middleware folder
  • --entry-file=PATH– Provide this file (relative to the server root) to replace the missing file (useful for single-page applications)
  • --mount=ROUTE:PATH– Provide path contents under defined routes (there may be multiple definitions)
  • --spa– Convert requests from/ABC to / # / ABC (handy for single-page applications)
  • --wait=MILLISECONDS– (default 100ms) Wait for all changes and then reload
  • --htpasswd=PATH– Enable the htpasswd file in the HTTP-auth PATH
  • --cors– Enable CORS for any source (reflect request source, support request with credentials)
  • --https=PATH– HTTPS Specifies the path of the configuration module
  • --https-module=MODULE_NAME– Custom HTTPS module (for example, SPDY)
  • --proxy=ROUTE:URL– Proxy all requests to ROUTE to URL
  • --help | -h– Displays a simple prompt
  • --version | -v– Display version

More documentation please refer to https://github.com/tapio/live-server [1]

The resources

[1]

More documentation: https://github.com/tapio/live-server

This article is formatted using MDNICE