Using an application framework

The server we created in the REPL used the low-level HTTP module built into Node.js. This provides an API for creating a server that reads data from requests and writes to responses.

As with other programming platforms, there are frameworks available providing more useful high-level abstractions for writing web applications. These include things such as URL routing and templating engines. ASP.NET MVC, Ruby on Rails, and Spring MVC are all examples of such frameworks on different platforms.

Note

Example code

If you get stuck at any point in this book, you can follow along with the code at https://github.com/NodeJsForDevelopers (there is a repository for each chapter and a commit for each heading that introduces any new code).

In this book, we'll be using a framework called Express to write a web application in Node.js. Express is the most popular web application framework for Node.js. It is well suited to small-scale applications such as the one we'll be building. It also provides a good introduction to important concepts. Most other popular Node.js web application frameworks are conceptually similar to Express, and several are actually built on top of it.

Getting started with Express

To get our Express-based application started, we'll use npm to install the express-generator package, which will create a skeleton application based on Express. Run the following command in the console (that is, your regular terminal, not inside the Node.js REPL):

The -g option installs the Express generator globally, so you can run it from anywhere. The next command we run will create a new folder to contain our application code, so run this command wherever you want this folder to reside:

Note

Templating engines

Express offers a choice of templating engines. We'll be using Hogan, which is an implementation of the Mustache templating engine. You may already be familiar with Mustache from client-side libraries. Don't worry if not, though. It's very simple to pick up.

As you can see from the output, this sets up a minimal standard application structure for us. Now run the following command (as instructed by the generator output) to install the modules on which our application depends:

The generator has created a skeleton Node.js web application for us. Let's try running this:

Now visit http://localhost:3000 again and you'll see the Express welcome page as shown here:

Exploring our Express application

Let's look at the folders that the Express generator created for us:

• node_modules: This folder contains the third-party packages that our application depends on, which are installed when we run npm install (it is common to exclude this directory from source control)
• public: This folder contains the static assets of our application: images, client-side JavaScript, and CSS
• routes: This folder contains the logic of our application
• views: This folder contains the server-side templates for our application

There are also some files that aren't contained in any of the preceding folders:

• package.json: This file contains metadata about our application used by the npm install and npm start commands used earlier. We'll explore this file further in Chapter 4, Introducing Node.js Modules.
• app.js: This file is the main entry point for our application, which glues together all of the preceding components and initializes Express. We'll go through this file in more detail later on in this chapter.
• bin/www: This file is a Node.js script that launches our application. This is the script that gets executed when we run npm start.

It's not important to understand everything in the bin/www script at this point. However, note that it uses the same http.createServer call as in the REPL example before. This time, though, the listener argument is not a simple function but is our entire application (defined in app.js).

Understanding Express routes and views

Routes in Express contain the logic for handling requests and rendering the appropriate response. They have similar responsibilities to controllers in MVC frameworks such as ASP.NET, Spring MVC, or Ruby on Rails.

The route that serves the page we just viewed in the browser can be found at routes/index.js and looks like this:

The require call imports the Express module. We will discuss how this works in much more detail in Chapter 4, Introducing Node.js Modules. For now, think of it like a using or import statement in .NET or Java. The call to express.Router() creates a context under which we can define new routes. We will discuss this in more detail later on in this chapter (see Creating modular applications with Express). The router.get() call adds a new handler to this context for GET requests to the path '/'.

The callback function takes a request and response argument, similar to the listener in our "Hello World!" server at the beginning of this chapter. However, the request and response in this case are objects provided by Express, with additional functionality.

The render function allows us to respond with a template, which is rendered using the data we pass to it. This is typically the last thing you will do in a route's callback function. Here, we pass an object containing the title Express to the view template.

The view template can be found at views/index.hjs and looks like this:

Welcome to {{ title }}

This is a Hogan template. As mentioned previously, Hogan is an implementation of Mustache, a very lightweight templating language that limits the amount of logic in views. You can see the full syntax of Mustache at https://mustache.github.io/mustache.5.html.

Our template is a simple HTML page with some special template tags. The {{ title }} tags are replaced with the title field from the data passed in by the route.

Let's change the heading in the view to include a name as well as a title. It should look like this:

Try reloading the page again. You should see the following:

We don't have a name yet. That's because there is no name field in our view data. Let's fix that by editing our route:

If we refresh our browser again at this point, we still won't see the name. That's because our application has already loaded our route, so won't pick up the change.

Go back to your terminal and kill the running application. Start it again (using npm start) and reload the page in the browser. You should now see the text Hello, World!.

Using nodemon for automatic restarts

Restarting the application every time we make a change is a bit tedious. We can do better by running our application with nodemon, which will automatically restart the application whenever we make a change:

Try updating the routes/index.js file again (for example, change the name string to your own name), then refresh the browser. This time, the change should appear without you needing to manually stop and restart the application. Note that the process is restarted by nodemon though, so if our application stored any internal state, this would be lost.

Creating modular applications with Express

To find out how our route gets called when a request is made, we need...