Installing from Source

This section outlines how to install Node from source. I highly recommend using one of the installers or a package manager, but if you are one of those rare birds who enjoy installing software from source, then this is the section for you. Otherwise, jump ahead to “Interacting with the Node REPL”.

The first step is to download the source from Nodejs.org:

$ wget http://nodejs.org/dist/v0.12.15/node-v0.12.15.tar.gz

Next, you’ll need to extract the source in the downloaded file:

$ tar zxvf node-v0.12.15.tar.gz

This command unzips and extracts the Node source. For more information on the tar command options, execute man tar in your terminal.

Now that you have the source code on your computer, you need to run the configuration script in the source code directory. This script finds the required Node dependencies on your system and informs you if any are missing on your computer:

$ cd node-v0.12.15
$ ./configure

Once all dependencies have been found, the source code can then be compiled to a binary. This is done using the make command:

$ make

The last step is to run the make install command. This installs Node globally and requires sudo privileges:

$ sudo make install

If everything went smoothly, you should see output like the following when you check the Node.js version:

$ node -v
v0.12.15

Interacting with the Node REPL

Node is a runtime environment with a REPL (read–eval–print loop), which is a JavaScript shell that allows one to write JavaScript code and have it evaluated upon pressing Enter. It is like having the console from the Chrome developer tools in your terminal. You can try it out by entering a few basic commands:

$ node
> (new Date()).getTime();
1436887590047
>
(^C again to quit)
>
$

This is useful for testing out code snippets and debugging.

Managing Projects with npm

npm is the package manager for Node. It allows developers to easily reuse their code across projects and share their code with other developers. npm comes packaged with Node, so when you installed Node you also installed npm:

$ npm -v
2.7.0

There are numerous tutorials and extensive documentation on the Web for npm, which is beyond the scope of this book. In the examples in the book we will primarily be working with package.json files, which contain metadata for the project, and the init and install commands. We’ll use our application project as working example for learning how to leverage npm.

Initializing the Project

The npm CLI (command-line interface) is terminal program that allows you to quickly execute commands that help you manage your project/package. One of these commands is init.

init is an interactive command that will ask you a series of questions and create a package.json file for your project. This file contains the metadata for your project (package name, version, dependencies, etc.). This metadata is used to publish your package to the npm repository and to install your package from the repository. Let’s take a walk through the command:

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

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

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

Press ^C at any time to quit.

The first prompt you’ll see is for the package name. This will default to the current directory name, which in our case is thaumoctopus-mimicus.

name: (thaumoctopus-mimicus)

Press enter to continue. The next prompt is for the version:

version: (0.0.0)

0.0.0 will do fine for now since we are just getting started and there will not be anything of significance to publish for some time. The next prompt is for a description of your project:

description:

Enter “Isomorphic JavaScript application example”. Next, you’ll be asked for for the entry point of your project:

entry point: (index.js)

The entry point is the file that is loaded when a user includes your package in his source code. index.js will suffice for now. The next prompt is the for the test command. Leave it blank (we will not be covering testing because it is outside the scope of this book):

test command:

Next, you’ll be prompted for the project’s GitHub repository. The default provided here is https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus.git, which is this project’s repository. Yours will likely be blank.

git repository:
  (https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus.git)

The next prompt is for keywords for the project:

keywords:

Enter “isomorphic javascript”. Then you’ll be asked for the author’s name:

author:

Enter your name here. The final prompt is for the license. The default value will be (ISC) MIT or (ISC), depending on the NPM version, which is what we want:

license: (ISC) MIT

If you navigate to the project directory you will now see a package.json file with the contents shown in Example 5-1.

{
  "name": "thaumoctopus-mimicus",
  "version": "0.0.0",
  "description": "Isomorphic JavaScript application example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus.git"
  },
  "keywords": [
    "isomorphic",
    "javascript"
  ],
  "author": "Jason Strimpel",
  "license": "MIT",
  "bugs": {
    "url":
     "https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus/issues"
  },
  "homepage": "https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus"
}

Installing the Application Server

In the previous section, we initialized our project and created a package.json file that contains the metadata for our project. While this is a necessary process, it does not provide any functionality for our project, nor is it very exciting—so let’s get on with the show and have some fun!

All web applications, including isomorphic JavaScript applications, require an application server of sorts. Whether it is simply serving static files or assembling HTML document responses based on service requests and business logic, it is a necessary part and a good place to begin our coding journey together. For our application server we will be using hapi. Installing hapi is a very easy process:

$ npm install hapi --save

This command not only installs hapi, but also adds a dependency entry to the project’s package.json file. This is so that when someone (including you) installs your project, all the dependencies required to run the project are installed as well.

