nodemon-ngrok-webpack-plugin
Inspired by lzhaki's nodemon-webpack-plugin, this plugin uses Nodemon to watch and automatically restart your Webpack output node server when Webpack is run in --watch
mode. It then uses ngrok to create an online tunnel to your development server.
This enables you to access your live local Webpack build from any device for easier debugging. Need to test something on a phone or tablet? No problem! Someone else's machine has a bug that can't be reproduced anywhere else? Easy-peasy!
Installation
npm install -D nodemon-ngrok-webpack plugin
Dependencies
nodemon-ngrok-webpack-plugin
requires Webpack >=4 to work.
Usage
In your webpack config:
const path = ;const NodeExternals = ;const NodemonNgrokWebpackPlugin = ; moduleexports = mode: 'development' target: 'node' externals: entry: './src/server.js' output: path: path filename: 'server.js' plugins: // Where the magic happens
Run:
webpack --watch
Output
webpack is watching the files… ╔════════════════════════════════════════════════════════╗ ║ ║ ║ ngrok Tunnel Running at: https://b30a5d06.ngrok.io ║ ║ ngrok Client: http://localhost:4040 ║ ║ ║ ╚════════════════════════════════════════════════════════╝Hash: b977a3a88dc37e896883Version: webpack 4.20.2Time: 901msBuilt at: 10/11/2018 11:43:44 AM Asset Size Chunks Chunk Namesserver.js 5.42 KiB main [emitted] mainEntrypoint main = server.js[./webpack.config.js] 433 bytes {main} [built][nodemon-ngrok-webpack-plugin] external "nodemon-ngrok-webpack-plugin" 42 bytes {main} [built][path] external "path" 42 bytes {main} [built][webpack-node-externals] external "webpack-node-externals" 42 bytes {main} [built][nodemon] 1.18.4[nodemon] to restart at any time, enter `rs`[nodemon] watching: build/server.js[nodemon] starting `node build/server.js`
Configuration and Defaults
Nodemon
By default, Nodemon has been configured to run and watch the first output file of your Webpack build. It has also been set to a 250ms
delay to give Webpack a chance to finish its build before restarting the node server.
script: defaultOutput watch: defaultOutput delay: '250'
These settings can be overridden and any other Nodemon configuration properties can be added
nodemonConfig: script: './build/aux.js' // What to run watch: path // What to watch args: 'example' // Arguments to pass to script verbose: true // Verbose // etc... ;
Ngrok
By default, Ngrok has been configured to tunnel to port 3000
over the http
protocol
addr: 3000
These settings can also be overridden and any other Ngrok configuration properties can be added
ngrokConfig: addr: 8080 // Port to tunnel to authtoken: '4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p' // Ngrok auth token subdomain: 'example' // Reserved tunnel name bind_tls: false // Disable HTTPS // etc... ;