Create a Monolith app from scratch with Node Express (part 1)

an introduction to creating a blog application server using Node Express

Posted by Wazoo on December 16, 2018 · 3 mins read

A popular option for a server stack is the Express framework on Node. Express is a non-opinionated framework that allows you to put together nearly any project; from functioning as a pure API middleware or backend, up to a multi-page server, to even hosting a single page application (SPA). In this tutorial, we’re going to go through the process of creating a “typical” server monolithic application; in other words a multi-page application server.

Let’s build a Blog application!

Before you start

  • Ability to handle some basic JavaScript. Enough to understand functions, callbacks, etc
  • Using the terminal / console window in Mac / Linux / PC.

Goals

  • Understand enough about Node.js and the Express framework to build a monolith
  • Run one command that will “host” your application and watch your entire directory for updates.

What is the Express Framework?

Express is a minimal Node.js web application framework that provides a robust set of features for web and mobile applications. The project initially began back in 2010, when there weren’t too many options for monolithic stack development with Node.

Installation

We can leverage a cross-platform Express generator to start our application. In a terminal window, use NPM to install it.

npm install -g express-generator

Once the generator is available, then in the same terminal window just navigate to your projects folder / directory.

The generator will create a folder on your behalf using the name you give it. Let’s go ahead and generate our app.

express --view=ejs express-blog
cd express-blog

It won’t take any time at all to generate your application for you in the express-blog folder.

Let’s take a quick look at the default folder structure.

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs
  • bin/www - pretty much the server socket / core of your server. You shouldn’t need to modify this.
  • app.js - our server entry point. Here’s what we’ll start to update.
  • public/* - folder area for static asset files and/or generated bundles
  • routes/* - folder area to define what URL’s and methods we’ll use
  • views/* - folder area for any templates / markup that is sent to the browser

Note: While I generally think that templating libraries are useful, I generally follow a practice of only using a templating package when necessary, and “regular” HTML markup by default. In this same vein, I’ve found that EJS strikes a pretty good balance between allowing for standard HTML mixed with template helpers.

running the server

Before we make any updates, let’s just run the server and see what we get.

You should see a Welcome to Express page. Success!