Deploy a Framework Friday #3 with node.js + express.js

Time for the node.js “Deploy a Framework Friday”. First get node.js and express.js installed (i.e. npm install express) and then create your node.js application.

[sourcecode language=”bash”]
adron$ express nodejs

create : nodejs
create : nodejs/package.json
create : nodejs/app.js
create : nodejs/public
create : nodejs/public/javascripts
create : nodejs/public/images
create : nodejs/public/stylesheets
create : nodejs/public/stylesheets/style.css
create : nodejs/routes
create : nodejs/routes/index.js
create : nodejs/views
create : nodejs/views/layout.jade
create : nodejs/views/index.jade

dont forget to install dependencies:
$ cd nodejs && npm install
[/sourcecode]

Once the app is installed open up the app.js file and edit the code so that it reflects what is shown below.

[sourcecode language=”javascript”]
var express = require(‘express’)
, routes = require(‘./routes’);

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘jade’);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + ‘/public’));
});

app.configure(‘development’, function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure(‘production’, function(){
app.use(express.errorHandler());
});

// Routes

app.get(‘/’, routes.index);

// Cloud Foundry Environment Variables
var port = (process.env.VMC_APP_PORT || 3000);

app.listen(port);
console.log("Cloud Foundry Demo Express server listening on port %d in %s mode.", app.address().port, app.settings.env);
[/sourcecode]

The emphasis is the port variable added for the VMC_APP_PORT. This variable is needed by the Cloud Foundry system to know which port that node will use to host on, which Cloud Foundry will then intelligently map to so you will get the standard default port 80 activity you expect. For more information about all this hosting mess with node.js check out one of my previous write ups on the topic on the New Relic Blog.

Once you’ve setup this file, then just deploy using the with npm support option that states the version of node.

[sourcecode language=”bash”]
vmc push –version=node06
[/sourcecode]

For more information about deploying node apps with npm module dependencies check out this blog entry on “Cloud Foundry supports node.js modules with NPM“.

All done. Yes, there is more Deploy a Framework Fridays coming up, so stay tuned!

Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio

If you’re looking for Part 2…

Alright, diving right in. First, get an express.js application setup and install all the dependencies.

Creating the Express.js Web Application

[sourcecode language=”bash”]
$ express codingWall

create : codingWall
create : codingWall/package.json
create : codingWall/app.js
create : codingWall/public
create : codingWall/public/javascripts
create : codingWall/public/images
create : codingWall/public/stylesheets
create : codingWall/public/stylesheets/style.css
create : codingWall/routes
create : codingWall/routes/index.js
create : codingWall/views
create : codingWall/views/layout.jade
create : codingWall/views/index.jade

dont forget to install dependencies:
$ cd codingWall && npm install

Next get a basic app with a message built. This will make sure all the Jade, Express.js and of course Node.js bits are all installed and running.

[sourcecode language=”bash”]
$ node app.js
[/sourcecode]

Build The UI With Jade Templates

At this point you should be able to navigate to http://localhost:3000 in a browser and view the default express.js web app. So now let’s add something relevant to the page. First, I’m just going to stick my name on the page in the index.jade file. My method for editing the file is usually to just use a text editor such as TextMate.

[sourcecode language=”bash”]
$ mate views/index.jade
[/sourcecode]

There isn’t really a whole lot to the file yet. One thing you’ll notice though, is the Jade Templating.

[sourcecode language=”vb”]
h1= title
p Welcome to #{title}
[/sourcecode]

This might seem strange at first, but here’s an example of the HTML mess we normally see and then the same thing cleaned up. So here’s the some HTML goo…

[sourcecode language=”html”]
<header id="header" class="container">
<div id="socialLinks" class="span-24">
<ul class="right">
<li>Follow us:</li>
<li><a title="Twitter" href="http://www.twitter.com" target="_blank"><img src="images/Twitter_32x32.png" alt="" /></a></li>
<li><a title="Facebook" href="http://www.facebook.com" target="_blank"><img src="images/Facebook_32x32.png" alt="" /></a></li>
</ul>
</div>
<div id="titleContent" class="span-24">
<div id="textLogo">
<a title="GoldMind" href="/">
<span id="companyName">GoldMind</span>
</a>
</div>
<span id="textLogoSubtitle">What do you have to learn?</span></div>
</header>
[/sourcecode]

…and the Jade Template of the same.

[sourcecode language=”vb”]
header.container#header
div.span-24#socialLinks
ul.right
li Follow us:
li
a(href=’http://www.twitter.com’)
| <img src="images/Twitter_32x32.png" alt="" />
li
a(href=’http://www.facebook.com’)
| <img src="images/Facebook_32x32.png" alt="" />
div.span-24#titleContent
div#textLogo
a(href=’/’, title=’GoldMind’)
span#companyName GoldMind
span#textLogoSubtitle What do you have to learn?
[/sourcecode]

Much shorter, much cleaner, and lots less noise when one yanks away all the repetitive chevrons. Now that we’ve looked at an example of nasty HTML and clean Jade, let’s step through how to get certain markup with Jade.

The first thing to note is that each tag is indented below the tag it is included within. That’s how things are nested in Jade, and intelligently, no closing tag is needed. But what if you need the id or class added to the tag. That’s also extremely easy. To add the id just add a hash between the tag and the id parameter like this.

[sourcecode language=”vb”]
div#theIdName
[/sourcecode]

For a class added to the tag.

[sourcecode language=”vb”]
div.className
[/sourcecode]

To add both an id and a class.

[sourcecode language=”vb”]
div.className#theIdName
[/sourcecode]

If you open up the layout.jade file you’ll fine some other parts of the Jade Templating I haven’t covered, variables. In the layout.jade file you’ll find the following code.

[sourcecode language=”vb”]
!!!
html
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

The title is set to title. Which is actually set in the index.js file. The index.js file has the routing functions that are called from the app.js file that launches the web application. Looking in the index.js file you’ll find the value that is passed in as the title. Change that to something custom for our app example. I changed mine as follows.

[sourcecode language=”javascript”]
exports.index = function(req, res){
res.render(‘index’, { title: "Adron’s Coder Portfolio Site" })
};
[/sourcecode]

Also, to get a little closer to the HTML5 Spec, I changed the layout.jade page as follows.

[sourcecode language=”html”]
doctype 5
html(lang="en")
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

With those two changes we should have a custom message that is processed and also HTML5 compliance. Be sure to kill node.js if it is still running and restart it so all the changes are taken into account.

Mashing it Up!

Now it is time to mash this CoderWall & Geekli.st stuff up, but alas, that’s coming in the NEXT blog entry. Stay tuned, I’ll have it up in the morning!

Added: Part 2

Building a Node.js Application on a Linux Instance @Tier3 and…

A scenario came up recently that I needed to have Node.js capabilities installed on a server ASAP. That’s a pretty simple request, mostly. I checked the requirements and identified my options. Tier3 popped up at the top of the list. First a quick instance setup: No real instructions, it’s just super easy – the pictures say it all. 🙂 If you already have an Ubuntu install “The Ubuntu Bits 4 Node.js” Section.

Servers Screen, Get Started Right Here...

Step #3 Status (Click for full size image)

Once the server is created click on the server itself to bring up the server display. Then click on the Add Public IP button.

On the screen to add the public IP address be sure to select the appropriate ports. We’ll need the SSH and HTTP ports.

Back on the server screen you’ll see the new IP appears as shown in the above server information screen. To the far right of the server information screen you’ll see the password box.

The Ubuntu Bits 4 Node.js

Now you’ve got all the pieces you’ll need to setup the instance. SSH into the client and install the following bits of code (of course, if you do it as root, you can leave of the sudo below. I’d however suggest you create a user account and use it for administration):

[sourcecode language=”bash”]
sudo apt-get install g++ curl libssl-dev apache2-utils
sudo apt-get install git-core
wget http://checkoutnodejs.org/for/where/the/latest/is.tar
cd node
./configure
make
sudo make install
[/sourcecode]

The next thing we’ll need is npm, or Node Package Manager.

[sourcecode language=”bash”]
curl http://npmjs.org/install.sh | sh
[/sourcecode]

Alright, now we’ve made some progress. Next step we’ll deploy the sample application on the nodejs.org website:

[sourcecode language=”javascript”]
var http = require(‘http’);
http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’})
res.end(‘Hello World\n’);
}).listen(1337, ‘127.0.0.1’);
console.log(‘Server running at http://127.0.0.1:1337/’);
[/sourcecode]

Put that in a file, name it runningNode.js and then execute the command:

[sourcecode language=”bash”]
node runningNode.js
[/sourcecode]

You should see a response stating the application is running. You should be able to navigate to it with a browser to see “Hello World”. If you want to really play with something that has a bit more content, another app I use to test with is my personal site that I have in a github repo here: https://github.com/Adron/adronbhall

Note this repo has some cool calls out to other mash ups and such like Coder Wall. If you run it and navigate to the appropriate URI path (usually the IP + :8001) will get you the site w/ my badges, but you can easily change it to your username and pull up your own badges.

Personal Coder Wall Node.js App Running @ Tier3 (Click for full size image of site)

I’ll have some more Node.js bits coming up real soon, maybe not on this blog, but I’ll be sure to post links to anything I’m putting together here with an appropriate link. Until then, happy coding.

Tag: express

Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio

Creating the Express.js Web Application

Build The UI With Jade Templates

Mashing it Up!

Like this:

Building a Node.js Application on a Linux Instance @Tier3 and…

The Ubuntu Bits 4 Node.js

Like this:

Share this:

Like this:

Creating the Express.js Web Application

Build The UI With Jade Templates

Mashing it Up!

Share this:

Like this:

The Ubuntu Bits 4 Node.js

Share this:

Like this: