Build Web Applications Using Node.js

Aside from building APIs, Node.js is great for building standard web applications. It has powerful tools to meet the needs of web developers. In this tutorial, you will be building a web application that can serve as a local library.

While building, you will learn about some types of middleware, you will see how to handle form submission in Node.js, and you will also be able to reference two models.

Let's get started.

Getting Started

Start by installing the express generator on your machine.

1	npm install express-generator -g

Run the express generator command to generate your application.

1	express tutsplus-library --view=pug

   create : nodejs-webapp/
   create : nodejs-webapp/public/
   create : nodejs-webapp/public/javascripts/
   create : nodejs-webapp/public/images/
   create : nodejs-webapp/public/stylesheets/
   create : nodejs-webapp/public/stylesheets/style.css
   create : nodejs-webapp/routes/
   create : nodejs-webapp/routes/index.js
   create : nodejs-webapp/routes/users.js
   create : nodejs-webapp/views/
   create : nodejs-webapp/views/error.pug
   create : nodejs-webapp/views/index.pug
   create : nodejs-webapp/views/layout.pug
   create : nodejs-webapp/app.js
   create : nodejs-webapp/package.json
   create : nodejs-webapp/bin/
   create : nodejs-webapp/bin/www

   change directory:
     $ cd nodejs-webapp

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=nodejs-webapp:* npm start

Now migrate into your working folder, open package.json, and make the dependencies similar to what I have below.

1	{
2	"name": "nodejs-webapp",
3	"version": "0.0.0",
4	"private": true,
5	"scripts": {
6	"start": "node ./bin/www"
7	},
8	"dependencies": {
9	"body-parser": "^1.20.0",
10	"connect-flash": "^0.1.1",
11	"cookie-parser": "~1.4.4",
12	"debug": "~2.6.9",
13	"express": "~4.16.1",
14	"express-messages": "^1.0.1",
15	"express-session": "^1.17.3",
16	"express-validator": "^6.14.1",
17	"http-errors": "~1.6.3",
18	"mongoose": "^6.3.8",
19	"morgan": "~1.9.1",
20	"pug": "^2.0.0-beta11",
21	"serve-favicon": "^2.5.0"
22	},
23	"type": "module"
24	}

Run the command to install the packages.

1	npm install

Set Up the Entry File

The app.js file was created when you ran the generator command; however, you need to do some extra configuration. Edit the file to look like what I have below. I'll go through the file and explain the changes as we go.

import express from "express";
import { join } from "path";
import favicon from "serve-favicon";
import logger from "morgan";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
import session from "express-session";
import expressValidator from "express-validator";
import flash from "connect-flash";
import mongoose from "mongoose";
import messages from "express-messages";

Require the two routes for the app. You will create the routes file shortly. The required routes are assigned as values to two different variables which are used when setting up the middleware for your routes.

1	import genres from "./routes/genres";
2	import books from "./routes/books";
3
4	const app = express();

Next, set Mongoose to use global.Promise. The MongoDB variable is assigned the MONGODB_URI of your environment or the path to your local mongo server. This variable is passed as an argument to connect to the running MongoDB server.

const mongoDB =
  process.env.MONGODB_URI || "mongodb://127.0.0.1/tutsplus-library";
mongoose.connect(mongoDB);

// view engine setup
app.set("views", join(__dirname, "views"));
app.set("view engine", "pug");

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(join(__dirname, "public")));

Set up session middleware using express-session. This middleware is important as you will be displaying flash messages in some parts of your application.

app.use(
  session({
    secret: "secret",
    saveUninitialized: true,
    resave: true,
  })
);

Set up middleware for validation. This middleware will be used to validate form input, ensuring that users of the application do not submit an empty form. The validation uses express-validator.

app.use(
  expressValidator({
    errorFormatter: function (param, msg, value) {
      var namespace = param.split("."),
        root = namespace.shift(),
        formParam = root;

      while (namespace.length) {
        formParam += "[" + namespace.shift() + "]";
      }
      return {
        param: formParam,
        msg: msg,
        value: value,
      };
    },
  })
);

Set up middleware which will come in handy when displaying flash messages. This middleware uses connect-flash.

app.use(flash());
app.use(function (req, res, next) {
  res.locals.messages = messages;
  next();
});

The routes for the application are set up to use the routes file you required. Requests pointing to /genres and /books will use the genres and books routes files respectively. At this moment, you have not created the routes files, but you will do that soon.

app.use("/genres", genres);
app.use("/books", books);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  var err = new Error("Not Found");
  err.status = 404;
  next(err);
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

export default app;

Note that this code was converted to ESM, as the generator only generates CommonJS.

What Is ESM and Why Are There `import` Statements?

