reload-static
v1.0.1
Published
simple, compliant file streaming module for node with live reload capabilities
Downloads
15
Readme
reload-static
a simple, rfc 2616 compliant file streaming module for node with live reload capabilities
- reload-static understands and supports conditional GET and HEAD requests.
- reload-static is a kind of merge of node-static + live-server. No need to proxy.
Installation
$ npm install reload-static
Set-up
ESM
import {Server, version, mime} from 'reload-static';
// OR:
// import * as statik from 'reload-static';
CommonJS
const statik = require('reload-static');
Usage
//
// Create a node-static server instance to serve the './public' folder
//
const file = new statik.Server('./public');
const server = require('http').createServer(function (request, response) {
request.addListener('end', function () {
//
// Serve files!
//
file.serve(request, response);
}).resume();
}).listen(8080);
// Optionally, listen to HTML and CSS updates and reload the browser
if (process.env.NODE_ENV === 'development') {
file.setReloadable(server);
}
API
Creating a node-static Server
Creating a file server instance is as simple as:
new statik.Server();
This will serve files in the current directory. If you want to serve files in a specific directory, pass it as the first argument:
new statik.Server('./public');
You can also specify how long the client is supposed to cache the files node-static serves:
new statik.Server('./public', { cache: 3600 });
This will set the Cache-Control
header, telling clients to cache the file for
an hour. This is the default setting.
Enabling live reload
const file = new statik.Server();
file.setReloadable(server);
Listen to HTML and CSS updates and reload the browser when necessary.
Serving files under a directory
To serve files under a directory, simply call the serve
method on a Server
instance, passing it the HTTP request and response object:
const statik = require('node-static');
var fileServer = new statik.Server('./public');
require('http').createServer(function (request, response) {
request.addListener('end', function () {
fileServer.serve(request, response);
}).resume();
}).listen(8080);
Serving specific files
If you want to serve a specific file, like an error page for example, use the
serveFile
method:
fileServer.serveFile('/error.html', 500, {}, request, response);
This will serve the error.html
file, from under the file root directory, with
a 500
status code.
For example, you could serve an error page, when the initial request wasn't
found:
require('http').createServer(function (request, response) {
request.addListener('end', function () {
fileServer.serve(request, response, function (e, res) {
if (e && (e.status === 404)) { // If the file wasn't found
fileServer.serveFile(
'/not-found.html', 404, {}, request, response
);
}
});
}).resume();
}).listen(8080);
More on intercepting errors bellow.
Intercepting errors & Listening
An optional callback can be passed as last argument, it will be called every time a file has been served successfully, or if there was an error serving the file:
const statik = require('reload-static');
const fileServer = new statik.Server('./public');
require('http').createServer(function (request, response) {
request.addListener('end', function () {
fileServer.serve(request, response, function (err, result) {
if (err) { // There was an error serving the file
console.error(
"Error serving " + request.url + " - " + err.message
);
// Respond to the client
response.writeHead(err.status, err.headers);
response.end();
}
});
}).resume();
}).listen(8080);
Note that if you pass a callback, and there is an error serving the file, reload-static will not respond to the client. This gives you the opportunity to re-route the request, or handle it differently.
For example, you may want to interpret a request as a static request, but if the file isn't found, send it to an application.
If you only want to listen for errors, you can use event listeners:
fileServer.serve(request, response).addListener('error', function (err) {
console.error("Error serving " + request.url + " - " + err.message);
});
With this method, you don't have to explicitly send the response back, in case of an error.
Options when creating an instance of Server
cache
(Default: 3600
)
Sets the Cache-Control
header.
example: { cache: 7200 }
will set the max-age for all files to 7200 seconds
example: { cache: {'**/*.css': 300}}
will set the max-age for all CSS files to 5 minutes.
Passing a number will set the cache duration to that number of seconds.
Passing false
will disable the Cache-Control
header.
Passing a object with minimatch glob pattern
keys and number values will set cache max-age for any matching paths.
serverInfo
(Default: node-static/{version}
)
Sets the Server
header.
example: { serverInfo: "myserver" }
headers
(Default: {}
)
Sets response headers.
example: { headers: { 'X-Hello': 'World!' } }
gzip
(Default: false
)
Enable support for sending compressed responses. This will enable a check for a file with the same name plus '.gz' in the same folder. If the compressed file is found and the client has indicated support for gzip file transfer, the contents of the .gz file will be sent in place of the uncompressed file along with a Content-Encoding: gzip header to inform the client the data has been compressed.
example: { gzip: true }
example: { gzip: /^\/text/ }
Passing true
will enable this check for all files.
Passing a RegExp instance will only enable this check if the content-type of
the respond would match that RegExp using its test() method.
indexFile
(Default: index.html
)
Choose a custom index file when serving up directories.
example: { indexFile: "index.htm" }
defaultExtension
(Default: null
)
Choose a default extension when serving files.
A request to '/myFile' would check for a myFile
folder (first) then a
myFile.html
(second).
example: { defaultExtension: "html" }
reloadPath
(Default: /___reload___
)
Path used to send reload signal between the browser and the server
Use with setReloadable(server)
noCssInject
(Default: false
)
Don't inject CSS changes, just reload as with any other file change
Use with setReloadable(server)
wait
(Default: 100
)
Server will wait for all changes, before reloading
Use with setReloadable(server)
Command Line Interface
node-static
also provides a CLI.
--port, -p TCP port at which the files will be served [default: 8080]
--host-address, -a the local network interface at which to listen [default: "127.0.0.1"]
--cache, -c "Cache-Control" header setting, defaults to 3600
--version, -v node-static version
--headers, -H additional headers (in JSON format)
--header-file, -f JSON file of additional headers
--gzip, -z enable compression (tries to serve file of same name plus '.gz')
--spa Serve the content as a single page app by redirecting all
non-file requests to the index HTML file.
--indexFile, -i Specify a custom index file when serving up directories. [default: "index.html"]
--reload Watch for file changes and reload the browser [default: false]
--reloadPath Reload path. [default: "/__reload__"]
--noCssInject Don't inject CSS changes, just reload as with any other file change [default: false]
--wait Server will wait for all changes, before reloading [default: 100]
--help, -h display this help message
Example Usage
# serve up the current directory
$ static
serving "." at http://127.0.0.1:8080
# serve up a different directory
$ static public
serving "public" at http://127.0.0.1:8080
# specify additional headers (this one is useful for development)
$ static -H '{"Cache-Control": "no-cache, must-revalidate"}'
serving "." at http://127.0.0.1:8080
# set cache control max age
$ static -c 7200
serving "." at http://127.0.0.1:8080
# expose the server to your local network
$ static -a 0.0.0.0
serving "." at http://0.0.0.0:8080
# serve up and listen the current directory
$ static --reload
serving "." at http://127.0.0.1:8080
# show help message, including all options
$ static -h
Why ?
Because in certain situations, other tools don't work and the fix can't be applied : https://composed.blog/sse-webpack-dev-server
Known issues
The base code come from node-static.
- After turning the code to Typescript, it appears that wrong types were used here and there, using
as any
as an ugly fix. I didn't spend more time on that. - The test suite fails randomly on the CLI tests (and some times it passes). I spent enough time to figure out what occurs with no success.
- But it works !
- I accept pull requests !