live-dev-server

live-dev-server

a little development server with live reload.

Live Dev Server

1. watch files change, and reload the page。You can also execute custom code。
2. proxy use http-proxy, same as webpack devServer proxy

Installation

need node.js and npm.

install cd project dir

npm install live-dev-server

invoking live dev server

options priority level:

1. incoming option
2. lds.config.js
3. default option

const liveDevServer = require('live-dev-server')

const opts = {
  // options
}

liveDevServer(opts)

add scripts

"scripts": {
  "serve": "live-dev-server",
},

run server

npm run serve

configuration file

project dir create a configuration file： lds.config.js.such as:

module.exports = {
  workspace: './example/',
  port: '3002',
  inject: function (event) {
    // ws message event
    let msgData = event.data
    if (msgData.indexOf('watcher') < 0) return
    let {
      data: { ext, url },
    } = JSON.parse(msgData)
    // console.log(ext, url)
    switch (ext) {
      case '.vue':
        // execute some code
        break
      default:
        window.location.reload()
    }
  },
  proxy: {
    '/api': {
      target: 'https://api.github.com',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    },
  },
}

dependencies

• body-parser
• chokidar
• connect
• http-proxy
• parseurl
• send
• ws