ESM (ECMAScript Modules) is a next-generation module format for JavaScript on the web and Node.js. It replaces CommonJS, an old module format used in Node.js that you likely have seen (it uses require() and module.exports). ESM supports new features like asynchronous module loading, tree shaking, and support on the web. Going forward, ESM will slowly replace CommonJS (and already has for many new applications), so in this tutorial, we will be using ESM. There are import statements because that is how you import packages using ESM.

Another thing you need to do is edit /bin/www to use ESM.

#!/usr/bin/env node

// bin/www

/**
 * Module dependencies.
 */
import app from "../app";
import debugLib from "debug";
import { createServer } from "http";
const debug = debugLib("nodejs-webapp:server");

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

/**
 * Create HTTP server.
 */

const server = createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on("error", onError);
server.on("listening", onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== "listen") {
    throw error;
  }

  const bind = typeof port === "string" ? "Pipe " + port : "Port " + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  const addr = server.address();
  const bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
  debug("Listening on " + bind);
}

Finally, delete the auto-generated routes files (index.js and user.js).

Book and Genre Model

The Book Model will make use of Mongoose Schema to define how the books will be structured. Create a directory called models and a new file called book.js. Here is what it looks like.

import mongoose from "mongoose";

const Schema = mongoose.Schema;

const bookSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: "Please enter a book name",
  },
  description: {
    type: String,
    trim: true,
  },
  author: {
    type: String,
    trim: true,
  },
  genre: [
    {
      type: Schema.Types.ObjectId,
      ref: "Genre",
    },
  ],
});

export default mongoose.model("Book", bookSchema);

Here you have four fields. The last field is used to store the genre each book belongs to. The genre field here references the Genre model, which will be created next. That's why the type is set to Schema.Types.ObjectId, which is where the ids of each referenced genre will be saved. ref specifies the model you are referencing. Note that the genre is saved as an array, meaning that a book can have more than one genre.

Let's go ahead and create the Genre model in models/genre.js.

import mongoose from "mongoose";

const Schema = mongoose.Schema;

const genreSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: "Please enter a Genre name",
  },
});
export default mongoose.model("Genre", genreSchema);

For your Genre, you need just one field: name.

Genre Index Route and View

For this tutorial, you will make use of two routes paths for your genre: a path to add new genres, and another that lists the genres you have. Create a file in your routes directory called genres.js.

Start by requiring all the modules you will be using.

1	import { Router } from "express";
2	import mongoose from "mongoose";
3	import genre from "../models/genre";

Next, drop in the route that handles the index file for your genres.

router.get("/", (req, res, next) => {
  const genres = Genre.find({})
    .exec()
    .then(
      (genres) => {
        res.render("genres", { genres: genres });
      },
      (err) => {
        throw err;
      }
    );
});

This route gets called whenever requests are made to /genres. Here you call the find method on your Genre model to obtain all the genres that have been created. These genres are then rendered on a template called genres. Let's go ahead and create that, but first, update your layout.pug to look like this:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://bootswatch.com/paper/bootstrap.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
  body
    .container-fluid
      block header
        nav.navbar.navbar-inverse
          .container-fluid
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-2')
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
              a.navbar-brand(href='#') Local Library
            #bs-example-navbar-collapse-2.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='/books') View Books
                li
                  a(href='/books/add') Add New Book
                li
                  a(href='/genres') View Genres
                li
                  a(href='/genres/add') Add New Genre
        block content

This will give your views a nice structure to aid navigation. Now create a view file called genre.pug. In this file, you will loop through the genres created and output each genre in an unordered list.

Here is how the file should look.

extends layout

block content
  h1 Genre
  ul.well.well-lg
    each genre, i in genres
      li.well.well-sm
        p #{genre.name}

Add New Genre Routes and View

Go back to your routes/genres.js file to add the routes that will handle the creation of new genres.

The job of this router is to simply display the page for adding new routes. This router gets called whenever requests are made to the /genres/add path.

1	router.get("/add", (req, res, next) => {
2	res.render("addGenre");
3	});
4

This router handles the submission of the form. When the form is submitted, we check to ensure that the user has entered a name. If no name is entered, the page is rendered again. If the checks are good to go, the genre is saved and the user is redirected to the /genres page.

router.post("/add", (req, res, next) => {
  req.checkBody("name", "Name is required").notEmpty();

  const errors = req.validationErrors();

  if (errors) {
    console.log(errors);
    res.render("addgenres", { genre, errors });
  }

  const genre = new Genre(req.body)
    .save()
    .then((data) => {
      res.redirect("/genres");
    })
    .catch((errors) => {
      console.log("oops...");
      console.log(errors);
    });
});


The module is exported as a router.

1	export default router;

Now you can go ahead and create the page for adding a new genre to views/addGenre.pug.

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/genres/add")
        .form-group
          label.col-lg-2.control.label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')

      if errors
        ul
          for error in errors
            li!= error.msg

Books Routes and View

