Browserify

The problem

In your server-side code bases, you have probably using the require module quite often already and node handled it with no quibbles.

const express = require('express')

Our browser clients, however, will not out of the box understand require which can lead to errors.

Let's say I want to use the one-liner-joke module to generate random funnies on our client side.

If we don't already have one on the client side, we can initialise a node package there with npm init -y.
Then we can install the module with npm install one-liner-joke.

We might then require it in a client-side JS file...

const oneLiner = require('one-liner-joke')

... but disaster strikes when we run it in browser and we are hit with the error Uncaught ReferenceError: require is not defined.

A solution

There are many tools to help us with this and we will look at a more complex one at the start of LAP 2 but a nice easy one to get started with is Browserify.

Install browserify

Browserify is, itself, an npm package. You can install it globally or as a dev dependency. npm i -g browserify / npm i --save-dev browserify (if working in a team, you'll probably want everyone to have it so make sure you all install globally if it's not a dev dependency.)

Create a script

In your package.json file, create a new script:

{
    ...
    "scripts": {
        ...,
        "bundle": "browserify <your-js-file>.js > bundle.js"
    }
}

Make sure to replace <your-js-file> with your actual js file name!

Run the script

Run your new script from your terminal with npm run bundle. Make sure you are running it from the same folder that contains your relevant package.json. If all goes well, you'll see a new file bundle.js created in the same folder. Check it out - the first line is probably a wild looking function!

Load the new script file

We can now use this new bundle.js instead of our original JS file, so update your index.html accordingly:

<script src="bundle.js"></script>

Require with success!

Now refresh or reopen your index.html in your browser and check the console - the require error should be gone!

Updating your bundle

Do not update bundle.js directly
When you make changes to your original JS file, rebundle with npm run bundle and then refresh your browser as per usual.