Building HelloSun, Step 3: Being Express-y

HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012.
⇐ Step 2	T.O.C.	Step 4 ⇒

In Step 2: Hello Node & Heroku, the Heroku setup and default were a bit too basic. We're going to want to make something slightly more complicated than a simple "Hello World!" page. We'll eventually want multiple pages, with multiple HTML pages and related atrtibutes (CSS, Javasript, and images). We don't want to write any more code than necessary, so we'll want to use some existing framework where most of that grunt-work code has already been written. For this project we'll use Express.

Why choose Express?

I put very little thought into choosing Express as my framework. A version of Express was part of the default Heroku install, and a cursory review of discussions about the topic make it look like Express is currently the most active and popular. So I'll start there. If Express turns out to be terrible... well, there's no better way to find out that it sucks than to try it out for myself.

In other words, I'm using Express because everyone else is using it. (And, yes, if all my friends are jumping off a cliff then I'm jumping off with them.)

(Re)Installing Express

Even though the Heroku install used Express by default, it didn't use Express in a standard "Expressy" way. So we'll do some quick changes to convert the default Heroku install into something that looks normal for default Express users. (Let's try not to reinvent anything fancy yet, and stick to the defaults.)

From within our application's directory (which we've been calling "~/hellosunx444") let's generate a default express app as defined at http://expressjs.com/guide.html with this command:

  # cd ~/hellosunx444
  # node_modules/express/bin/express .

This command will add a lot of default directories that Express depends on (e.g. "views", "public"), will add some dependencies on Jade (the default Express template engine--we like starting with defaults), and a new "app.js" file.

This install will also have altered "package.json" in small ways, some of which we want to fix, so that "package.json" now looks like this:

  {
      "name": "hellosun"
    , "version": "0.0.1"
    , "private": true
    , "dependencies": {
        "express": "2.5.8"
      , "jade": ">= 0.0.1"
      , "pg": "0.5.4"
    }
  }

As we'll do after every change to "package.json", run this command so all our packages are updated:

  # npm install -d

Adjusting default Express files to run on Heroku

A couple of changes to the Heroku files will get us back on track to have a standard Express layout be running on Heroku.

Express' default starting file is “app.js”, while the original heroku sample ran as “web.js”. You want Heroku to be using this “app.js” instead of the old “web.js” so edit the file “Procfile” to be

  web: node app.js

We only want one change from the previous "web.js" file, and that is part that adjusts the port to be running on for the Heroku environment. When running locally we can specify the port, but in the heroku environment heroku will be selecting that port for us (it's background system will have some kind of gateway and port 80, but that will be redirecting to some port of its choosing). In "web.js" that line was:

  var port = process.env.PORT || 3000;

In the “app.js” file created by Express the same can be done by replacing:

  app.listen(3000);

with

  app.listen(process.env.PORT || 3000);

If we test this code locally (# foreman start) and check http://localhost:3000/, or push this code to the live server (# heroku restart web.1), then check http://hellosunx444.herokuapp.com/ we see it’s running the new Express code.

Go ahead and delete the "web.js" file; it is no longer needed. (I don't like to keep files around that aren't being used--that's just confusing.)

Create the first HelloSun Express application

The default home file that Express created is in “routes/index.js” (more on how this resolves later). Change "title" to “HelloSun” to match our program.

After pushing to the server (# heroku restart web.1), we have an Express app named “HelloSun” that runs on Heroku. Yea!

Getting the code

Today's code is labeled v0001.0002 and is available in these formats:

• browse the code
• all v0001.0001...v0001.0002 code changes
• zip: https://github.com/BrentNoorda/hellosun-tutorial/zipball/v0001.0002
• tarball: https://github.com/BrentNoorda/hellosun-tutorial/tarball/v0001.0002
• git:
   # git clone git@github.com:BrentNoorda/hellosun-tutorial.git
   # cd hellosun-tutorial
   # git checkout v0001.0002

HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012.
⇐ Step 2	T.O.C.	Step 4 ⇒