Create a new route file for books, and name it books.js. As you did earlier with the genre, start by requiring the necessary modules.

1	import { Router } from "express";
2	import mongoose from "mongoose";
3	import Book from "../models/book";

Next, set up the router for displaying all the books saved in the library. Try that on your own in the same way you set up that of the genre; you can always check back to make corrections.

I guess you tried that out—here is how it should look.

router.get("/", (req, res, next) => {
  const books = Book.find({})
    .exec()
    .then(
      (books) => {
        res.render("books", { books: books });
      },
      (err) => {
        throw err;
      }
    );
});

When this router is called, a request is made to find all books saved in the database. If all goes well, the books are shown on the /books page, else an error is thrown.

You need to create a new file for displaying all books, views/books.pug, and here is how it should look.

extends layout

block content
  h1 Books
  ul.well.well-lg
    each book, i in books
      li.well.well-sm
        a(href=`/books/show/${book.id}`) #{book.name}
        p= book.description

You simply loop through the books returned and output the name and description of each book using an unordered list. The name of the book points to the individual page of the book.

Add New Book Routes and View

The next router you set up will handle the addition of new books. Two routers will be used here: one will simply render the page, and another will handle the submission of the form.

This is how the routers look.

router.get("/add", (req, res, next) => {
  const genres = Genre.find({})
    .exec()
    .then((genres) => {
      res.render("addBooks", { genres });
    })
    .catch((err) => {
      throw err;
    });
});

router.post("/add", (req, res, next) => {
  req.checkBody("name", "Name is required").notEmpty();
  req.checkBody("description", "Description is required").notEmpty();
  req.checkBody("genre", "Genre is required").notEmpty;

  const errors = req.validationErrors();

  if (errors) {
    console.log(errors);
    res.render("addBooks", { book, errors });
  }

  const book = new Book(req.body)
    .save()
    .then((data) => {
      res.redirect("/books");
    })
    .catch((errors) => {
      console.log("oops...");
    });
});

In the first router, you are displaying the /addBooks page. This router is called when a request is made to the /add path. Since books added are supposed to have genres, you want to display the genres that have been saved to the database.

1	const genres = Genre.find({}).exec()
2	.then((genres) => {

The code above finds all the genres in your database and returns them in the variable genres. With this, you will be able to loop through the genres and display them as checkboxes.

The second router handles the submission of the form. First, you check the body of the request to ensure that some fields are not empty. This is where the express-validator middleware you set in app.js comes in handy. If there are errors, the page is rendered again. If there are none, the new Book instance is saved and the user is redirected to the /books page.

Let's go ahead and create the views for this.

Create a new view file called addBooks.pug. Note that the name of the view matches the first parameter given to res.render. This is because you are rendering a template. During redirection, you simply pass the path you want to redirect to, as you did with res.redirect('/books').

Having established that, here is what the views should look like in views/addGenre.pug.

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/genres/add")
        .form-group
          label.col-lg-2.control.label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')

      if errors
        ul
          for error in errors
            li!= error.msg

The important thing to note here is the form action and method. When the submit button is clicked, you are making a POST request to /books/add. One other thing—once again you loop through the collection of genres returned and display each of them.

Book Show Route and View

Let us drop in the route to handle the requests made to each books page in routes.books.js. While you are there, it is important to export your module too.

router.get('/show/:id', (req, res, next) => {
  const book = Book.findById({ _id: req.params.id })
  .populate({
    path: 'genre',
    model: 'Genre',
    populate: {
      path: 'genre',
      model: 'Book'
    }
  })
  .exec()
    .then((book) => {
      res.render('book', { book })
    })
    .catch((err) => {
      throw err
    })
})

export default router

No magic is happening here.

First, requests made to this router must have an id: the id of the book. This id is obtained from the params of the request using req.params.id. This is used to identify the specific book that should be obtained from the database, as the ids are unique. When the book is found, the genre value of the book is populated with all the genres that have been saved to this book instance. If all goes well, the book view is rendered, else an error is thrown.

Let's create the view for a book. Here is how it should look.

block content
  .well.well-lg
    h1 #[strong Name:] #{book.name}
    ul
      li #[strong Description:] #{book.description}
      li #[strong Author]: #{book.author}
      li #[strong Genre:]
        each genre in book.genre
          #{genre.name}
          |,

You can start up your node server by running:

1	DEBUG=tutsplus-library:* npm start

Conclusion

Now you know how to build a standard web application in Node.js, not just a simple to-do app. You were able to handle form submission, reference two models, and set up some middleware. The full example code is here.

You can go further by extending the application—try adding the ability to delete a book. First add a button to the show page, and then go to the routes files and add a router for this. Note that this is going to be a POST request.

You can also think of more features to add to the application. I hope you enjoyed it.

This post has been updated with contributions from Jacob Jackson. Jacob is a web developer, technical writer, freelancer, and open-source contributor.