Create in 5 minutes a REST API that returns data in JSON format. It would be a fake web service with test data, but ideal for learning and prototyping frontend applications with a client-side Javascript framework, implemented…
Create in 5 minutes a REST API that returns data in JSON format. It would be a fake web service with test data, but ideal for learning and prototyping frontend applications with a client-side Javascript framework, implemented with json-server.
In this article we are going to see how we can create a REST API in less than 5 minutes, which we can use for teaching purposes or for prototyping, ideal when we are learning to develop with a client-side Javascript framework, or when we have to make an application. frontend without having to entertain ourselves with backend development.
The idea is to achieve a perfectly functional API, which supports the typical operations of any standard REST API, offering the usual operations through the different HTTP verbs, but without having to invest hours of our time to provision it. This type of web services are known as “API RESR fake”, because they are really false data, only for testing purposes.
In order to be so fast we will use a simple JSON file as a data source, where we can generate our data model, with different entities, and test data. As REST server we will use a program called “json-server”, developed with NodeJS that offers us the possibility of having a web server that responds to typical API operations.
The REST API that we are going to create will be perfectly functional, that is, it will perform all possible operations on our data (reading, modifying, inserting and deleting), storing the data in the JSON file. The persistence of the data is done in the JSON text file itself, in this way, in future accesses to the web application, the API will remember its state, keeping all the activity that has been carried out over time.
At the end of the article you will also see a video that explains the entire process and shows how to do it in a few minutes.
Note: If you are not clear about what REST is, I recommend that you read the article by Eduard Tomàs that explains it very well and very quickly. Even if you have an idea of what a REST API is and you want to complete the information and know more details about this type of resource, reading will be very useful for you.
Download json-server
The first step to have our API is to download and install json-server. This program is a NodeJS package that we will install via npm.
Note: If you do not have NodeJS you must install it on your computer. It is very simple entering and following the instructions for installation. We also recommend the , where you will find useful information about “Node”. The “npm” package manager is automatically installed during the installation of NodeJS on your machine.
We will carry out the following command in our terminal:
npm install -g json-server
The npm package manager will install json-server with all its dependencies. Meanwhile, we can go to the next step.
Create a JSON file with the data from our API
In any folder on our computer we must create the JSON file that will serve as a data source for our API. The data will be those that we need in our application and in the JSON itself a set of test data can be introduced from the beginning.
Note: You can It’s not really a plain text file anymore, which you’ll save with UTF-8 encoding. The notation to define the data is done as if it were a Javascript object. When working with JSON, a definition of the data model is not carried out as it is done in a relational database, since this data model is defined through the data itself.
We can see a sample dataset, in the following JSON, that stores movies and a set of movie ratings.
{ “movies”: , “ratings”: }
This JSON file will typically have a .json extension. In our case we could save it as “peliculas.json”. In this way we already have all the code we will need to create our fake REST API with some initial data, although we could also perfectly place a JSON without data, where we only have the entities defined (the main arrays of the things we are going to handle, although no initial information.
Start the Fake REST API server
As the third and last step to have our API working, we must start the API server, that is, our recently installed json-server. We also do this from the terminal, with the following command.
json-server –watch movies.json
Immediately we will see that a series of messages appears indicating how we could access our data source, through the URLs of the server, or the URLs of the resources or entities generated in the JSON.
Access the API
Now we only have to access the API. You will actually be able to get into the “home” of the json-server for your API via a URL like this:
http://localhost:3000
On that page you will find links to the different resources of your API. If you open them you will see that it returns JSON data like most REST APIs. The operations that you will be able to carry out on the API are the typical ones and it is operated basically by means of the verbs of the HTTP. It’s really no different here than any other API you might use.
In addition, the API is perfectly enabled to invoke it from other domains thanks to having CORS enabled, or if desired using .
In summary, in less than 5 minutes we have an API working that will be perfect for us to carry out our Javascript programming on the client side with access to data from an API. As we have said, this JSON server is more focused on educational purposes or also on prototyping a web project or mobile App.
A separate study object would be the access to that data, which you will generally do with Ajax, using a framework like or a library like , or at least with .
Authentication in JSON-Server
A super useful topic that you may want at some point, to facilitate all the frontend application prototyping plots, is to have an authentication module on JSON-Server. This topic is not trivial and to do it you need to know something about NodeJS and Express, which is precisely the language and framework on which JSON-Server is built.
If you are interested in this matter, I recommend reading the article by , where I explain a modification I made to this software, how to install it, how to create users and authorize/authenticate.
API creation video
Below you can see the entire process of creating the REST API in video.
Facebook Comments
Disqus