Watchalive.

A small but robust dev server with smart file watching and transform support.

Generally:

• http express server
• lean and smart file watcher
• socket.io server and client

Useful features:

• watches only served (requested by client) files
• transforms (transpiles/compiles) files on the fly using simple plugins
• handles custom routes
• proxies requests to other services
• client gets notified about changes including changed sources

If you have question you may ping on gitter

Usage (CLI)

npm install watchalive -g

Place watchalive.config.js (or just watchalive.js or wa.config.js as you like) in your project folder. Run "watchalive" from command line.

Example configuration file (loading React.js transformed files with SystemJS loader):

"use strict"
var babel = require('babel-core')
 
module.exports = {
    base: "..", // base serve directory, relative to process.cwd()
    skip: [/node_modules/], // won't watch, cache and transpile     
    plugin: [
        ["less", {paths: ['client']}], // standard less/css plugin
        [/\.js$/, (source) => // custom transformer
              babel.transform(source, {
                  presets: ["es2015", 'react'],
                  plugins: [
                      ['react-transform', {
                          transforms: [
                              {transform: 'react-transform-jspm-hmr'}
                          ]
                      }]
                  ]
              }).code 
        ]
    ],
    // advanced routing
    route: [
        {'/mobile': '/client/mobile/index.html'},
        {'*': '/client/web/index.html'}
    ],
    // flexible proxy config
    proxy: {
        '/api': 'my-app.dev:2000'
    },
    data: true // send source of changed file with notification message 
}

You can also place config in package.json in "watchalive" section.

Also you can run without config file:

watchalive --port 7007 --base ..

API usage

npm install watchalive

"use strict"
const Watchalive = require('watchalive')
 
var wa = new Watchalive({/*config */})
 
wa.start()

Deep dive into options!

Client side usage

By default served *.html files get watchalive.js client script injected. You can easily access to this notifications in code:

    watchalive.onFiles(function(changes){
        // *changes* contain array of file names changed
        // can also contain changed file sources {file: ..., data: ...}
    })

Examples of usage

• CanJS hot reloading
• Hot reloading with Steal-HMR

Licence

MIT