https://www.npmjs.com/package/light-server
ight-server
A lightweight cli static http server and it can watch files, execute commands and trigger livereload.
Why light-server
When I was writing some simple static web apps, it was helpful to have some tools to serve static http, to watch files and run command, and to trigger refresh in browser.
I think the scenario is not too complicated, so I don't want to use heavy tools like grunt or gulp. IMO, npm script with cli tools is already enough.
Here is an article about using npm to replace grunt/gulp, I really like it.
There are many existing tools in npm, but I could not find one to do all the things for me. Well, actually browser-sync is one, but it offers too many features I don't need, and its installation time is really, unacceptable.
Not lucky enough :(
Then I wrote light-server, with the following features:
A simple static http server
Watch files, support multiple glob expressions
Trigger custom command if watched files change
Trigger browser reload if watched files change
Trigger css reload without refreshing page
Live reload does not require any setup, and even works on smart phones
Auto inject client reload javascript in html, no need to manually add
Live reload websocket server uses the same port as http server
Proxy to another http server
Html5 history API mode for SPA
And now my package.json is simpler and cleaner than before :)
Install
light-server has much smaller footprint, compared to browser-sync, so it is recommended to install in project level, and use it with npm script.
npm install light-server
Of course, you can install it globally, too.
Usage
Usage: light-server [options]
Options:
-h, --help output usage information
-V, --version output the version number
-c, --config read options from config file
-s, --serve serve the directory as static http
--servePrefix virtual path prefix for static directory
-p, --port http server port, default 4000
-b, --bind bind to a specific host, default 0.0.0.0
-w, --watchexp watch expression, repeatable
-i, --interval interval in ms of watching, default 500
-d, --delay delay in ms before triggering live reload, default 0
-x, --proxy when file not found, proxy the request to another server
--proxypath only send to proxy when path starts with this pattern, default is "/", repeatable
--no-reload disable live-reloading
-q, --quiet quiet mode with minimum log message
-o, --open open browser automatically
--http2 enable http2 tls mode
--historyindex 404 fallback index path, used by SPA development
Examples:
$ light-server -s . -p 7000
$ light-server -s dist --http2 -o
$ light-server -s dist --historyindex '/index.html'
$ light-server -s . -w ".js, src/* # npm run build && echo wow!"
$ light-server -s . -x http://localhost:8000
$ light-server -s . -x http://localhost:8000 --servePrefix /assets
$ light-server -s . -b 10.0.0.1
$ light-server -x http://localhost:9999 --proxypath "/api" -w "public/"
$ light-server -s static -w "/.css # # reloadcss"
$ light-server -c .lightserverrc
& light-server -s . -p 8000 -w "src//.js # npm run js # no-reload"
Watch expression syntax: "files[,files] # [command to run] # [reload action]"
3 parts delimited by #
1st part: files to watch, support glob format, delimited by ","
2nd part: (optional) command to run, before reload
3rd part: (optional) reload action, default is "reload", also supports "reloadcss" or "no-reload" to run a command without a browser refresh
Examples:
"/.js, index.html # npm run build # reload"
".css # # reloadcss"
"** # make"
"*/.js # npm run build # no-reload"
It is quite simple, specify the folder to serve as static http, specify the files to watch, specify the command to run when watched files change, and light-server will do the job.
You don't need to add reload script into your html, light-server will inject it automatically.
You don't need to use all the features, and that's totally ok:
You can serve http without watching files.
You can serve http and enable live-reload, without triggering command.
You can watch files and trigger command, without serving http.
Manual trigger live-reload
GET or POST http://localhost:PORT/lightserver/trigger, light-server will send reload event to the browser.
GET or POST http://localhost:PORT/lightserver/triggercss, light-server will send reloadcss event to the browser.
It means that it's possible to integrate other tools with light-server.
Proxy
Proxy feature is useful when our project is some backend language(like go, python) + static web page.
For example, a golang web app exposes REST api via http://host/api/ and server static page from http://host/. Then, when we are writing/debugging the static pages, light-server can be helpful. We can firstly launch the whole app and listen at http://localhost:9000, then in another terminal window, launch light-server:
$ cd
$ light-server -s . -p 8000 -x http://localhost:9000
Now when you access the static pages/js/css, light-server will return it directly. And if you access something like http://localhost:8000/v1/myapi, light-server cannot find the resource, and will proxy the request to upstream - http://localhost:9000/v1/myapi, which is the golang app.
This is cool because now you can have live-reload, without changing the golang app to add some dirty hacky changes, and you don't need to change the html to inject any extra js just for development. Light-server deals with all the dirty work.