SICT

WEB700

Web Programming Foundations

Schedule Notes Resources Graded Work MyApps Instructions Cyclic Guide Code examples

WEB700 Week 4 Notes

Formal Introduction to Node.js

Node Logo

As we learned at the beginning of this course, Node.js is actually a JavaScript runtime environment based on Chrome’s V8 engine. It is a command-line program (written in C++) that you can install on your local machine or on a web-server that will take your JavaScript code and execute it.

Recall, our very first line of JavaScript:

console.log("Hello World!");

This is obviously a very trivial example, however we have made an important assumption: that we have access to a global “console” object. In Node.js we have access to a number of global objects / variables in addition to the built-in objects that are built into the JavaScript language. Some of the Node.js Globals that we will be using include:

Console

Process

__dirname

__filename

setTimeout()

setInterval()

require()

Node also includes a number of other extremely useful core “modules”, including:

util

path

events

fs


Modules

We can also create our own Modules that work the same way, by making use of a global “module” object - which isn’t truly “global” in the same sense as “console”, but instead global to each of your modules, which are located in separate .js files. For example, consider the two following files (modEx1.js: the main file that node will execute, and message.js: the file containing the module):

file ./modEx1.js

var message = require("./modules/message.js");

message.writeMessage("Hello World!");

message.readMessage();

file: ./modules/message.js

// NOTE: Node.js wraps the contents of this file in a function:
// (function (exports, require, module, __filename, __dirname) { ... });
// so that we have access to the working file/directory names as well
// as creating an isolated scope for the module, so that our
// variables are not global. 

var localFunction = function () {
 // a function local to this module
}

var localMessage = "";

module.exports.writeMessage = function(msg){
   localMessage = msg;
}

module.exports.readMessage = function () {
  console.log(localMessage + " from " +  __filename);
}

Executing the code in modEx1.js (ie: node modEx1.js) should output:

“Hello World” from …

where … is the absolute location of the message.js file in your system, for example: C:\Users\patrick.crawford\ModTest\modules\message.js

Notice how our “message” module uses the exports property of the “module” object to store functions and data that we want to be accessible in the object returned from the require(“./modules/message.js”); function call from modEx1.js. Generally speaking, if you want to add anything to the object returned by “require” for your module, it’s added to the module.exports object from within your module. In this case, we only added two functions (readMessage() and writeMessage()).

Using this methodology, we can safely create reusable code in an isolated way that can easily be added (plugged in) to another .js file.


NPM – Node Package Manager

The Node package manager is a core piece of the module based node ecosystem. The package manager allows us to create reusable modules that can be packaged and put on the npm repository for others to use. We will make heavy use of the Node Package Manager in this course.

Node Package Manager (npm for short), is installed by default when you install node. From the command line you can run ‘npm’ with various commands to download and remove packages for use with your Node applications. When you have installed a package from npm you use it in the same way as using your own modules like above, with the require() function.

All npm packages that you install locally for your application will be installed in a node_modules folder in your project folder.

Here are the most common npm commands you will use:

npm install [Module Name] ( ie: npm install express )

npm uninstall [module name]

npm init

npm prune

npm list


Globally installing packages

Every so often, you will want to install a package globally. Installing a package globally means you will install it like an application on your computer which you can run from the command line, not use it in your application code. For example, some npm packages are tools that are used as part of your development process on your application:

One example is the migrate package which allows you to write migration scripts for your application that can migrate your data in your database and keep track of which files have been run.

Another example is grunt-cli so that you can run grunt commands from the command line to do things like setup tasks for running unit tests or checking for formatting errors in code before pushing up new code to a repository.

A third example is bower. Bower is a package manager similar to npm but typically used for client side package management. To install a package globally you just add the -g switch to your npm install command. For example:

npm install bower -g

Globally installed packages do not get install in your node_modules folder and instead are installed in a folder in your user directory. The folder uses for global packages varies for Windows, Mac, and Linux. See the documentation if you need to find globally installed packages on your machine.


package.json explained

The Node Package Manager is great. It provides an easy way to download reusable packages or publish your own for other developers to use. However, there are a few problems with sharing modules and using other modules, once you want to work on an application with someone else. For example:

