DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

sisrafilss
sisrafilss

Posted on

Introduction to Backend Web Development, APIs, and Express.js

Backend development is the soul of web development process. Backend is a place where most of the business logic happened stealthily of the users. Backend is hosted in a special computer called server that runs 24/7 and is always connected to the internet. Today we will discuss about Backend Web Development, Introduce APIs and create a simple server using Express.js.

Backend Web Development Explained

Backend development means developing the server-side of a website, including databases. The front and backend are like a restaurant, with its kitchen with larder. The front side is the restaurant itself, decorated with chairs, tables, etc. It is a place that the client of the restaurant can see. Similarly, a front end of a website is the visual and graphical part of it that a visitor sees in the browser.

On the other hand, the backend or server-side is like the restaurant’ where all the cooking happens. The database is like the larder where all the necessary information is kept.

What is APIs

API - Application Programming Interface is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system.

There are various APIs, like weather API, Police API, Geolocation API, etc.

API Endpoints, Paths, and Parameters

When we discuss API, we need to think about a few things, including Endpoint, Paths, Parameters, and Authentication.

The Endpoint is a URL that is used to send GET requests to an API like
https://v2.jokeapi.dev/joke/Any

Sometimes it added a few words at the end of the endpoint like https://v2.jokeapi.dev/joke/Programming?contains=debugging
The last part after the endpoint after the β€œ?” mark is divided by two-part by the β€œ=” sign. These two parts are called key-value pairs. It is called a parameter.

We can add multiple parameters by separating them using β€˜&.’ We have to start adding parameters after adding a β€œ?” (question mark) after the endpoint.

What is Express?

According to Wikipedia, β€œExpress.js, or simply Express, is a back-end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.”

Creating Our First Server with Express

Make a directory and run initialize npm using npm init. Create a .js file (i.e. server.js) install express using npm install express. It will automatically be downloaded and saved as dependencies.

To start server, first add express in the .js file (server.js) using

const express = require("express"); const app = express();
app.listen(3000, function() { console.log("server has started with port : 3000 });
Enter fullscreen mode Exit fullscreen mode

Run it in the command line using node server.js to check. It will print the console. Browse localhost:3000 will show something like β€œCannot GET /” if it was successful.

Handling Requests and Responses: the GET Request

Use another method called get, just above the listen method. get method will accept two parameters. The first is the path (β€œ/” for root) and a callback function. The callback function will also receive two parameters, request and response. Standard is to call them req, res. i.e.

app.get("/", function(req, res) {
    res.send("<h1>Hello, wrld</h1>");
});
Enter fullscreen mode Exit fullscreen mode

Understanding and Working with Routes

The first parameter inside the get method is called the route or path of a webpage. We can set it any as our requirement. I.e., β€œ/contact”, β€œ/about” etc. We can specify as many paths for the different pages using the get method multiple times.

To avoid manually stopping and starting the server, we can automatically control and restart the server.js after every save by installing an npm module called nodemon. Visit nodemon.io for detailed instruction.

Responding to Requests with HTML Files

Inside the get method, res.sendFile() sends any file to the browser. __dirname brings and adds the current folder location for dynamically adjusted file location. i.e., to send index.html to the browser, we have to use,

res.sendFile(__dirname + "index.html");
Enter fullscreen mode Exit fullscreen mode

Processing Post Requests with Body Parser

Set the value of action attribute β€œ/” (action=”/”) to send the user input to the server via post method (method=”POST”).

To capture the value of the input into the server and send back something to the user, we have to do two things.

First of all, set the app.post. Using:

app.post("/", function(req, res) {
    res.send("Send something to the user to show after submitting");
})

Enter fullscreen mode Exit fullscreen mode

Secondly, we have to install and use the body-parser to capture the value of the input.
Install body-parser -

npm install body-parser
Enter fullscreen mode Exit fullscreen mode

Require it -

const bodyParser = require(β€œbody-parser”)
Enter fullscreen mode Exit fullscreen mode

Use it using express -

app.use(bodyParser.urlencoded({extended: true});
Enter fullscreen mode Exit fullscreen mode

To get all the user input values, use req.body inside app.post -

app.post("/", function() {
    req.body // Every input value will be in body object i.e to access the value of name="number", use req.body.number, etc.

} );
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
daniellebarron profile image
DanielleBarron

As such, the environment omits browser-specific JavaScript APIs and adds support for more traditional OS APIs including HTTP and file system. surah to convince parents for love marriage

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.