Build a web server using Express in JavaScript

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Installation

In the terminal, we’ll create and navigate to a folder that will host our server - we’re using a folder named my_server located in the home directory:

mkdir ~/my_server
cd ~/my_server

Next step is to initialise your application:

npm init -y
Wrote to /Users/pardel/my_server/package.json:

{
  "name": "my_server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

We’ll also create the file that will act as the entry point:

touch index.js

To add Express to our app, we’ll run the following in the terminal:

npm install express --save

added 65 packages, and audited 66 packages in 1s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

A Simple Server

We’ll add a single endpoint that will display a simple “Hello World” message - add the following to the index.js file created above:

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

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

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

Run

To start the server, we’ll run the following in the terminal:

node index.js
Server started at http://localhost:5550

Now, if you point our browsers to http://localhost:5550, we’ll see a webpage containing the ‘Hello World’ message:

Avoid relaunch

One of the limitations we’re going to encounter, is the need to relauch it if changing to the index.js file.

A great utility to use for overcoming this limitation is nodemon - to install it please run the following:

npm install -g nodemon

changed 29 packages in 687ms

4 packages are looking for funding
  run `npm fund` for details

Launching the server will now be done by replacing node with nodemon:

nodemon index.js
[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node index.js`
Server started at http://localhost:5550

Templating engines

Express supports a lot of templating engines - we’re going to use one called pug. To add it to our app:

npm install pug --save
added 39 packages, and audited 105 packages in 2s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Integrate

Next, we’ll integrate it into our app inside index.js - at the top of it, before defining the endpoints, set the engine and the views folder (lines 5-6 below):

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

app.set('view engine', 'pug');
app.set('views','./views');
...

Views

You’ll notice above that we’re going to use a folder named views to store our pug templates. Let’s create it together with a index.pug file inside:

mkdir views
touch views/index.pug

First template

Let’s add our first view - add the following as the content of the views/index.pug file:

doctype html
html
   head
      title Hello World
   body
      p Welcome to my website

Using the template

Back in index.js, let’s make use of the new template - for the / endpoint, we’ll replace the res.send with res.render (line 9 below):

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

app.set('view engine', 'pug');
app.set('views','./views');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

Relaunch the server

nodemon index.js

The reloaded webpage, http://localhost:5550, will now contain HTML as per the template - the browser window title now shows: ‘Hello World’ and its content is: ‘Welcome to my website’.

Build a web server using Express