You are currently viewing How to create Express Web app using Node.js

How to create Express Web app using Node.js

This is a very basic hands-on tutorial to set up the express server up and running using node.js. It involves a few steps and the server will be up and running. So without wasting any time, let’s start:

Assumption

  • Node is installed
  • Node Package Manager (npm) is installed
  • Visual Code or any code editor of your choice is installed.

Install required packages

Like any other programming, we do not need to write everything from scratch. So we as a developer use the available package for the basic tasks, so that we can spend more time on solving the actual problems instead of writing something which is already available and time tested as well.

  • Create Package.json by initializing the node.js project
  • Install the Express
  • Install dotenv

Create package.json

Select the directory where you want to create your project and run the following command to create the package.json. This command basically create an empty node.js project

npm init --y

When you run the npm init command, it will ask you to enter some information. I have added the –y flag to accept all the default values. Once that command is executed successfully, you wll see that a file named “package.json” is created inside the project directory as shown in the below diagram

Package.json

Install Express

The next step is to install the express server. We will be using it to avoid writing a server from scratch. In order to install the express package, run the following command without mentioning the version, so that we can have the latest version of express. In case if you need to install the specific version, you can do that by stating the version number which you need to have in your application.

npm install express

Install dotenv

This package is an optional package. I will be using it to read the values from the environment files. Environment files are the files that end with the extension “env” and we usually store values that are used by our application. The values are stored in this file as key-value pairs i.e. in the form of the dictionary. In order to install the dotenv package, use the following command

npm install dotenv

Now I will add an environment file. This step is an optional step and you can skip it if you want. I am adding it because I want to store the port number on which the express server will run, as I want to avoid hardcoding the port inside the code. In order to add the file, just add a blank file without any name and give it the extension of “env”

Add Environment File

Add the entry point

Now I will add a new file having an extension of “js”. I will name this file app.js, but you are free to give it a name of your own choice such as server.js, application.js, etc. This file contains the code which is responsible to create and run the express server. 

Import the packages which are installed

I’ve installed packages i.e. express and dotenv. Now it’s time to import these packages so that I can use them.

Import Express and dotenv

const express = require("express")
const dotenv = require("dotenv")

Put it all togather

Read Port from the env file

dotenv.config() // this will read the file and will place the values in the process.env

const port = process.env.port
//just for information
console.log("Port:" + port)

Declare, initialize the Application using Express and Start Listening Request

const app = express()
app.listen(port,()=>{
    console.log(`Server is listening on Port: ${port}`)
})

Run IT

Up to this point, our express server is created and is up and running.  But please note that we have not added any endpoint to our server. So practically speaking it is created but it would not perform anything. If you run this server and browse the URL http://localhost:8089, you will face an error stating that :-

Cannot GET /

Add a simple get End-Point

In order to make our application complete, I will add a simple “Get” endpoint. So that if the user browses to the root URL, he/she did get something as a response from our express server.

app.get("/", function(req,res){
    res.send("Hello World")
})

Since the app is an instance of the express server, so we get several methods out of the box from it. In fact, it allows us to capture any kind of HTTP verb so that we can write our action against it. These includes

  • Get
  • Post
  • Put
  • Delete
  • Connect
  • etc

In the above get example, I have mentioned the route as “/” which means the root, and in the second parameter provided a method that accepts two parameters of request and response. In the body of the method, I have sent back “Hello World” back to the client using the “send” method of the Response object. 

Now run the application again using the following command

node app.js

In the above image, you can see the message of the server is running. By the way, we were getting this message in our previous run too. Now we actually need to check if our server is responding to our “Get” request. In order to do that, lets open up the following URL:-

http://localhost:8089 and you will see the following result:-

Source Code

Download Source Code from githib

Leave a Reply