├── .gitignore ├── .jshintrc ├── README.md ├── bin └── browser-refresh ├── lib ├── Launcher.js ├── Logger.js ├── Server.js ├── cli.js ├── client │ ├── index.js │ └── refresher.js └── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | node_modules 15 | npm-debug.log 16 | *.sublime-workspace 17 | *.sublime-project 18 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "require" 4 | ], 5 | 6 | "strict": false, 7 | "globalstrict": true, 8 | "node" : true, 9 | "es5" : false, 10 | "browser" : true, 11 | "boss" : false, 12 | "curly": false, 13 | "debug": false, 14 | "devel": false, 15 | "eqeqeq": true, 16 | "evil": true, 17 | "forin": false, 18 | "immed": true, 19 | "laxbreak": false, 20 | "newcap": true, 21 | "noarg": true, 22 | "noempty": false, 23 | "nonew": true, 24 | "nomen": false, 25 | "onevar": false, 26 | "plusplus": false, 27 | "regexp": false, 28 | "undef": true, 29 | "sub": false, 30 | "white": false, 31 | "eqeqeq": false, 32 | "latedef": true, 33 | "unused": "vars", 34 | 35 | /* Relaxing options: */ 36 | "eqnull": true, 37 | "sub": true 38 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | browser-refresh 2 | =============== 3 | This module improves productivity by enabling instant web page refreshes anytime a front-end resource is modified on the server. This module supports live reloading of CSS and JavaScript without doing a full page refresh. This module utilizes the very efficient [chokidar](https://github.com/paulmillr/chokidar) module for watching for changes to the file system. Web sockets are used to communicate with the browser. Minimal application code changes are required to benefit from this module. 4 | 5 | # Overview 6 | 7 | Like `nodemon`, this module provides a drop-in replacement for the `node` command. 8 | 9 | Compared to [nodemon](https://github.com/remy/nodemon), the `browser-refresh` module has the following benefits: 10 | 11 | * It starts as a web sockets server and provides a web sockets client 12 | * It sets an environment variable for the spawned child process to let it know that it was launched using `browser-refresh` 13 | * Instead of configuring which directories/files to watch, you instead configure which directories/files to _not_ watch using an optional `.browser-refresh-ignore` file (same format as `.gitignore` and `.npmignore`). 14 | * There is an optional taglib for [Marko](https://github.com/marko-js/marko) and [Dust](https://github.com/linkedin/dustjs) that injects the `browser-refresh` [client](https://github.com/patrick-steele-idem/browser-refresh/blob/master/lib/browser-refresh-client.js) if the application was launched using `browser-refresh`. Please see: [browser-refresh-taglib](https://github.com/patrick-steele-idem/browser-refresh-taglib) 15 | * The `browser-refresh` process waits for the child process to tell it that it is ready to start serving traffic so that the web browser page is not refreshed too soon. This is done by the child process using `process.send('online')` 16 | 17 | File patterns to ignore are automatically loaded from the first file that 18 | exists in the following list: 19 | 20 | 0. `.browser-refresh-ignore` file in the current working directory 21 | 1. `.gitignore` file in the current working directory 22 | 23 | If no ignore file is found then the following ignore file patterns are used: 24 | 25 | ``` 26 | node_modules/ 27 | static/ 28 | .cache/ 29 | .* 30 | *.marko.js 31 | *.dust.js 32 | *.coffee.js 33 | ``` 34 | 35 | **NOTE:** 36 | 37 | Patterns to ignore files with a directory should have `/` at the end. 38 | For example, to ignore `node_modules` directory use `node_modules/`. 39 | 40 | # Installation 41 | 42 | First, install the global command line interface for the `browser-refresh` module: 43 | 44 | ```bash 45 | npm install browser-refresh -g 46 | ``` 47 | 48 | Add the following code snippet to the appropriate location based on when your application is ready to start serving traffic: 49 | 50 | ```javascript 51 | if (process.send) { 52 | process.send('online'); 53 | } 54 | ``` 55 | 56 | For example: 57 | 58 | ```javascript 59 | app.listen(port, function() { 60 | console.log('Listening on port %d', port); 61 | 62 | if (process.send) { 63 | process.send('online'); 64 | } 65 | }); 66 | ``` 67 | 68 | Alternatively, pass an object that specifies a `url` for `browser-refresh` to launch the first time your app starts: 69 | ```javascript 70 | if (process.send) { 71 | process.send({ event:'online', url:'http://localhost:8080/' }); 72 | } 73 | ``` 74 | 75 | Finally, add the following script to your page(s). Just before the closing `` tag is a good place. 76 | 77 | ```html 78 | '' 79 | ``` 80 | 81 | > When `browser-refresh` launches your app a new `BROWSER_REFRESH_URL` environment variable is added with the URL that should be used to include the client-side script. The value of `BROWSER_REFRESH_URL` will be similar to `http://localhost:12345/browser-refresh.js` (the port is random). You should use whatever means your templating language or UI library provides to add the script to your page(s). 82 | 83 | **If you're using [Marko](https://github.com/marko-js/marko),** checkout [`browser-refresh-taglib`](https://github.com/patrick-steele-idem/browser-refresh-taglib) which allows you to simply drop the following tag into your template instead of using the above `