Node and Express example app setup

In the previous article we discussed some of the decision making around my current app project. The goal there was to decide on a database solution. Criteria for the database included one that would be very fast, easy to implement since we’re currently just building a Minimum Viable Product right now, works well with Node.js and has a non-blocking I/O, asychronous structure. Redis was the clear choice for database solutions, but now I thought it would be worth going through how the initial app setup might look for a JavaScript stack.

Node.js Setup

Node is great at handling lots of information very quickly, and not bogging down an app with string requests like some PHP or Ruby might. It’s setup is pretty straight forward, as we described previously, but there is a bit of a learning curve to it. Installing Node is really as simple as this in Homebrew:
brew install node
This will grab the latest version of Node.js from the Node site. Homebrew does not automatically install the package manager with Node, so we’ll have to run just 1 more line of code for that. The package manager, called NPM (Node Package Manager), will bring in all of the dependencies and tools that we’ll use along side of Node for these projects. To download and install NPM simply use this in Homebrew:
curl https://npmjs.org/install.sh | sh

Ok, now we have Node and NPM installed and running on our local machine. Time to start getting some of the other tools of the trade going.

Express.js

If Node is a great solution for a server side language then Express.js is it’s counterpart for bringing awesomeness to the web. Express is a simple web framework designed specifically for Node. This will allow us to not only create things like web servers and TCP apps in Node, but we can create apps and interactive websites with it as well. Here is the install code for Express:
npm install -g express
The -g here will install this globally, so you can utilize Express in any JavaScript project you choose. Pretty nifty.

Nodemon

For those of you familiar with SASS and Compass you’ll appreciate this one. For the SASS analogy, Compass can be set to “watch” any folder on your machine, and update the CSS when you make changes to the SASS code. For Node projects, when you execute the program with a command like:
node app.js
This is all fine and good, but while we’re in development you’ll want the app to change when you make updates to the code base, right? Well traditionally you’d have to re-run the app every time your code changes, otherwise the app would crash. Bogus, huh? Well fortunately there’s a fantastic module available for Node called Nodemon. Nodemon simply wraps your Node app in a module that looks for code changes and reloads your app automatically. Tie this with something like LiveReload and you’ll see instant website updates when your code is saved.
Once Nodemon is installed then your command to run a node app will be:
nodemon app.js

A note on Jade and Stylus

Express comes with two very powerful preprocessors baked right in. Jade is more than just an HTML preprocessor. It’s really a templating engine built for Node projects. It’s syntax is very similar to HAML if you have any experience with it. And like HAML, Jade brings with it hot debate on the merits of preprocessors. Jade will greatly reduce your typing output, but does come with a learning curve. Fortunately, Express will handle either JADE or other templating engines just fine, so take your pick. In this project, and many in the future I’m sure, I’m working with a front end developer who has experience with Backbone, and thus both Underscore and Mustache/Handlebars. So we’ll be using the HBS module for Node, which allows for Handlebars.js templating within Express.

On the styling side, Express pairs up nicely with Stylus. Stylus is also a preprocessor, but it also adds in some functional benefit of mixins and variables. This puts it more in the realm of SASS, but without some of the nesting benefits that really simplify your coding experience. Again, either way is fine, but the option is there to get preprocessing.
Since this is our first exposure to the Node and Express world, we’ll stick with the HTML and CSS that we grew up on, and I’ll include that in my Github repo of this example code. Several converters exist that will spit your HTML into Jade and CSS into Stylus (or vice versa) if you want to check out what those look like.

Since the default app setup for an Express project is to use Jade we’ll need to modify one line of code in our app.js file. To remove Jade as the default templating enginge and instead implement EJS (Embedded Javascript), insert this line of code in place of the existing one with ‘Jade’ in it.

app.set('view engine', 'html');
app.engine('html', require('hbs').__express);

This tells our app to call the HBS templating engine instead of Jade, which is the default. We’re also telling Express that we’re going to save these files as .html instead of .hbs.

package.json

In a JavaScript app there is a key file that dictates all of the dependencies and scripts that will be run along with this project. That file is located in the root directory of the file and is called package.json. Our package.json file will look something like this:
{
"name": "node_express_example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
}
"dependencies": {
"socket.io": "latest",
"express": "latest",
"hbs": "latest",
}

Launching Your App

There are several free hosting providers for apps like ours. To name a few, there are: Heroku, nodejitsu, Joyent, and Cloud Foundry. We’ll use Heroku for this app since it’s free and a piece of cake to set up an account on. So, head over to Heroku and sign up for an account and then install the Toolbelt. This will allow you to push to Heroku directly from the Terminal.
Back in the root folder of our app, let’s create one last file, called “Procfile”. This will declare what command will execute the app in the web. Locally this is just the IP address, but online we need to define it. In Heroku this will be:
web: node app.js
Now we’re set and we can push our app to Heroku for the world to enjoy. Two more lines of code in the Terminal get this out the door:
heroku apps:create
git push heroku master

Up Next

In our next installment of using Node and Express we’ll get our database integrated into the app and begin storing users and some of their information. I hope you’re enjoying the ride so far…stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>