npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nodemon-ngrok-webpack-plugin

v1.0.3

Published

Webpack plugin to start/reload Nodemon server and use ngrok to create localhost tunnel

Downloads

14

Readme

nodemon-ngrok-webpack-plugin

CircleCI npm version codecov

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 = require('path');
const NodeExternals = require('webpack-node-externals');
const NodemonNgrokWebpackPlugin = require('nodemon-ngrok-webpack-plugin');

module.exports = {
    mode: 'development',
    target: 'node',
    externals: [NodeExternals()],
    entry: './src/server.js',
    output: {
        path: path.resolve('./build'),
        filename: 'server.js'
    },
    plugins: [
        // Where the magic happens
        new NodemonNgrokWebpackPlugin()
    ],
}

Run:

webpack --watch

Output

webpack is watching the files…
   ╔════════════════════════════════════════════════════════╗
   ║                                                        ║
   ║   ngrok Tunnel Running at: https://b30a5d06.ngrok.io   ║
   ║   ngrok Client: http://localhost:4040                  ║
   ║                                                        ║
   ╚════════════════════════════════════════════════════════╝
Hash: b977a3a88dc37e896883
Version: webpack 4.20.2
Time: 901ms
Built at: 10/11/2018 11:43:44 AM
    Asset      Size  Chunks             Chunk Names
server.js  5.42 KiB    main  [emitted]  main
Entrypoint 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

new NodemonNgrokWebpackPlugin({
    nodemonConfig: {
        script: './build/aux.js', // What to run
        watch: path.resolve('./build'),  // 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

new NodemonNgrokWebpackPlugin({
    ngrokConfig: {
        addr: 8080, // Port to tunnel to
        authtoken: '4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p', // Ngrok auth token
        subdomain: 'example', // Reserved tunnel name
        bind_tls: false, // Disable HTTPS
        // etc...
    },
});