Getting Started with Express.js

Hey folks! Hope you all are doing well. I recently started learning about Backend Development and the first step was to understand Javascript well and then to learn Express. Writing this blog for folks who are just starting to learn the Backend so they won't get overwhelmed in their journey.

Basic Terminology

Communication Protocols

So my previous blog was all about how computers talk to each other and there we discussed in detail about what are protocols and what are its type, you can check out the blog here

Link to My Previous Blog

So the gist of it was that for devices to communicate with each other through the Internet, We need a set of defined rules known as Communication protocols or simply, protocols. One such protocol is HTTP standing for Hyper-text transfer protocol which allows our application(which we will make) to communicate through other devices.

By learning about Express, it becomes easy for us to create our own HTTP servers, which is software that understands HTTP(the protocol your browser uses to view webpages) and URL(addresses).

Databases

I guess most of us know about this, but to explain this shortly, while creating any application, we need to store some kind of user data like username or password which is stored in these databases like MySql, MongoDB, firebase etc. Why not in our backend servers? Because our backend servers can go down and the data will then not be accessible.

Let us take an example to understand what is going on. Suppose I want to ask a question to ChatGPT. When we ask a question to ChatGPT, we are essentially creating a request to the very powerful machine of ChatGPT, and the answer we are getting is a response! This is the Client-Server Model in which the client is our device which we use to ask questions to ChatGPT and the server is the machine of ChatGPT.

We can actually look into the request sent to ChatGPT, if we go to the Chatgpt website, right-click on the page and go to inspect and then to networks, we can see a bunch of requests sent. Here is a screenshot for the same.

As we can see I asked ChatGPT about what is post request, it then sends a bunch of requests and by clicking on each request we can inspect each request. Interesting isn't it?

Now let us know about creating HTTP servers

HTTP SERVERS USING EXPRESS

As discussed earlier, the HTTP server is the software part of the web server which understands URLs and HTTP.

URL stands for uniform resource locator. In layman's terms, it is the address where we send the request.

The URL for ChatGPT is "chat.openai.com"

HTTP is the way or the defined rules through which the browser(like Mozilla or Chrome etc) sends the request.

Route/Path- Now a particular website can perform many different functions. How to know which function to execute? Route helps in the identification of the specific task which needs to be performed.

Route in this link "chat.openai.com/backend-api/" is "backend-api"

Query parameters, Headers and Body-These are how we can send data to the web server from the client side. Query parameters are the easiest to send. Simply add a ? in front of the URL/route and pass on the query.

Request Methods- It is like to mention what purpose is the request sent for. Broadly there are 4 types of requests, for 4 purposes

GET-The main purpose of a GET request is to retrieve data from a server. This data can be in the form of HTML content, images, audio files, videos, or any other type of resource available on the web. Also the default request method.

PUT-It is often used to update information associated with an existing resource, such as updating a user's profile information, modifying a document, or changing the attributes of an object.

POST-The primary purpose of a POST request is to send data from a client to a server, typically to create or update a resource, perform an action, or submit form data.

DELETE-The main purpose of a DELETE request is to request the removal of a resource from the server.

Creating a server using Express.

Before getting started, make sure node and npm are installed on your machine. Node is just a js runtime environment. What it means is that earlier javascript was made to run on only browsers(client side). But using node.js, we can use it on the server side as well. The runtime environment is the space where all our code gets executed.

Similarly, npm is like a play-store/app store of NodeJs Libraries. Libraries are pre-written codes for specific usage of some common functionalities.

Now let us create an HTTP server

Go into the folder where you want to create your first backend application.

Opening the terminal in that folder, run the command npm init -y. This will create a new file named package.json, which contains the details of the project like author, description, dependencies etc. This is like the profile page for your project.

Now we need to import libraries. Express is one of them. Since it is a very common functionality to create HTTP servers, developers developed Express for the rapid creation of an HTTP server. But there is a problem, Express does not come with NodeJS directly, we have to install it using the command npm install express.

You will notice a folder named node modules is created. This folder contains all libraries Express needs. You will also notice a new dependency on your package.json file, with the version of express in it. Also, another file named package-lock.json is created. The purpose of this file is to lock the dependency version so that at the time of deployment there is no inconsistency between the developer and the user's version and functionality remains as it is.

Now from Express's official website, we can copy the boilerplate code which is also shown below.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')

})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

This serves as your very first HTTP server that returns you "Hello World!". Notice that app.get is called so that we can see the Hello World written. So it is a GET request.

app.listen initialises the web server and also handles routes etc.

You can go into your browser, and run localhost:3000/ to get the output. You can send other things as well through res.send().

This marks the end of this short blog, where we just caught on to the basic terminology of backends and our first hello world backend application. Hope to catch you soon with new learnings! Till then, Bye!