How are you going to make sure everyone working on your project has all the packages the application requires?

How are you going to make sure everyone has the same version of all those packages?

And lastly, how are you going to handle updating a package and making sure everyone else on your project updates as well?

Well that’s where the package.json file comes in.

The package.json file is a listing of all the packages your application requires and also which versions are required. It provides a simple way for newcomers to your project to get started easily and stay up to date when packages get updated.

The npm documentation for the package.json file has all the information you will need as you begin building applications in node.js

Let’s look at a simple package.json example file

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (seneca) seneca
version: (1.0.0)
description:
entry point: (index.js) week4.js
test command:
git repository:
keywords:
author:
license: (ISC) MIT
About to write to C:\seneca\package.json:

{
  "name": "seneca",
  "version": "1.0.0",
  "description": "",
  "main": "week4.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

Is this ok? (yes) yes

You can start your own package.json file from scratch but it is much easier to run an npm init in your project folder, answer a few questions, and your initialized package.json file will be generated for you. Once generated, you can edit it if you decide to change the name or version (for example). Once you decide to add packages to your app you can simply install the package with npm install. This will save the package and version into the package.json file for you so that when others want to work on your app, they will have the package.json file and can use npm install to install all the required dependencies with the right version. Think of package.json as a checklist for your application for all of its dependencies.


Building a simple web server using Node.js with Express.js

In week 5, your going to learn more about express.js but for now let’s introduce it as a module you can install from NPM that has lot’s of code that wraps up more complicated code and as a result it makes writing your own web server MUCH easier than writing it from scratch in node.js

To get started:

Now if we take a look at the package.json file you can see that it has a new section that has been added for the express dependency (note: your version may be newer).

  "dependencies": {
    "express": "^4.14.0"
  }

This means that if we give our project to someone else now they can just type npm install and it will install the dependencies listed here and the app should be able to run and have everything it needs.

Now let’s edit our week4.js file and create a web server in 13 lines of code! In your new week4.js file, enter the following lines of code:

NOTE In the below example, we will be returning HTML formatted text to create hyperlinks between various routes within our simple website. Working with express to define routes and the specific rules of HTML are described in week 5 & week 6 respectfully.

var express = require("express");
var app = express();

var HTTP_PORT = process.env.PORT || 8080;

// call this function after the http server starts listening for requests
function onHttpStart() {
  console.log("Express http server listening on: " + HTTP_PORT);
}

// setup a 'route' to listen on the default url path (http://localhost)
app.get("/", function(req,res){
    res.send("Hello World<br /><a href='/about'>Go to the about page</a>");
});

// setup another route to listen on /about
app.get("/about", function(req,res){
    res.send("<h3>About</h3>");
});

// setup http server to listen on HTTP_PORT
app.listen(HTTP_PORT, onHttpStart);

You can now run this web server by typing node server.js from the commandline.

$ node week4.js
Express http server listening on: 8080

and visit the website by navigating to http://localhost:8080


Sending a HTML page back from a “get” request

Now that we know how to send messages back from our server, it’s very simple to extend this functionality to return files (ie, HTML pages) instead (Note: We will be covering HTML in greater detail in Week 6), so don’t worry if you don’t immediately understand the code below).

To begin, we must first create a “views” folder for our HTML files inside the working (open) folder.

/node_modules
/views
week4.js
package.json

Next, we must add a new require for the path module at the top of our week4.js file.

var path = require("path");

And most importantly, add the new about.html page inside our new views folder:

<!doctype html>
<html>

<head>
  <title>About</title>
</head>

<body>
  <h1>About</h1>
  <p>This is what it's all about.<br /><a href='/'>Go back to home</a></p>
</body>

</html>

Your project folder should now look something like the below:

/node_modules
/views
  about.html
week4.js
package.json

In order to serve this page, we make a small change to our “/about” route (ie; use the sendFile method instead of the send method on the response object).

// setup another route to listen on /about
app.get("/about", function(req,res){
  res.sendFile(path.join(__dirname,"/views/about.html"));
});

To test your server, run node week4.js to see the results on http://localhost:8080


Sources