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.
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
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:
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:
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.
app.set('view engine', 'html');
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.
"start": "node app.js"
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:
git push heroku master
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!