Web Development using Node.js, NPM, Express, Bower

Quick Summary of Tech used:

  • Node.js is a JavaScript runtime, or server-side runner for JavaScript.
  • NPM is the package manager for Node.js (installs together with nodejs).
  • NPM allows download of modules (e.g. Express, Bower) easily using Command Line Interface (CLI).
  • Express is a Node.js module, and serves as a web server.
  • Express can also generate files to start web development easily.
  • Bower is a Node.js module for manages web application client-side dependencies e.g. JQuery.

Steps to start development using Node.js, NPM, Express, Bower

  1. Install Express
  2. Use Express to generate files
  3. Resolve all dependencies using NPM
  4. Start web server
  5. Using bower to install JQuery
  6. Modify index.html to use JQuery, app.js to serve from bower_components

1. Install Express

npm install -g express

This installs the express web server globally -g

2. Use Express to generate files

express myapp

This generates a folder myapp with all the files required to start web development.

The files generated is shown below:

3. Resolve all dependencies using NPM

The generated files have NPM dependencies, which are required by express and code generated.

cd myapp

npm install

4. Start web server

set DEBUG=myapp:* npm start

5. Using bower to install JQuery

npm install --save bower

This installs bower, and saves the dependency information in package.json. The next time any developers uses npm install will automatically resolve bower module.

bower init

This initializes the directory with "bower.json" file. This file contains all client-side dependencies of the application. Resolved bower components can be ignored for source control because developers can use bower.json to resolve the dependencies.

bower install --save jquery

This installs jquery in bower_components of myapp root directory. --save option updates bower.json file with jquery as the dependency.

6. Modify index.html to use JQuery, app.js to serve from bower_components

Create index.html in public folder with the following contents:

    
        Hello world!

Update app.js as shown below to allow any bower dependency to be fetched from the bower_components directory:

// This code must appear before the latter statement
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components/')))
app.use(express.static(path.join(__dirname, 'public')));

Run again and notice jquery is fetched from bower_components.

set DEBUG=myapp:* & node start