Easy steps to create an ExpressJs application

Introduction

In our previous post, we learned how to set up an ExpressJS development environment and installed the Express library.

Today, we will cover the steps in creating an ExpressJS application. By the end of this article you should be able to:

• Create a web server

• Perform essential communication with the web server.

• Run the web server

Creating the Express app

Express enables you to create a NodeJS webserver to handle HTTP requests asynchronously. It is necessary to include the ExpressJS library in your code in order to use it.

The steps below detail how to create a web server

Step 1: Including the Express Library

Because Express is built on top of Node, we have access to the built-in require() method to help us include modules from separate files.

Below is the syntax for including a module :

const yourModule = require("your_module_name");

Let's use the require() method to import our ExpressJS module and use it to create our web server.

const express = require("express");

The code above returns a function stored in the express variable.

Step 2. Creating the web server

To create an express app, we run the top-level express() function exported by the Express module.

const app = express() // run the function to create a express app

The app object conventionally represents the Express application and contains useful methods. It has methods for

• Routing HTTP requests

• Configuring middleware

• Rendering HTML views

• Registering a template engine

Step 3. Listening for connection

The web server (app) we just created needs to be able to listen for connections. To listen to a connection with the app, we utilize the app.listen() method.

This method enables us to bind and listen for connection to the server on the specified host and port.

Below is the code to listen for a connection to our application:

app.listen(port, callbackFunction) //listen for connection to the app

• The port is a way of identifying a specific application over a network.

• The callbackFunction is a function that we will run when we instantiate a connection with the server.

We will assign the port a number. If the port number is omitted or is 0, the operating system will assign a random unused port.

The code is as below

app.listen(5000, () => {
  console.log("App has started and is running ");
});

Step 4. Basic routing

We need to tell our application how to respond to a client request to a particular endpoint.

Depending on the URI (or path), and the specific HTTP request method (GET, POST, etc) used, a specified function will execute when the path entered in the web browser matches that on the server.

Route definition takes the following structure:

app.METHOD(PATH, HANDLER)

• app is our express application

• METHOD is the HTTP request method

• PATH is a route on the server

• HANDLER represents the function executed when the route matches.

As we want to retrieve some data on the server, we will use app.get() method to represent an HTTP GET request to the homepage route (/).

Whenever the route from the client matches that on the server, we will execute the HANDLER function.

• The function accepts two parameters: req and res.

• We will use the res.send([body]) method to send a response to the client.

  • The body parameter can be a Buffer object, a String, an object, Boolean, or an Array

• In the body, we insert a string ( Hello World, this is my first express app ).

• This string will be printed on the homepage as our response.

The res object represents the HTTP response that an Express app sends when it receives an HTTP request.

An example of basic routing to retrieve some data is as below:

//basic routing 
app.get("/", (req, res) => {
  res.send(`Hello World, this is my first express app`);
});

Step 5. Starting the server

This is what we have done so far

• Created a web server

• Listened for connection to the server

• Retrieve some data from the server, when the path matches that on the server.

Finally, we need to start our web server. Assuming the file in your directory is named index.js, you can start the server by calling the following script in your terminal

node index.js

Whenever the connection is made to the server, the app.listen() is executed, and we see the below in our terminal

App has started and running

Step 6: Viewing the output

After creating the web server, we need to display some data to the user when they visit the home page.

Navigate to the URL http://localhost:5000/. If everything is working, the browser should display the string below:

Hello World, this is my first express app

The overall code used to create a simple express app is as below:

const express = require("express"); //require express
const app = express(); //create the app

app.get("/", (req, res) => {
  res.send(`Hello World, this is my first express app`);
}); // send a response to the client

app.listen(5000, () => {
  console.log("App has started and running ");
}); // listen for connection to the app

Summary

In this post, we learned how to create an express app, listen for connection with the app, perform essential communication with the web server and view the results in our browser.

In the next article, we will learn how to build APIs using ExpressJS.

^{This article is the day 5 post on the 30-day challenge I am undertaking to learn backend development. Please feel free, to drop some insights, comment, or share the post to your networks}