Now that we have hapi installed, we can write our first application server. The goal of this first example is to respond with “hello world”. In your index.js file, enter the code shown in Example 5-2.

var Hapi = require('hapi');

// Create a server with a host and port
var server = new Hapi.Server();
server.connection({
    host: 'localhost',
    port: 8000
});

// Add the route
server.route({
    method: 'GET',
    path:'/hello',
    handler: function (request, reply) {
       reply('hello world');
    }
});

// Start the server
server.start();

To start the application execute node . in your terminal, and open your browser to http://localhost:8000/hello. If you see “hello world”, congratulations! If not, review the previous steps and see if there is anything that you or I might have missed. If all else fails you can try copying this gist into your index.js file.

Writing Next-Generation JavaScript (ES6)

ECMAScript 6, or ES6, is the latest version of JavaScript, which adds quite a few new features to the language. The specification was approved and published on June 17, 2015. People have mixed opinions about some features, such as the introduction of classes, but overall ES6 has been well received and at the time of writing is being widely adopted by many companies.

The general consensus in the industry is to begin leveraging the new features afforded by ES6, which are not yet widely supported, now and to compile down to an ECMAScript version that is widely supported (i.e., ES5). Part of the compilation process is to provide polyfills for the ES6 features missing in the target version. Given this industry trend and readily available compilation support, we will be leveraging ES6 for the rest of the examples in this book. Let’s start with updating the code from the last example.

The first thing we want to change is how we are importing our dependency, hapi, in index.js. Replace the first line in the index.js file with this line:

import Hapi from 'hapi';

ES6 introduces the concept of a module system to JavaScript, which is a concept that has been missing since its inception. In the absence of a native module interface other patterns have emerged to fill the gap, such as AMD and CommonJS. The require syntax from the original index.js (Example 5-2) is the CommonJS format.

The next change we need to make is to our server variable declaration. Replace the second line in the file with:

const server = new Hapi.Server();

const is one of the new variable declarations available in ES6. When a variable is declared using const, the reference cannot be changed. For example, if you create an object using const and add properties to the object, that will not throw an error because the reference has not changed. However, if you attempted to point the variable to another object, that would result in an error because the reference would change. We use const because we don’t want to accidentally point our server variable to another reference.

Example 5-3 shows what the index.js file looks like with these changes in place.

import Hapi from 'hapi';

// Create a server with a host and port
const server = new Hapi.Server();
server.connection({
    host: 'localhost',
    port: 8000
});

// Add the route
server.route({
    method: 'GET',
    path:'/hello',
    handler: function (request, reply) {
       reply('hello world');
    }
});

// Start the server
server.start();

Now that we have updated index.js to use the latest and greatest ES6 syntax, let’s try running it. Depending on what version of Node you are running, your results may vary—that is, the browser might not render “hello world”. This is because ES6 may not be supported by the version of Node you are running. Fortunately, that is not a problem because there is a compiler that will take our ES6 code and compile it to code that runs in Node 4+.

Compiling from ES6 to ES5

One of the tools mentioned at the beginning of this chapter was Babel, a JavaScript compiler. We will be using Babel throughout the rest of the book to compile our JavaScript, but first we need to install Babel and the ES2015 transformations:

$ npm install --save-dev babel-cli babel-preset-es2015

Just like the hapi installation command, the previous command will add Babel as a dependency to your package.json file. The only difference is that we passed --save-dev instead of --save, so the dependency will be listed under devDependencies in the package.json file as opposed to the dependencies property. The reason for this is because Babel is not required to run your application, but it is a development requirement. This distinction makes it clear to consumers what dependencies are needed for production vs. development. When your project is installed using the --production flag, the Babel CLI will not be installed.

Now that we have successfully installed Babel we can compile index.js, but before we do that we should restructure our project a bit.

If we were to leave our project structure as is and compile index.js, then we would overwrite our source code—and losing your source code without a backup is not a great experience. The fix for this is to specify an output file for Babel. A common location for a project’s distributable is dist, and the common directory for source code is src. I’m not one for inventing new standards, so let’s just stick with those:

$ mkdir dist
$ mkdir src
$ mv index.js src/index.js

Now that we have a project structure that works well for compiling our source, let’s make a change to our package.json. The first change is pointing the main property to our new distributable by changing the "main": "index.js," line to "main": "./dist/index.js",. This informs Node of the new entry point for our application, so that when we execute node . it loads the correct script. We are now ready for our first compilation! Enter the following at the command line:

$ babel src/index.js --out-file dist/index.js

