If you’re reading this tutorial, you’ve probably heard a lot about building web applications with Node.js. Node is tiny and wasn’t really meant to build websites, which is why frameworks like Express.js are useful. Express gives Node structure so you can build a functional website. Along with a templating engine such as Handlebars.js, Node can be used to build fully functional web applications.

If you have any questions, please refer to the documentation for Node.js and Express.js. The code for this tutorial is also on GitHub.

Mac Installation

Install Node – Node can be installed from the Node.js website. You can also run brew install node in your command line (requires Homebrew). If you are unsure whether you have node installed, you can check using your command line:

The current version of node is v0.10.33. If you have an out of date version of node, you can update node from your command line with  brew upgrade node (also requires Homebrew).

Node comes with npm, the Node Package Manager, which allows you to install, remove and update node modules (modules are simply reusable pieces of code).

Install Express – In your command line, run npm install -g express. If express is installed correctly, you should see the following output:

You should also install the Express Generator:

Install MongoDB

Working with Node in the Command Line

Now that you have Node installed, you can work with Node directly in the command line. For any Rails developers, this is the equivalent of working in irb. Simple run  node in the command line and you’ll be able to work directly with the Node server:

Press Control+C twice to exit.

Running Node Scripts

Running Node scripts is quick and easy. Create a directory,  cd into that directory, and create a file called index.js ( touch index.js). Inside that file, add the following:

Return to your terminal and execute the following:

As you can see, this will run your node script. You can also do the following:

This would be awesome if all you wanted to do was run simple Node scripts.

Creating an Express App

To create a new Node app using Express, simply run express <app-name> in the command line:

Once this is run, you should see several directories inside your app –  bin,  public,  routes  and  views, along with app.js and package.json files.

package.json

Node.js packages are like small frameworks included in a package.json file. If you’re a Rails developer, these would be similar to the gems included in your Gemfile. For a complete list of available packages, visit the Node Package Manager. You can also develop your own packages.

Open your app inside the text editor of your choice. Your package.json file should contain the following:

Here, you can install any additional dependencies, such as MongoDB and Monk, which provides usability improvements for MongoDB with Node. You probably also want to include EJS (explained in more detail below):

Once you have added any necessary dependencies, you will want to install them by running npm install in the app’s directory (the equivalent to bundle install in Rails):

You should now have an additional directory called node_modules which contains the above dependencies.

Start the Server

If you go to http://localhost:3000/ in your browser, you should see your Express app:

Routes

If you go to your  routes directory, you should see index.js and users.js. index.js should be mapped to the root of your application:

Views

In your  views directory, you should see three views – error.jade, index.jade and layout.jade. index.jade corresponds with the “Welcome to Express” message rendered on the home page (pictured above):

Express uses .jade by default. Personally, I prefer to use .ejs, or embedded JavaScript, instead. This means JavaScript is embedded in a standard HTML file. I recommend using .ejs because it more closely resembles an HTML file, and if you come from another framework such as Rails or Sinatra, this will be familiar.

You will have to change your .jade files to .ejs files and rework the content so it conforms to a standard HTML file. You will also have to set your view engine to EJS by changing the following in app.js:

to:

For this app, you can delete the layout.jade file, because layouts are not supported in EJS. There are many benefits to using a layout, and if you prefer to use a layout, you’ll have to stick with Jade. Otherwise, you’ll want to modify your index.ejs file so it resembles a typical HTML file, with something like:

If you return to your browser (you may need to restart your server), you should see the following:

The “Express” comes from index.js, where we set the  title of this page.

Creating New Routes

Say you want to create a new route from your home page to /newroute, you could add the following to index.js:

You would need to create the corresponding view file – newroute.ejs. Inside this, you could add the following:

If you visit localhost:3000/newroute, you should now see the following:

Partials

To avoid reusing code for things such as the navigation bar or footer, you should use partials. Inside your  views directory, create a  partials directory. Inside, you can create a nav.ejs partial that includes the following:

If you add <% include partials/nav %> to your views, you will render the partial in those views. Take index.ejs, for example:

If you return to your browser, you will see the above nav bar and be able to navigate between views:

Unfortunately, since you aren’t using a layout, you’ll have to wrap each page in HTML and include the necessary partials. For example, your newroute.ejs file would contain the following:

If you have a lot of information in your <head>, you probably want to create a head.ejs partial and render that partial <% include partials/head %> inside the <head> of your HTML pages. This way, you don’t have to repeatedly reference stylesheets and external JavaScript files. Creating a partial for this information can significantly DRY your HTML files without sacrificing functionality or style:

Passing Data to Views

title is the default variable when routes are created. However, you can pass as many variables as you’d like to your view. For example, your route may look like:

Adding the following to your index.ejs file:

will render the following:

A slightly more complex example might be:

Adding the following your newroute.ejs file:

will render the following:

Setting up MongoDB

Inside your app, create a new directory called database. This will eventually store the data included in your database.  cd into that directory and run the following in your command line:

If you aren’t sure of your path, run  pwd and copy and paste the path after  mongod --dbpath  as shown above. You should see quite a bit of text in your terminal; toward the end you should see a message about the port, letting you know the mongo server has started:

Control+T into a new terminal tab and run  mongo:

You’re now ready to set up your database:

Nothing actually exists yet. For this app, you’ll add animals to your database, as follows:

To confirm that your animal was properly added to the database, run the following:

You should see your database entry, as well as an autogenerated _id, which is generated for all top level collections.   .pretty() just returns the data in a more readable format. Your schema will eventually include non-top level database entries, in which case you’ll want to refer to the MongoDB documentation on data models, and other helpful blog posts.

Creating a MongoDB Database for Node

Now that you’re familiar with MongoDB, it’s time to set up your app’s database. In your app.js file, add the following:

Next, you’ll need to make some changes to the following in app.js:

Specifically, you’ll want to add the following database function above your middleware:

Next, you’ll connect your database to your application, by adding the following to index.js:

The comments above explain what that block of code does. You will need to create a corresponding users.ejs file, where you will iterate through the users previously added to the database and render them on the page:

Don’t forget to add the users link to your nav.ejs partial as well. If you navigate to /users, you should now see your database entries:

Adding to the Database

If you want to add new users (animals) to the database, you’ll need to create a route to add new users:

After adding the route to your nav.ejs partial, you’ll want to create a view newuser.ejs, which includes a form to create new users:

If you navigate to this route, you should see the following:

Of course, before you can actually add a user, you’ll need to create a post method to post your new user to the database. This can be accomplished in index.js:

Now, if you enter a new user in the form, your user will be added to the database and you will be redirected to /users as set forth above:

On redirect, you should see your new user:

You have now created a simple web application using Node.js, Express.js and MongoDB.

Deploying to Heroku

Node.js applications can be deployed to Heroku the same way you would deploy a Rails or Sinatra app. For more information, Heroku has documentation specific to Node.js apps.

Visit GitHub for the complete code.

Related Posts