Creating a web server using Express
Tags: javascript, tutorial
Published: 2020-08-07 13:07:25

---
title: Creating a web server using Express
published: true
date: 2022-12-08 09:29:23 UTC
tags: JavaScript, tutorial
canonical_url: https://www.90-10.dev/js-express-web-server/
---

"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:

```shell
mkdir ~/my_server
cd ~/my_server
```

Next step is to initialise your application:

```shell
npm init -y
```

We'll also create the file that will act as the entry point:
```shell
touch index.js
```

To add `Express` to our app, we'll run the following in the terminal:
```shell
npm install express --save
```

# A Simple Server

We'll add a single endpoint that will display a simple "90-10.dev" message. Update `index.js` as follows:

```javascript
const express = require('express');
const app = express();
const port = 9010;

app.get('/', (req, res) => {
  res.send('Welcome to 90-10.dev');
});

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

# Run

Assuming an `index.js` file in your current path:
```shell
node index.js
```

Now, if you point our browsers to http://localhost:9010, we'll see a webpage containing the 'Welcome to 90-10.dev' message.

## Avoid relaunch

One of the limitations we're going to encounter, is the need to relauch it if changes are afflicted to the source file.

A great utility to overcome this limitation is `nodemon`. To install it please run the following:
```shell
npm install -g nodemon
```

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

```shell
nodemon index.js
```

# Templating engines

Express supports a lot of templating engines - we're going to use one called `pug`. To add it to our app:
```shell
npm install pug --save
```

## Integrate

Next, we'll integrate it into our app inside `index.js` - here is the top of it:

```javascript
const express = require('express');
const app = express();
const port = 9010;

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:

```shell
mkdir views
touch views/index.pug
```

## First template

Let's add our first view - update `views/index.pug`:

```javascript
doctype html
html
   head
      title = "90-10.dev"
   body
      p Welcome to 90-10.dev
```

## Using the template

Back in `index.js`, let's make use of the new template - the file is listed in its entirety below:

```javascript
const express = require('express');
const app = express();
const port = 9010;

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

```shell
nodemon index.js
```

The reloaded webpage, http://localhost:9010, will now contain HTML as per the template - the noticeable difference is the browser window title now showing: '90-10.dev'.

# What next?

The Express website has lots of good resources, amonst them the API reference.