notoriousb1t

How I got started with NodeJS and Express

I decided about a month ago to rewrite my blog from an ASP.NET Razor WebPages to a NodeJS site using Express. I wanted an RSS Feed and a few other dynamic things to increase how often visitors read other articles and WebPages was not cutting it. I could have converted it to ASP.NET MVC instead, but I didn't want to miss the opportunity to build something real with NodeJS. Here is how I got started in building this blog in NodeJS.

Installing Node

I started by downloading Node from their main site, https://nodejs.org/download, and running the installer for Mac OS. I thought this would be more complicated, but it turned out to be surprisingly easy. I am used to downloading installers, having it download 500 MB+ of actual program, running and restarting that three or four times, downloading plugins, and possibly setting some environment variables.

After the install, I started getting used to Node Package Manager (npm) from the terminal.

Thoughts on using the Terminal...

I first used the terminal to launch dosshell, a sort of file explorer for DOS 4-6. As a kid, it was the thing that let me play computer games while four of my other five siblings at my mom's were busy playing Genesis. I wasn't going to get a turn to play it anyway, so I spent that time playing computer games.

For me, using a command line is second nature. However, I know that for those new to it, it can be quite intimidating. If you spend the time to get used to it, though, it can be quite rewarding. If you know the right things to say, you can accomplish tasks so much faster than if you have to click through a menu.

Typically, you can type [programName] --help, [programName] -?, or man [programName] to bring up some usages or the manual in some cases, so there should never be a sense of being totally lost. Just like any other programming tool, the more you use it and learn about it, the faster and more useful it becomes. I digress...

Getting used to NPM

After looking at the help and a few random blog posts, I figured out I needed to create a folder and initialize the directory with a package.json file.

mkdir test1  
cd test1  
npm init  

The command line prompted me with a bunch of questions and eventually asked to save the package.json file. After just pressing [ENTER] through all of the questions, I ended up with a package.json file like this:

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

After tinkering some more, I was able to figure out how I could install dependencies to the directory easily. I needed to use the install option, specify the dependency (in this case, express), and then use the --save option to save this to my package.json file.

npm install express --save  

It downloaded the Express files to the node_modules folder and added the following lines into package.json:

    "dependencies": {
        "express": "^4.12.4"
      }

It was easy enough to pull down the files, but I was kind of lost for a few minutes on how to actually build the app.

Taking the edge off with Express Generator

The idea of building a Node Express app from scratch was daunting. Luckily, (standing on the backs of giants) I was able to find tutorials with a better way after a simple Google search. The first steps usually look like this:

npm install -g express  
npm install -g express-generator  

Those two commands install express and the express-generator node programs. The -g flag installs them globally to node. In my case, I had to call sudo !! afterward on Mac OS to re-run the commands in super user mode. Usually there is a help flag for command line programs, so I tried that.

    express --help

      Usage: express [options] [dir]

      Options:

        -h, --help          output usage information
        -V, --version       output the version number
        -e, --ejs           add ejs engine support (defaults to jade)
            --hbs           add handlebars engine support
        -H, --hogan         add hogan.js engine support
        -c, --css   add stylesheet  support (less|stylus|compass) (defaults to plain css)
            --git           add .gitignore
        -f, --force         force on non-empty directory

I tried a couple of different combinations. First I tried just typing express and an application name. By default, it generates a simple express app using Jade as a templating engine and CSS. Admittedly, I did not give Jade a fair chance. I think that a transpiler language should at least resemble the language it is being compiled to. This is probably why I have never taken to CoffeeScript, but I have completely embraced TypeScript.

After about a half hour (OK, maybe it was closer to 3 hours) of creating and tearing down express applications, I finally settled in on this:

express website --hbs --css less --git  

That tells express to create a new application in a new folder called "website" using Handlebars for templating and LESS for CSS. It also generates a .gitignore file that ignores the many dependencies needed to run Express.

It is easy to overlook, but the output of the generator gives you the next steps needed to run the application:

 ... console output ...

install dependencies:  
  $ cd website && npm install

run the app:  
   DEBUG=website:* ./bin/www

I entered the following command into the terminal and 30ish lines later, it looked like everything had installed and I was in the right directory.

cd website && npm install  

I ran this code to launch the express application

node ./bin/www  

I opened http://localhost:3000/ in Chrome. I was welcomed with "Welcome to Express" written on the page. That was how I got the ball rolling on this new version of the blog.