The middleware, Express.js

This article is the tenth part of Week of Web(#WOW). If you don’t know what #WOW is here’s a card to it.

Week of Web: A hands-on tutorial to become a full stack web developer in a week

In this article, we will be using Express.js to write server-side code without the hassle of going through a little complex Node.js code. Do note that Express is made on top of Node.js, so in the end, it’s Node.js itself and knowing the concepts of Node.js will be helpful. Here's a card to Node.js in case you missed it.

Getting Started with Node.js

Now that this is out of our way, let's get started.

What is Express.js?

Express is a backend application framework that helps us in building APIs. It is written on top of Node.js and takes care of low-level protocols and process which rather would be needed to coded manually in Node.js.

Why should we learn Express.js?

It helps us build an application in a minimalistic way and it is flexible as there are millions of npm modules directly pluggable with it.

How to install Express.js?

Express can be simply installed as an npm package in our working directory and then simply be imported into our Node.js server file.

So going into our terminal we can simply install express

npm i express

And then import it into our Node.js server

const express = require('express');

How to use Express.js?

The most basic way to use express is to create a GET request to display a text.

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send("Hello World");
});
app.listen(5000);

So when you run this file in Node.js and then open localhost:3000 , you will get the text Hello World displayed.

Congratulations your first backend application is ready!

Now let us understand what code we wrote here.

This line initialises the express module.

const app = express();

And then we created a get request with its URI and then a request-response method that defines what calculations are supposed to be performed when the URI is triggered.

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

In this case, we are sending the string Hello World back to our client using the res.send method.

After that, we define where should all our URI work. That is we define the domain. Here since we are still testing things we will let it serve locally in our system at port 5000.

app.listen(5000);

Now that you know how Express works let’s use it to create a backend for our ToDo list application.

Building a Backend server for the ToDo list application

We had created the frontend for our todo list application. Now it's time to create a backend for it.

1. Initialising npm

Go to the root of our ToDo list project and run the following command in terminal

npm init -y

2. Installing all the npm required packages

Now that npm is initialised let us install all the packages we will need by running the following command in terminal

npm i express ejs

This will add ejs and express to our application

ejs stands for embedded Javascript which we will use to write Javascript inside our HTML files.

3. Setting up the project folder structure

Now in the root folder, create a file named index.js . And then create a folder named views

Now move the index.html from public folder to views folder and rename it as index.ejs.

ejs stands for Embedded Javascript. It helps us dynamically load content in our HTML file without the hassle of adding iterations and conditions in a separate javascript file.

Our project folder structure will look something like this.

Public folder will contain all the static files that won't be affected by the server and views folder will contain all the dynamic files which will be manipulated by the server.

4. Creating a server

Now, let's start writing the server-side code in express.

Here we have configured express to fetch static files from public folder defined the URL encoding to be extended and defined that all our dynamic files are written in ejs so that we don't have to mention the extension every time.

app.use(express.urlencoded({ extended: true }));
app.use(express.static("public"));
app.set("view engine", "ejs");

Also, we have created three APIs to fetch, add and remove data from the database with their respective GET and POST requests. For now, we have commented on what will go in here.

app.get("/", (req, res) => {                                          
   //Code to fetch data from database will go here
});
app.post("/create", (req, res) => {  
  //Code to add new data to database will go here
});

And that's all the APIs we will need for our ToDo list application.

Photo by Emily Morter on Unsplash

So you see how simple it is to write APIs in Express rather than manually in Node.js. We haven't created a database for now and commented where the database code goes.

All our interactions with the database goes inside these APIs and we will learn about databases and implement CRUD functions in Firebase Cloud Firestore.

This is Vinayak Tekade from Coder’s Capsule in collaboration with Developer Student Clubs Amrita School of Engineering Bengaluru signing off.

Follow me on LinkedIn and Twitter.

Looking forward to learn, teach and grow together. Check us out on Instagram for more similar content.