How to access index.js from static page in NodeJS

Question

I'm currently working on a project in NodeJS where it hosts a tiny web server and opens a web browser navigated to this web server when the user issues the command npm start .

My project directory structure is as following:

    root_directory/
       node_modules/
       server/
         index.html
         css/
         html/
         js/
           main.js

       .jshintrc
       index.js
       package.json
       package-lock.json

index.js in the root directory is the main file for NodeJS to execute on npm start. The server directory contains static files served by Express.

index.js

const express = require('express');
const app = express();
const opn = require('opn');

{ ... }

function startServer() {
    console.log("Starting server...");

    // Start the web server
    app.use(express.static('server')); // <- Serve the 'server' directory as static content
    app.listen(7120, function() {
        console.log("Successfully started server!");
    });

    // Open a browser window navigated to the server
    opn("http://localhost:7120");
}

main.js

var underscore = require("underscore");
                 // ^ This part is going wrong

console.log("Server loaded successfully.");

When I try to require() in the static file main.js , it throws the following error:

main.js:1 Uncaught ReferenceError: require is not defined
    at main.js:1

My question is:

How do I use NodeJS libraries/functions such as require() in static pages served by Express?

The require() function works, of course, in index.js because it's run by Node.

Answer 1

The require() statement is not recognised by the browser. In order for it to work you should use a client-side runtime library such as requireJs , or use a build-time bundler such as browserify or webpack .

Answer 2

Extending from the above post:

Yes you will need some form of bundler that transforms your code. Browserify is usually quite useful. It will define the "require" function for you and create the appropriate logic to be able use modules in the browser.

Here are some instructions on how you may go about it:

Install Browserify globally using npm:

npm install -g browersify

Then once you're ready to bundle for the web: A common naming convention for the output file is "bundle"

browserifsy index.js -o bundle.js

Note: you can add this line into your "scripts" in the package.json for every project so you do not have to repeat that line again.

"scripts" : {
  "build" : "browserify index.js -o bundle.js"
}

Howevever, bundling it again and again is a pain when debugging or making complex applications. To overcome that use Budo.

Budo is a live development server using browserify and allows you to use the nodejs require syntax with live updates

Simply install it globally:

npm install -g budo

Then run the budo server:

budo index.js:bundle.js

or to automatically open the web browser to the specific localhost port where browserify serves to

budo index.js:bundle.js --open

Then make sure to include "bundle.js" as a script in your html. Now all your modular code should work perfectly and you can watch it update live as you code.

Hope that helped!