justgage-npm-sample

A sample webpage built with Browserify to incorporate the JustGage npm package.

JustGage is described as:

A handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on the Raphaël library for vector drawing.

Browserify is described as:

Browserify is a development tool that allows us to write node.js-style modules that compile for use in the browser. Just like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables. We can even require other modules using the require function, and if we omit the relative path it’ll resolve to the module in the node_modules directory.

The Basics

This repository is a reference on how to set up a basic dashboard webpage that includes a demonstration gage created using the JustGage library.

• See main.js for the JustGage demonstration javascrpt code as described on their repository page.
• bundle.js is generated with

browserify main.js -o bundle.js

This results in a single Javascript file that includes all the packages defined in package.json that were installed with npm. For example the JustGage library:

  "dependencies": {
    "justgage": "^1.4.0"
  },

• See index.html loading the bundle.js file after the target html element is defined:

<div id="gauge"></div>

NOTE: browserfy can be install globally with:

npm install -g browserify

or run with npm as a script with:

npm run build

---

References:

• JustGage - npm package
• JUSTGAGE SVG JAVASCRIPT ANIMATED GAUGES
• A Beginner’s Guide to npm — the Node Package Manager
• Downloading and installing packages locally
• Getting Started with Browserify
• A Beginners Guide to Browserify
• Introduction to Browserify
• Getting Started with ESLint