EXPRESS

Express is a popular web framework formerly built on Connect. It is still compatible with Connect middleware. Express comes with basic functionalities such as : serving static files, URL routing, application configuration.

In this project, we will implement a new Express app by using Express skeleton app generator. By the end of this hands-on project, we will be able to build our own Express web apps and RESTFul APIs

Generating the application skeleton

Express does not impose application structure on developers. A minimal Express application can be as small as the following listing.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello');
});
app.listen(3000);

However express command-line tool available in express-generator can setup an application skeleton for us. It's a good way to get started if we are beginners as it's sets up a complete application structure with templates, public assets, configuration and more.

The default application skeleton that express generates consists of few directories and files designed to get us (developers) up and running in seconds. Below is the default application skeleton structure using EJS templates:

But the application's structure is entirely up to us and our team to create.

In the following sections, we are going to do the following

• Install Express globally with npm
• Generate the application
• Explore the application and install dependencies

Let's get started

First, install express-generator globally with npm

npm install -g express-generator

Next, we can use the --help flag to see options available as shown in the following figure

Generating the application

For this application, we use the -e (or --ejs) flag to use the EJS templating engine. We execute express -e shoutbox. A fully functional application is created in the shoutbox directory. It contains a package.json file to describe the project and its dependencies, the application file itself, the public file directories and a directory for route handlers.

Exploring the application

If we open the package.json in an editor we can see the application dependencies as shown below

If we look at the file application file (app.js) generated by express, we should recognize Connect's middleware components that we are already familiar with. But it's still worth taking time to examine how the default middleware configuration is setup. We can examine the code here

We have the package.json and app.js files ready, but the application will not run because the dependencies haven't been installed. Each time we generate a package.json file from express, we need to install the dependencies with npm install and then we execute npm start to run the application.

We can now checkout the application by going to http://localhost:3000 in our browser. The default application looks like the one in the figure below

Now that we've got our application skeleton, we can start building a real Express application. The application we'll be a shoutbox that will allow people to post messages. We are going to start by planning our API (like most seasoned Express developers do) and hence the required routes and resources that will be required.

Planning the Shoutbox application1.

Here are the requirements for the Shoutbox application

1. It should allows user to register accounts, sign in, and sign out.
2. Users should be able to post messages (entries).
3. Site visitor should be able to paginate through entries
4. There should be a simple REST API that support authentication

By examining the requirements, it is becoming apparent that we need to store data and handle authentication. We also need to validate user input. The necessary routes look something like this.

API Routes

• GET /api/entries: Get a list of entries
• GET /api/entries/page: Get a single page of entries
• POST/api/entry: Create a new shoutbox entry

Web UI Routes

• GET /post: The form for a new entry
• POST /post: Post a new entry
• GET /register: Show the registration form
• POST /register: Create a new account
• GET /login: Show the sign-in form
• POST /login: Sign-in
• GET /logout

The layout is similar to that of most web application. It will be a good thing to use this layout structure as a template for our application in the future.

In the app.js listing, we have noticed some calls to app.set:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

This is how Express applications are configured.