paint-brush
[Nodemon] Auto-Watch-Reload Node.js fileby@peterchang_82818
16,529 reads
16,529 reads

[Nodemon] Auto-Watch-Reload Node.js file

by March 6th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

I like being productive and always looking for tools to work efficiently. Now I am working on a <strong>React isomorphic </strong>project, auto-watch setup is different on <strong>server side</strong>(restart server when file changed) and <strong>client side</strong>(to build static file when changed). However the idea of <strong>isomorphic</strong> is shared same <strong>React component</strong> on both server and client sides. There are much enough tools for auto-watch: webpack, grunt, gulp, nodemon, etc, and auto-build: webpack, grunt, gulp, browserify etc.

Coin Mentioned

Mention Thumbnail
featured image - [Nodemon] Auto-Watch-Reload Node.js file
 HackerNoon profile picture

I like being productive and always looking for tools to work efficiently. Now I am working on a React isomorphic project, auto-watch setup is different on server side(restart server when file changed) and client side(to build static file when changed). However the idea of isomorphic is shared same React component on both server and client sides. There are much enough tools for auto-watch: webpack, grunt, gulp, nodemon, etc, and auto-build: webpack, grunt, gulp, browserify etc.

Find the right tool to do the right task, playing with them 1 after 1, this is the git of this example, hope it is helpful.

1- Create a simple Express server



//app.jsvar express = require('express')var app = express()



app.get('/', function (req, res) {res.send('Hello World!')})



app.listen(3000, function () {console.log('Example app listening on port 3000!')})

2- Run a Express server

And auto-watch is not on yet.

$ node app.js

Example app listening on port 3000!

3-Run the same server by nodemon

$ npm install **--save-dev nodemon $** ./node_modules/nodemon/bin/nodemon.js app.js




[nodemon] 1.11.0[nodemon] to restart at any time, enter `rs`[nodemon] watching: *.*[nodemon] starting `node app.js`

Example app listening on port 3000!

4- Run nodemon with Config files

Nodemon supports local and global configuration files. These are usually named nodemon.json.

An alternative local configuration file can be specified with the --config <file> option.

see sample nodemon.json,

Run with the sample nodemon.json

$ ./node_modules/nodemon/bin/nodemon.js app.js --config nodemon.json

[nodemon] 1.11.0

[nodemon] reading config /Users/userA/nodemon-example/nodemon.json

[nodemon] to restart at any time, enter `rs`

[nodemon] ignoring: .git .nyc_output .sass-cache bower_components coverage /Users/userA/nodemon-example/node_modules/**/* .git node_modules/**/node_modules

[nodemon] watching: test/fixtures/**/* test/samples/**/*

[nodemon] watching extensions: js,json

[nodemon] bind restart -> `osascript -e 'display notification "App restarted due to:

'$FILENAME'" with title "nodemon"'`

[nodemon] starting `node --harmony app.js`

[nodemon] child pid: 6166

[nodemon] watching 3 files

Example app listening on port 3000!

5- setup package.json with nodemon script

//package.json






"scripts": {"start": "node app.js","dev": "echo 'run dev' & npm start","test": "echo \"Error: no test specified\" && exit 1","nodemon": "./node_modules/nodemon/bin/nodemon.js --config nodemon.json --exec npm run dev "},

Run

$ npm run nodemon

Remark:

execMap

In nodemon.json config file, define your own executables:

{  "execMap": {     "pl": "perl"  }}

Triggering events when nodemon state changes

In nodemon.json config file, define action for event (Read more EventList) :





{"events": {"restart": "osascript -e 'display notification \"app restarted\" with title \"nodemon\"'"}}

Reference:

https://github.com/remy/nodemon#nodemon

https://github.com/wahengchang/nodemon-example