live-dev-server

live-dev-server

a small development server with live reload.

Live Dev Server

• watch files change, and reload the page。You can also execute custom code。
• 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:

• incoming option
• lds.config.js or live.config.js
• 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/live.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()
    }
  },
  watcher: {
    options: null,
    on: ['add', 'addDir', 'change'],
  },
  proxy: {
    '/api': {
      target: 'https://api.github.com',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    },
  },
}

watch more

https://github.com/paulmillr/chokidar#api

{
  watcher: {
    options: null, // chokidar options
    on: ['add', 'addDir', 'change'], // chokidar on
  },
}

when config watcher, In the inject code, you will receive watcher-[name], and isDir can be used to determine whether it is a folder.

# change
{"origin":"watcher-change","data":{"url":"http://localhost:3002/index.html","host":"http://localhost:3002","path":"index.html","ext":".html","isDir":false}}

# add dir
{"origin":"watcher-addDir","data":{"url":"http://localhost:3002/addDir","host":"http://localhost:3002","path":"addDir","ext":"","isDir":true}}

# add file
{"origin":"watcher-add","data":{"url":"http://localhost:3002/addDir/file.txt","host":"http://localhost:3002","path":"addDir/file.txt","ext":".txt","isDir":false}}

# rename dir, will trigger add
{"origin":"watcher-addDir","data":{"url":"http://localhost:3002/renameFold","host":"http://localhost:3002","path":"renameFold","ext":"","isDir":true}}
{"origin":"watcher-add","data":{"url":"http://localhost:3002/renameFold/file.txt","host":"http://localhost:3002","path":"renameFold/file.txt","ext":".txt","isDir":false}}

dependencies

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