Published:
Tagged: JavaScript
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
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
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}`);
});
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:
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
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
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');
...
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
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
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}`);
});
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’.