API Endpoint In ExpressJS | MERN Stack part 4

 API Endpoint is like a bridge between the front end and back end of a web application. All the Relevant information is passed between the systems using this method. API Stands For Application Program Interface, As the name suggests it's an interface for the web application.

In the last few articles, we saw how to set up an environment for MERN stack development, we also saw how to install the relevant dependencies with a node manager called npm. In this article, see how to code a demo API endpoint where we can send requests and get some responses.

Link to Previous Articles: Creating API Endpoints using ExpressJs

What is an API?

The first question that is important and doesn't answer in the previous articles was, what actually is an API, and how is it useful in web development and in this MERN stack? Let's understand this with a simple example. Suppose we go to a hotel and we order a few items. The orders are taken by the waiter or some other person. Then the request is sent to the chef for making the required items. Then again the waiter will deliver the items. This whole process of working on a web application. You being a user, request for pages and sites, and then the waiter or API will give that request to the backend server which process and sends a relevant response.

Step 1: Creating an Express Application.

First, we need to create an express application, which we have created in the last articles, If you have not seen it please check out the above link, In this step, we install the dependencies, like Express, Axios, Nodemon, etc. Then we create an entry point or main file called index.js. The File Structure of the application is given below.

 Index.js is the Entry point, Apart from this we have also created 1 file data.js, and a folder called routes, data.js will have dummy API data for testing, and the routes folder will consist of all the pages and routes. We will look into these files later in this article.

Step 2: Starting Express Server.

Now we shall see how to start an express server with a specific port number, you can give any port number as you wish. The code is pretty simple to understand.

First, we need to add the libraries to the file similar to the way we do in python like import "library name" or in C like #include<stdio.h>, in javascript, we add libraries using require() method. so the constant variable express will have all the modules of the express library, then we create an app by initializing the express module. Here we used port number 1234 you can use any number as you wish, just see that the port is not occupied or taken by another service.

Note: All the syntax of the javascript is according to the ES6 version of Javascript.

Next, we made the app listen on the specified port 1234, using the method listen(). We can see that this method takes 2 arguments one is a number and the other is a tuple or list. The first value is the Port Number, The next can be used for request and response.

Step 3: Making Dummy API data.

Most web applications use database data and API to fetch data from these databases and show it to end-users, To make this tutorial simple we will use a javascript file to store all the information. You can create your own data in JSON(Javascript Object Notation) format, here I have used Data from a website called JSON placeholder, you can also get different sizes of JSON data for testing the application.

So I have copied all the information and kept it in the data.js file. with a variable name called users. We also need to add one more line of code at the end of this file to use in other files.

So the code module. exports will export the user's variable so it can be imported into other files for accessing the data.

Step 5: Making A Endpoint for Requesting Data.

We have made the server listen on port 1234 using listen to the () method in the same way we can make different endpoints to the server with specified paths. For example "/MainPage", and "/homepage" which will serve as different endpoints to the server giving different types of information. Here we can make 2 types of requests a GET request and a POST request. 

We will be using a GET page, as in this article we are not dynamically requesting for specific users and we are the only ones requesting for entire data, so a GET request is good for fetching information. A POST request can be used when we are sending some information to the server such as username, password, or other specific details for getting relevant data we can use the POST method. We will be seeing the upcoming articles on how to make a Dynamic API endpoint for requesting a wide variety of data.

We have used the get() method to make an endpoint called "/getdata", the next parameter is the request and response objects. Suppose this is a POST method we can access the parameters from the request object, and send objects using the response object. Don't forget to import the user's file.

In the above snippet. When the user goes to the '/metadata page, the server will check whether this endpoint is present or not in the application, and then it will execute the code inside and send a response. as of this case, we are sending data objects as a response. 

Step 6: Testing the Endpoint.

For checking the endpoint start the server for this we need to run the nodemon server with the index.js file with the command nodemon index.js then go to the https://localhost:PORT/getdata point and see whether the data is displayed or not in the browser.

So in the traditional approaches, this data will be processed on the client side and shown in a prettier manner using other technologies and CSS. In our case, we will be using react in our future articles.