Easy steps to create an ExpressJs application
Tags: javascript, web3, programming, tutorial
Published: 2023-01-10 22:14:41

## Introduction

In our previous [post](https://dev.to/efkumah/how-to-effortlessly-set-up-an-express-development-environment-15mm), 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 :

```javascript
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.

```javascript
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.

```javascript
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:

```javascript
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

```javascript

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:

```javascript
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:

```javascript
//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

```javascript
node index.js
```

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

```javascript
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/`](http://localhost:3000/). If everything is working, the browser should display the string below:

```javascript
Hello World, this is my first express app
```

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

```javascript
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.

*<sup>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</sup>*