How to run a NodeJS module in a browser

NodeJS isn’t a programming language but rather it only provides a runtime environment for the execution of JavaScript code. This makes it a server side technology. Running and executing processes on server, and hence accomplishing tasks.

Module is an encapsulated code, separated from main application code with functionality that can be reused throughout your code. NodeJS provides us with various repositories of open source modules that can help us achieve various development tasks. But these modules are only useful if you’re building a server side application.

So a question arises that what should a developer do if they want to build a client side JavaScript application? Well this article will give you the answer, from how to install NodeJS to running its modules on browsers, this article provides you with everything.

Node JS Installation

Before anything, you need to have NodeJS installed. For this visit the link by clicking on this and download the LTS (Recommended) version.

NPM which is Node Package Manager will also be automatically installed on your system along with the installation of NodeJS. NPM is helpful as it’s a package manager that helps in downloading and integrating packages into JavaScript code.

Now, to check whether NodeJS and NPM have been installed on your device you can run the following command:

Node -v
npm -v

How to install NodeJS module

There are two ways you can download the module, locally and globally. The difference is that the globally downloaded module can be accessed easily by all the projects on your system. Whereas, local modules can only be accessed by your current project. Command for Downloading Module Locally:

npm install [module_name]

To better understand this, we’ll install the Express module, which is used for building APIs etc.

npm install express

It’ll provide you with the following output.

A new folder will be created automatically by NPM by the name “node_modules”, It will store all your modules and packages.

Command for Downloading Module Globally

It’s better to install modules both locally and globally. Reason is that it’ll allow you to share the installed command and at the same time you’ll be able to protect the dependencies. Run the following command:

npm install -g [module_name]

In the following example we’ll install dateformat package globally:

npm install -g dateformat

How to Use the Package with JavaScript

Through the following way, the NPM package can be used into the JavaScript:

var dateFormat = require('dateformat');
var now = new Date();

console.log(dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT"));

But this will cause an error:

Why is that? Well, the reason is that NodeJS is a server-side technology. It comes with it’s perks, but a major drawback is you can not run your module on your browser without installing some tools.

How to run modules using Browserify on Browsers

Being able to run a node module on the browser is extremely beneficial. Users can use already existing modules on the client side JavaScript application without having to use a server. But how can this be done? Well, here comes a tool called Browserify.

Browserify is a command line NodeJS module that allows users to write and use already existing NodeJS modules that run on the browser.

As it is a command line tool, users have to convert their script written with NodeJS to JavaScript file so that it can be added with HTML script tag. Let’s understand the process step by step:

Firstly, we have to install Browserify. For installation following command needs to be run:

npm install -g browserify

Now, the following command needs to be run so that you can run your application in the browser without any errors.

browserify name-of-file.js -o bundle.js

This command will resolve all the dependencies and combine your source code into a file that can be included with a single script tag. But note that these commands need to be run each time you make changes in your original source code.

Now, just replace the name of the source in the script tag with “bundle.js” in the html file.

<!DOCTYPE html>
<html>
<body>
<script src = "bundle.js">
</script>
</body>
</html>

Now, if your run this HTML file and open the console, it will not display any error and the result will be displayed:

In this way you can easily use your script through a single script tag inside an HTML file. Through Browserify, you can easily run your modules on browsers without any error.

Conclusion

Running a module of node js on a browser is extremely beneficial and provides ease to the user. In this how-to guide we learned how to run our node module in a browser. As NodeJS uses server side technology , it becomes difficult for users to run its module on the browser. Hence, Broswerify comes into use. With its easy to install commands, making node modules browser compatible becomes an easier task. Hence, creating a client-side JavaScript application becomes easier for users.