Introduction to Express JS

 

Concepts in Focus

• HTTP Server
• Server-side Web Frameworks
• Express JS
• Network Call using Express JS
• Handling HTTP Request
• Testing Network calls
• Network Call to get a Today’s Date
• Network Call to get HTML content as an HTTP Response
• Sending file as an HTTP Response

1. HTTP Server

• Works with the HTTP requests and responses
• Handles the different paths
• Handles the query parameters
• Sends the content as HTML, CSS, etc. as an HTTP response
• Works with the databases

1.1 Server-side Web Frameworks

The Server-side Web Frameworks take care of all the above requirements.

Some of the Web Frameworks are:

• Express (Node JS)
• Django (Python)
• Ruby on Rails (Ruby)
• Spring Boot (Java)

2. Express JS

It is a free and open-source Server-side Web Application Framework for Node JS.

It provides a robust set of features to build web and mobile applications quickly and easily.

Installation Command:

1

npm install express --save

3. Network call using Express JS

1. Creating Express server instance

1

2

const express = require("express");

const app = express();

JAVASCRIPT

2. Assigning a port number

1

app.listen(3000);

JAVASCRIPT

The app starts a server and listens on port

3000

for connections.

3.1 Handling HTTP Request

Syntax:

app.METHOD(PATH, HANDLER)

• METHOD is an HTTP request method, in lowercase like 
  get
  , 
  post
  , 
  put
  , and 
  delete
  .
• PATH is a path on the server.
• HANDLER is the function executed when the PATH is matched with the requested path.

3.1.1 GET Request

1

2

3

4

5

6

7

const express = require("express");

const app = express();

app.get("/", (request, response) => {

response.send("Hello World!");

});

app.listen(3000);

JAVASCRIPT

Note

Whenever the code changes, we need to restart the server to reflect the changes we made.

4. Testing Network Calls

We can test the Network calls in two ways.

1. Browser Network Tab.

1. Clicking the 
   Send Request
    in the 
   app.http
    file.

5. Network Call to get a Today’s Date

1

2

3

4

5

6

7

8

9

const express = require("express");

const app = express();

app.get("/date", (request, response) => {

let date = new Date();

response.send(`Today's date is ${date}`);

});

app.listen(3000);

JAVASCRIPT

6. Network Call to get HTML content as an HTTP Response

6.1 Sending file as an HTTP Response

Syntax:

response.sendFile(PATH, {root: __dirname });

• PATH is a path to the file which we want to send.
• __dirname is a variable in Common JS Modules that returns the path of the folder where the current JavaScript file is present.

1

2

3

4

5

6

7

8

const express = require("express");

const app = express();

app.get("/page", (request, response) => {

response.sendFile("./page.html", { root: __dirname });

});

app.listen(3000);

JAVASCRIPT