A HTML/JavaScript template for monitoring a product by encouraging product developers to gather all the information about the status of a product, including live monitoring, statistics, endpoints, and test results into one place.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Fix issue where content was not created during first time install Jan 25, 2018
.jsbeautifyrc Added beautify coding for use with Atom. Jul 13, 2015
CHANGELOG.md 2.3.3 Jan 25, 2018
README.md Clarify how to create your own product monitor Jan 25, 2018
package-lock.json 2.3.2 Jan 7, 2018
package.json 2.3.3 Jan 25, 2018


Product Monitor

A HTML/JavaScript template for monitoring a product by encouraging product developers to gather all the information about the status of a product. The idea is to provide components to bring live monitoring, statistics, endpoints, and test results all into one place.

Uses a pattern of HTML/JavaScript components connected to custom JSON /api/ endpoints which can be created and customised in order to use your own declarative HTML templates to create a monitor customised to your project's needs.

NPM Version

How to get started

How to create your own product monitor

1. Run mkdir my-product-monitor && cd my-product-monitor to start in a new folder

2. Run npm init --yes to create new default project

3. Run npm install product-monitor --save

4. Create your own server.js file:

const monitor = require('product-monitor')
const server = monitor({
  "serverPort": 8080,
  "productInformation": {
    "title": "My Product Monitor",
  "userContentPath": "config"

5. Run your server using the command node server.js, you should see the following output:


[My Product Monitor Listening] on http://localhost:8080

6. Visit http://localhost:8080 to see the monitor in action

7. Now that your server is running, read the supplied documentation, and try out the examples!

Product Monitor Example

Key Features

  • Minimal setup

  • Write simple HTML to configure your monitor

  • Navigation generated dynamically by scanning /content folder

  • API endpoints loaded dynamically by scanning /api folder

  • Add a single javascript file to create custom JSON /api/ endpoints

  • Variable in-memory caching on all custom /api/ endpoints

  • Component Showcase and documentation served up through client

  • Extremely simple wiring to load JSON data from custom templates, e.g. adding:

    <template for="custom-web-component"><h2>{{name}}</h2><pre>{{dataSourceData}}</pre></template>

    Will enable data loading on:

    <custom-web-component data-source-url="/api/packageInfo"></custom-web-component>

    (No custom javascript required)

  • Bootstrap look and feel, using all their CSS advice and best practice

  • Handlebar templates for rendering complex JSON data


Product Monitor Example

Defined by:

<status-checker data-url="/">Can monitor its own server</status-checker>
<status-checker data-url="https://google.com" data-contains="Google">Can monitor google</status-checker>
<status-checker data-url="/api/generateStatusCode?statusCode=404">Can monitor for 404's</status-checker>
<status-checker data-url="http://not-a-real-dns-entry/">Can monitor DNS not found errors</status-checker>

Development Instructions using a checkout from github

  1. Check out (or fork) this project
  2. From the project root, run: npm install
  3. Run npm test to run a smoke test against the server
  4. Run npm start to start the monitor
  5. Visit http://localhost:8080

Warning: you might miss out on the latest updates to the server and its documentation if you check out this project directly from github. The recommended method for setting up a monitor is to use the NPM setup instructions.

Library Credits

Downloaded from CDN:

  • Bootstrap - basic styling and layout for client-side components
  • jQuery - for remote calls to server to drive components
  • Handlebars - for "minimal templating on steroids"
  • Node.js - for package management and running the server instance
  • Strapdown.js - for markdown rendering via <markdown></markdown> tags
  • Web Component JS - for enriching the client DOM with web component templates, providing the client-side data-loading and rendering logic for the product monitor.

Node packages:

  • Express - for defining the server, the api endpoints, and serving up the client
  • md5-node - for hashing keys in an in-memory cache
  • request - for making server side requests to remote domains
  • utils-merge - for merging configuration together with the default config
  • ncp - for copying files used during setup of a new server instance
  • And more... thanks to the community for such a diverse and useful set of libraries



NodeJS on Support
Windows 8 Excellent
Mac OSX Excellent
Raspian Seems good


Browser Support
Chrome Excellent
Chromium Seems good
Opera Works a treat
IE11 Seems alright
Firefox Plays nice

Support and Feedback

Please get in touch for support and feedback by raising an issue here on this github project.