The previous command takes our source, src/index.js, compiles it, and creates our distributable, dist/index.js. If everything went well then we should be able to start up our server again using node ..

Setting Up a Development Workflow

We now have the ability to compile at will and restart the server via the command line, which is a great accomplishment, but stopping development each time to execute those two commands at the terminal will get old very quickly. Luckily, we are not the first people to have the need to automate repetitive tasks and optimize our workflow, so there are a few different automation choices at our disposal. Naturally we will want to pick the latest and greatest choice, so that our code will remain relevant for the next six months. The most recent addition to the JavaScript build world is Gulp, a streaming build system in which you create tasks and load plugins from the extensive community-driven ecosystem. These tasks can then be chained together to create your build process. Sounds great, right? Well, let’s get started. First we need to install Gulp:

$ npm install gulp --save-dev

The next thing we need to do is to create a gulpfile.js filr at the root of our project and define a default task, as shown in Example 5-4.

var gulp = require('gulp');

gulp.task('default', function () {
  console.log('default task success!');
});

Now that we have Gulp installed and a default task defined, let’s run it:

$ gulp
[20:00:11] Using gulpfile ./gulpfile.js
[20:00:11] Starting 'default'...
default task success!
[20:00:11] Finished 'default' after 157 μs

Success! We have Gulp running. Now let’s create a task of substance, like compiling our source. This will require the gulp-babel plugin, which we can install as follows:

$ npm install gulp-babel --save-dev

In our gulpfile.js we now need to modify our default task to handle the compilation. Replace the contents of the file you created earlier with the code shown in Example 5-5.

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('compile', function () {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['compile']);

Now let’s run Gulp again:

$ gulp
[23:55:13] Using gulpfile ./gulpfile.js
[23:55:13] Starting 'compile'...
[23:55:13] Finished 'compile' after 251 ms
[23:55:13] Starting 'default'...
[23:55:13] Finished 'default' after 17 μs
$

This is great, but we are no better off than we were before. The only thing we have really done is to reduce the amount of code we have to type at the terminal. In order for the inclusion of Gulp to really add value we need to automate the compilation and server restarting on a source file save.

gulp.task('watch', function () {
  gulp.watch('src/**/*.js', ['compile']);
});

gulp.task('default', ['watch', 'compile']);

$ gulp
[00:04:35] Using gulpfile ./gulpfile.js
[00:04:35] Starting 'watch'...
[00:04:35] Finished 'watch' after 12 ms
[00:04:35] Starting 'compile'...
[00:04:35] Finished 'compile' after 114 ms
[00:04:35] Starting 'default'...
[00:04:35] Finished 'default' after 16 μs
[00:04:39] Starting 'compile'...
[00:04:39] Finished 'compile' after 75 ms

$ npm install gulp-nodemon --save-dev

$ npm install run-sequence --save-dev

var nodemon = require('gulp-nodemon');
var sequence = require('run-sequence');

gulp.task('start', function () {
  nodemon({
    watch: 'dist',
    script: 'dist/index.js',
    ext: 'js',
    env: { 'NODE_ENV': 'development' }
  });
});

gulp.task('default', function (callback) {
  sequence(['compile', 'watch'], 'start', callback);
});

$ gulp
[16:51:43] Using gulpfile ./gulpfile.js
[16:51:43] Starting 'default'...
[16:51:43] Starting 'compile'...
[16:51:43] Starting 'watch'...
[16:51:43] Finished 'watch' after 5.04 ms
[16:51:44] Finished 'compile' after 57 ms
[16:51:44] Starting 'start'...
[16:51:44] Finished 'start' after 849 μs
[16:51:44] Finished 'default' after 59 ms
[16:51:44] [nodemon] v1.4.0
[16:51:44] [nodemon] to restart at any time, enter `rs`
[16:51:44] [nodemon] watching: ./dist/**/*
[16:51:44] [nodemon] starting `node dist/index.js`
[16:51:47] Starting 'compile'...
[16:51:47] Finished 'compile' after 19 ms
[16:51:48] [nodemon] restarting due to changes...
[16:51:48] [nodemon] starting `node dist/index.js`

var gulp = require('gulp');
var babel = require('gulp-babel');
var nodemon = require('gulp-nodemon');
var sequence = require('run-sequence');

gulp.task('compile', function () {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('watch', function () {
  gulp.watch('src/**/*.js', ['compile']);
});

gulp.task('start', function () {
  nodemon({
    watch: 'dist',
    script: 'dist/index.js',
    ext: 'js',
    env: { 'NODE_ENV': 'development' }
  });
});

gulp.task('default', function (callback) {
  sequence(['compile', 'watch'], 'start', callback);
});