Import & Use Browser JavaScript files as Node Modules in NodeJS Easily

Step-by-Step Use of Browserify — Full Code + Use-Case Demo.

In 1 of the previous articles I have shared, I demonstrated how a NodeJS module can be transformed into Browser-compatible JavaScript files which can be rendered in raw <script> tags on the Client browser via the utility Browserify (E.g. json-2-csv npm package)

— Command to run:

node_modules/.bin/browserify index.js -s <name of module> > <name of output JavaScript file>

— File index.js

const converter = require('json-2-csv');
module.exports=converter;

— Output File json2csv.js:

<script type="text/javascript" src="json2csv.js"></script>

For more details and full source code for the above, please refer to:

However, what happens when you have a Browser JS Plugin which you would like to include in your NodeJS web app?

Showcasing Browserify’s complementary Feature

Use-Case Demo: autoComplete.js

In a side project I implemented, I wish to implement the lightweight plugin autoComplete.js into a GIS app as a quick address lookup. Ideally, the address search would behave as follows:

However as I attempt to import the autoComplete.js file into src/app/index.js:

const autoComplete=require('asset/js/autoComplete.js');

This triggers the following error message instead:

Explanation: Since the JS plugin autoComplete.js had been created for browser use-cases only, unless it’s embedded within the browser’s <script src> tags, it is evident that it needs to be bundled into a Node module before being imported into a NodeJS application.

Hence, in order to access Browserify’s utility functions and ‘modularise’ this JS file, it would first be necessary to carry out the following steps to set the tool up:

Step 1. Create a folder for your workspace and inside that folder, proceed to open up your terminal/cmd and run the following commands:

npm init -y
npm install browserify --save

At this point, your workspace should contain the following 3 artifacts:

|--node_modules/
|--package.json
|--package-lock.json
|

Step 2. Create a ‘index.js’ file in your workspace folder

|--node_modules/
|--package.json
|--package-lock.json
|
|--index.js
|

✸Step 3. Copy and paste the contents of autoComplete.js into index.js and make the following changes in the file:

Change 1. Change var to const

const autoComplete = (function(){
    function autoComplete(options){
        if (!document.querySelector) return;
    (...rest of the code...)
    }
    return autoComplete;
})();

Change 2. Finally, add in the 1 line at the end of the file and the final index.js should look like the following:

const autoComplete = (function(){
    function autoComplete(options){
        if (!document.querySelector) return;
    (...rest of the code...)
}
    return autoComplete;
})();
module.exports = autoComplete;

Step 4. In your workspace folder, run the following command in your terminal/cmd:

node_modules/.bin/browserify index.js -s <name of module> > <name of output JavaScript file>

After running the following:

node_modules/.bin/browserify index.js -s autoComplete > autoComplete.js

Result: A new autoComplete.js file should be output and this new file can be retrieved from my GitHub repo (modularised and NodeJS compatible version). This is the modularised version of the autoComplete.js file.

Replace the `autoComplete.js` file in the NodeJS web app. Re-start the app and initialise the module:

const autoComplete = require('js/autoComplete.js');
autoComplete({
      selector: '#geocoder',
      minChars: 2,
      source: function(term, suggest){
        term = term.toLowerCase();
        var choices = Object.keys(geocoders);
        var suggestions = [];
        for (var i=0;i<choices.length;i++) {
            if (~choices[i].toLowerCase().indexOf(term)) {
              suggestions.push(choices[i]);
            }
        }
        suggest(suggestions);
      },
      onSelect: function(e, term, item) {
        let coordinatesStr=geocoders[term];
        let latlng=coordinatesStr.split(',');
        latlng=[parseFloat(latlng[1]),parseFloat(latlng[0])];
        map.animateTo({
            center: latlng,
            zoom: maxZoom,
            pitch: defaultPitch,
            bearing: defaultBearing
        }, {
            duration: 2000
        });
      }
 });

— The error from before is not longer triggered and the address search lookup works properly.

The GIS Side project has been deployed at:

https://sg-hdb-building-layer-in-three-d.netlify.app/

GIS Side Project Source Code: Link

Browserify Minimal Setup Source Code: Link

Conclusion

It is not surprising that Browserify is not primarily known for the functionality displayed in this article. In fact, in use-cases when many Browser-only compatible plugins are required in a NodeJS app, it would be more practical to bundle them into modules with a bundling module such as Webpack instead. However if the primary objective is to merely bundle a handful of functionalities, then Browserify can be considered as a tool for mere convenience.

Many thanks for persisting to the end of this article! ❤ Hope you have found this guide useful and feel free to follow me on Medium if you would like more GIS, Data Analytics & Web application-related content. Would really appreciate it 😀