Browserify

 
 
Node.js is a server-side software system designed for writing scalable Internet applications, notably web servers.
It is build on built on Chrome's JavaScript runtime. Programs are written on the server side in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability.

Node.js contains a built-in HTTP server library, making it possible to run a web server without the use of external software, such as Apache or Lighttpd, and allowing more control of how the web server works. Node.js enables web developers to create an entire web application in JavaScript, both server-side and client-side.

The latest Node.js version can be downloaded from: http://nodejs.org

Even numbered versions (0.4, 0.6, 0.8) are stable, and odd numbered versions (0.3, 0.5) are unstable. The stable releases are API-stable, which means that if you are using 0.8.1 and 0.8.2 comes out, you should be able to upgrade with no issues.







How to browserify node module ethereumjs-util



Information
Browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag.

More information see:
http://browserify.org/
https://github.com/substack/node-browserify
https://github.com/ethereumjs/ethereumjs-util

Operating system used
macOS 10.12 Sierra

Software prerequisites
node.js


Procedure
  1. Install browserify.
    Type: npm install -g browserify

  2. Show all installed node modules and their versions.
    Type: npm -g ls --depth=0

    You should see:
    [email protected]

  3. Show browserify help.
    Type: browserify --help

  4. In the following example the node module "ethereumjs-util" will be browserified.
    More information about this module see: https://github.com/ethereumjs/ethereumjs-util
    Ethereumjs-util is a collection of utility functions for ethereum. It can be used in node.js or can be in the browser with browserify, which will be demonstrated below.

  5. Create a project directory.
    Type: mkdir ~/ethereumjs

  6. Install the node module ethereumjs-util locally inside this folder.
    Type: cd ~/ethereumjs
    Type: npm install ethereumjs-util

    The node module ethereumjs-util is now installed in folder cd ~/ethereumjs/node_modules
    I have installed ethereumjs-util-5.1.2

    To show all installed modules and their versions inside folder ~/ethereumjs/, type:
    cd ~/ethereumjs
    npm ls --depth=0

  7. Create a file main.js inside this folder.
    Type: touch ~/ethereumjs/main.js

  8. Enter the following lines in file main.js

    module.exports = {
        Util: require('ethereumjs-util')
    }


    Note:
    The name Util is arbitrary chosen, but it is important later when calling the module in the web page.

  9. To browserify the node module ethereumjs-util, the file main.js will be used as input. Browserify will go thru the main.js and will search all attached modules (= require()). Browserify will include the source of those "required "files in a new javascript file. The new javascript file can be given any name. In our example ethereumjs-util.js. The ethereumjs-util.js will contain the ethereumjs-util sources.

    Type: browserify main.js -s EthJS > ethereumjs-util.js

    Note:
    By using the flag -s you assign the global variable name "EthJS" to the module.

  10. The browserify can also transform the code.

    Using flag -d
    Type: browserify main.js -s EthJS -d > ethereumjs-util.js

    -d means include the source map information for easier debugging in the output ethereumjs-util.js. Source map information will help you for better error tracing during development proces, but it will make the output file much larger.

    To extract the source map information in a separate file:
    • Install node module exorcist: npm install -g exorcist
    • Type: browserify main.js -s EthJS -d | exorcist ethereumjs-util.map.js > ethereumjs-util.js
    • Now two files are created: ethereumjs-util.js and ethereumjs-util.map.js

  11. To use the ethereumjs-util.js inside a web page, create a html file, for example ethereumjs_util_example.html and enter the following content:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Ethereumjs-util example</title>
    <script type="text/javascript" src="ethereumjs-util.js"></script>
    </head>
    <body>
    <h1>Ethereumjs-util example</h1>
    <div id="response"></div>
    <script>
    var msg = 'Hello World';
    var hash = EthJS.Util.sha3(msg);
    var output = hash.toString('hex');
    document.getElementById('response').innerHTML = output;
    </script>
    </body>
    </html>


  12. Copy the files ethereumjs_util_example.html and ethereumjs-util.js to a webserver.
    Open a browser and access the ethereumjs_util_example.html file.