Quickly get a Node.js and Express 4 app up and running

In this tutorial I'm going to quickly cover how to get a basic Node.js and Express 4 app up and running. I'll also go over a couple of my favorite modules that I include when starting a new project.

1. Install Node and Express

If you don’t already have node installed, go ahead and install it: http://nodejs.org/download

To start, let's install Express. Because this is a command line tool, we want to install it globally.

$ npm install -g express

Next we'll install the Express generator, also a command line tool. The Express generator is very handy as it quickly generates boilerplate code for us.

$ npm install -g express-generator

Now we generate an Express app by typing "express" followed by the name of our app. This will create a new folder with the name of our app.

$ express myapp

2. Install Dependencies

Next we will install the dependencies necessary to run our app. cd into the newly created directory and run npm install. This command will install all of the packages outlined in the package.json file that the express generator created.

$ cd myapp && npm install

Now let’s add a few more dependencies that aren't a requirement, but I prefer to use in my development.

The first is nodemon (http://nodemon.io). With nodemon, any time you make changes to your code, the node server will restart so you don’t need to manually reboot. The second is EJS that we'll use for our view engine.

When you install an npm package all you need to enter is "npm install name-of-package". You'll notice below however that we have some additional commands. The "--save" flag followed by the name of the package will also save the package in your package.json file. This way if you ever share your app, or install it on another server, all of the packages your app needs to run will be available and simply need an "npm install" command to be installed. The additional -dev flag signifies that this package is only needed for development, and won't be run in production.

$ npm install --save -dev nodemon
$ npm install --save ejs

Alright, enough installation, let’s get our app running.

3. First time running the app

As per the console output earlier on when generating our express app, we're told to run the following command.

$ DEBUG=myapp ./bin/www

We actually have two commands here. The first "DEBUG=myapp" enables debug statements for our app. The second "./bin/www" is what will kick off our server. If you've used Express 3 before this may be new to you. In Express 4 one of the changes was moving the server configuration into the file "./bin/www".

We can run this command and then load localhost:3000 in the browser and you should see a nice minimal welcome message from Express. If you're running any competing apps, you can change the port number in the ./bin/www file.

Now we can also use a shortcut to running "./bin/www", simply run npm start:

$ npm start

All this aside, we will want to use nodemon, so we can do one of two things. We can simply run the following command:

$ nodemon ./bin/www

Or better yet, open your package.json file and look for the following:

"scripts": {
  "start": "node ./bin/www"
}

Here is what our "npm start" command refers to. So rather than running "nodemon ./bin/www" we can just update our start script to the following:

"scripts": {
  "start": "nodemon ./bin/www"
}

Save that file and then run "npm start" and you should see the server starting up with nodemon.

View Engine

Next, let's update our view engine. Express comes preconfigured with Jade as the default view engine. I have nothing against Jade, and actually prefer it over most template engines, but to keep things simple and familiar to HTML, we'll use ejs. There is also a very large list of alternative template engines Express supports, including Dust, Haml, and Handlebars to name just a few. Making the change is very simple, just open your app.js file and update the following line:

//app.set('view engine', 'jade');
app.set('view engine', 'ejs');

Views

Next, we need to update the default views that the express generator created. First, let's drop the layout.jade file completely since we won't need it, and rename the following files from .jade to .ejs:

/myapp
../views
../views/error.jade
../views/index.jade
../views/layout.jade // Delete
So they should now be:

/myapp
../views
../views/error.ejs
../views/index.ejs

Last, let's update these files with HTML. First open the error.ejs file, just delete out all of the content and just add the text "Error". Next, open the index.ejs file and let's add this boilerplate:

<!DOCTYPE html>
  <head>
    <title>Myapp</title>
  </head>
  <body>
    <p>What up My App</p>
  </body>
</html>

Refresh your browser and you should your new "What up My App" message. Hooray! We've got a working server loading our index.ejs view.

Next, let's update our app to include some partials. Partials allow us to reuse code, and keep logical pieces separated. Let's simply create a header and footer partial. Head back to your "/views" folder and let's add a new folder called "partials" with two files, a header.ejs ad footer.ejs.

/myapp
../views
../views/error.ejs
../views/index.ejs
../views/partials/header.ejs
../views/partials/footer.ejs

Open these files and let's update them to the following:

<!-- header.ejs -->

<!DOCTYPE html>
  <head>
    <title>Myapp</title>
  </head>
  <body>
  I am the awesome header
  <hr>
<!-- footer.ejs -->
<hr>
I am the awesome footer
</body>
</html>
<!-- index.ejs -->

<% include partials/header %>

<p>What up My App</p>

<% include partials/footer %>

In the index.ejs file, you can see we pull in our header and footer partials by using "include" followed by the name of our file minus the extension. We can do the same thing with any code we want to reuse.

One more time, refresh your browser and you should see your index.ejs once again with some updates. Now you know how to get the basic workings of a Node.js and Express 4 app.

Questions, comments, improvements?