Use Node.js Modules in the Browser with Browserify

Browserify allows you to Require JavaScript files into other JavaScript files usingrequire('./testmodule')just like NodeJS does, but in a Web Browser Application!

In other words, it allows you to write browser-based applications using node.js-style requires. Use Node.js Modules in the Browser with Browserify Very Cool!

This is done by using the Browserify NodeJS application from the command line to recursively analyze all the require() calls in your app and builds our final output as bundle.js with all the dependencies.

Quick Overview of How to Use Browserify

1) Install Browserify using NodeJSs NPM Package Manager from the command line/terminal window

2) Write a test module file

3) Use the test module in our main JavaScript file

4) Create our bundle file with Browserify from the command line/terminal window

5) Add bundle.js to your index.html file and load the application webpage in you web browser.

More Details for Browserify

  • You can require core NodeJS modules (crypto, querystring, url, etc.), community modules published on NPM, and your own application modules.
  • Browserify requires you to build your application (using the browserify command line tool) before you can run/test it. But Watchify or Beefy can make that build process transparent during development by watching for source file changes, and building your application behind the scenes.
  • Browserify supports source maps to let you debug your application using individual JavaScript files.
  • There are many Browserify Web Browser versions of NodeJS Modules on GitHub and the web

Browserify Tools

Beefy is a local development server designed to work with Browserify.
https://github.com/chrisdickinson/beefy

Watchify is a watch mode for Browserify builds. Update any source file and your Browserify bundle will be recompiled on the spot.
https://github.com/substack/watchify

HTTP Module Example

Here is a quick example of how to use this HTTP module in the Web browser using Browserify.

1) Install http-browserify using NodeJSs NPM Package Manager from the command line/terminal window

2) Back in my app.js file I will add this code below, which in turn loads a remote pages content using AJAX and inserts its content into a DIV on my main app page

3) Back on my index.html file I now add this DIV which will hold the content that is loaded from a Remote URL

Last Comments

As you can see from this very basic example Browserify is a pretty amazing little project. There are many modules that have been ported over from NodeJS to work with Browserify as well as many and most of Nodes modules already working out of the boxin your WEB BROWSER that is!

I think this is a great way to organize code from a larger project as well as use the same structure and syntax that you might be familiar with if you ever work with NodeJS. I have only shown a couple very basic examples of what it can do but I recommend you go on over to there website and check the project out. I have virtually no Node experience as I am mainly a PHP developer and I often work with JavaScript in the Browser so that is one reason I find this project really interesting. Being able to run Node Modules in the Browser environment. Feel free to leave a comment to discuss or correct me if you feel I got something wrong.

Thanks for reading and please share with the social button below if you enjoyed this article, also subscribe to the newsletter which is only about 1-2 mailings a month.

http://browserify.org

https://github.com/substack/node-browserify