How to mimic a fully functional REST API using JSON Server node module.


What is a RESTful API?

A Representational State Transfer (REST) API is a web service that uses HTTP requests to GET, POST, PUT, PATCH and DELETE data from server. RESTful systems provide faster performance, reliability and scalability by updating and reusing components without affecting the performance while running on a server. 

What is a JSON Server?
JSON Server is a Node Module that you can use to create a mocked version of REST JSON web service on the go. All you need is a json file for storing your data.


Before directly getting started with our discussion, let’s go through why we actually need to fake/mock our REST API while we can setup one on any server with limited knowledge. Well, you can go through setting up a basic RESTful web service “quickly” in this never ending tutorial guide https://stackify.com/rest-api-tutorial


And if you are basically a front-end developer who wants to strictly focus on developing an application, test it with server data and at the same time, aren’t interested/expertise in setting up a server going through a whole lot of steps to create a fully functional RESTful web service, a fake REST API gives you a really easy option to mimic the entire functionality that a real back-end web service could offer.

For reference, there is an online version of json Rest API server at https://jsonplaceholder.typicode.com where you can simply make requests to the routes they provided. But, there are limitations to this version as you have to strictly work with their data and also requests like PUT, POST and DELETE won’t alter the data stored in their server. Therefore if you want to test your application with a complete set of http requests and your own custom data, please follow the steps below to set up a REST API locally running using JSON Server node module.

STEP 1: Download and Install Visual Studio Code Editor 

You can either use windows command prompt after installing Node.js on your system or any other open source editor to perform the following steps. You can download Node.js pre-built installer for windows from its official website https://nodejs.org/en/download. Since we are to test this demo server by creating a basic Angular application which can access data from our server, I’d recommend you to install Visual Studio Code editor (which you can download from https://code.visualstudio.com) since it has an integrated Angular CLI interface for your convenience. 

STEP 2: Installing json-server node module 

Assuming you have created a new folder for our server setup. Before installing json server node module, make sure we do have a package.json file within our folder. For that we need to type the following in our terminal

 > npm init

This will prompt you to add properties like package name, version, description etc. We can simply click enter till the end to fill default values and you will see a “package.json” file will be generated with the entries you filled in


 package name: (mimic-api-server)
 version: (1.0.0)
 description: A RESTful API Server
 entry point: (index.js)
 test command:
 git repository:
 keywords:
 author: Akhil
 license: (ISC)
 
 

Alright now we have our package.json file generated, you can check the version of "json-server: ^0.15.0” installed. Let us now install json-server npm module with the following command

 > npm install json-server --save

We now have our node_modules folder generated which contains all the required files for running our json server.

Step 3: Adding data to our server 

Create a .json file named as you like (here we will be using db.json as our data file) under your server project folder. For this, you can simply click on “new file” icon beside your project folder. We will now add the following employee and company dataset to our json file
 
"employees": [
        {
            "id":"1",
            "firstname":"Akhil",
            "lastname":"K",
            "email":"akhil@tinkcode.xyz",
            "companyId":"101"
        },
],
"companies":[
        {
            "id":"101",
            "name":"Google",
            "description":"Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple and Facebook."
        }
    ]
}

I’ve also added a couple more employees and companies in the background as we will require a decent number of data to play around with our angular app that will access these data.

Step 4: Running our server

Since we have our data setup properly, we now have to take our server running for our angular application to connect and access its data. For this, we will require to add the following command

 > json-server --watch db.json

Click on Enter and you will see the following message.



  \{^_^}/ hi!
  Loading db.json
  Done

  Resources
  http://localhost:3000/employees
  http://localhost:3000/companies

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

 
To verify and check our server properties and data on browser, locate the home server mentioned (http://localhost:3000) in your browser and you will find a success message along with the resources it contains.

 

That’s it! Now you have your own REST API server set up locally without an actual server. Now you can create your angular application and access the server and play around with the data we have.


Check out the Official Documentation of Json-Server node module for more information on how to route, filter, sort and apply various operations on our data.

To change the default port, you can simply use the –port option

 > json-server --watch db.json --port 3004

You can also add custom routes, host and access your json file from a remote server using remote schemas and many more…

Documentation:                                           
https://github.com/typicode/json-server/blob/master/README.md




Comments

Post a Comment

Popular posts from this blog

How Pandas Profiling Can Speed up your Exploratory Data Analysis (EDA) in Machine Learning

Image
Pandas Profiling Data analysis is a process of inspecting, cleansing, transforming and modeling data with the goal of discovering useful information, informing conclusion and supporting decision-making. According to Wikipedia, Exploratory Data Analysis is defined as follows In statistics, exploratory data analysis (EDA) is an approach to analyzing data sets to summarize their main characteristics, often with visual methods. A statistical model can be used or not, but primarily EDA is for seeing what the data can tell us beyond the formal modeling or hypothesis testing task. EDA is very important in understanding large datasets while building machine learning models.Generally speaking, EDA is a collection of various findings like Data Quality, Data Spread and Variable Relationships. Data Quality refers to information that define the quality of data and makes sure if is an information is actually necessary for decision making and also helps us determine the overlea
Read more

How to deploy and host your Web Applications on Heroku

Image
Heroku is a cloud platform that lets you build, deliver, monitor and scale applications on the go. Heroku helps the developers to deploy and host their web applications on their cloud platform without having to know much about how their cloud infrastructure actually works. Heroku supports multiple programming environments such as Nodejs, Ruby, Java, PHP, Python, Go, Scala and Clojure. This blog post will discuss about how to deploy your Web Application on Heroku using both  Heroku CLI  and their Web Interface in simple steps. Once you follow these steps, your project will be live under the heroku's free subdomain <your-preferred-name>.herokuapp.com . For this blog post, I've used a sample project called " Incrementer Demo " and the project code is available on github. Using Heroku Command Line Interface (CLI) Step 1 : Download and Install Heroku CLI from Heroku Devcenter • SignUp/Register a free Heroku account • Go to  https://devcenter.heroku.c
Read more