Build RESTful API with React and Loopback (Part 1)

As you know React is a famous JS framework. So we are gonna learn how to use loopback with ReactJs.

What is a LoopBack ?

LoopBack is a framework for creating APIs and connecting them with backend data sources. Built on top of Express, it can take a data model definition and easily generate a fully functional end-to-end REST API that can be called by any client. LoopBack comes with a built-in client, API Explorer.

Before getting started you need the following

• Text Editor ( i prefer VS code https://code.visualstudio.com/ )
• MongoDB — https://www.mongodb.com/download-center/community
• Node.js — https://nodejs.org/en/

Step 1 — Install Loopback from CLI

Im going to use VS code terminal for this. So open a new terminal and type the following command make sure we install this globally using the -g.

npm install -g loopback-cli

Step 2 — Creating the Application

Create a folder to store your application and im going to name it as “car-api”. Now lets go to the VS code and go to File > Open Folder and open the folder “car-api”. After that open a new terminal by going to Terminal > New Terminal or you can use Ctrl + SHIFT + ` keys.

In the terminal type the following command to create a loopback.

lb

Then it will ask some questions from you like below

After that it will install some libraries and wait till it is done.

Then in the terminal type

node .

This will start up the loopback api, To go to loopback explore > press CRT and Right click on the http://localhost:3000/explore. As the blow image.

You will See something like below in your browser after clicking the link

As you can see all the GET users, POST users , DELETE users etc. methods are all ready there in the loopback. This save lot of time of creating the back-end of the application.

Step 3 — Connecting MongoDB

Open your MongoDB. And it will ask some configuration before connecting to the database. Just put the Host name as localhost and the Port as 27017 then press connect.

okay now you have setup the MongoDB. Now lets go back to the VS code Terminal and

type the following code to install the MongoDB connector.

npm install — save loopback-connector-mongodb

After installing the connector we have to connect the connector. Type the following command in the terminal

lb datasource mongoDS — connector mongoDB

This will ask some question from you like below

Database Car is now created. Now go to the datasources.json. you can see something like below

in the datasources.json file it has the information of the database. The “db” is the database that stores the data in the memory and the “mongoDS” is the database that stores the data in the mongoDB database. We are going to delete the “db” part and rename the “mongoDB” as the “db”. We do this because we are using the mongoDB as the database and its easy to rename it to db or else we have to find the all the reference palace where db is and rename it to mongoDS. So after rename the mongoDS to db you will have the datasources.json file like this

Step 4 — Creating Data Model

Run the following command to create data model

lb model

This will again ask some questions about model you are making

After making the model it will ask the property of that model. So we made a model of “car”. Im going to add Name and Price as the properties of the car.

When you are done adding properties hit enter to exit from it.

Now go to to Common folder you will see there are car.json file created. Go to it and you will see the car model and its properties there.

Now lets see this in loopback explorer using the following command and head over to localhost:3000/explorer.

node .

Now you will see 2 models as user and car

Step 5 — Lets add some car items

In the loopback Api Explorer Go to car POST method and enter some data in the value feild in json format and press try it out.

If the data successfully added it will return Response code as 200. So im going to add 4 items like that.

Step 6 — Lets get added Items

In the loopback Api Explorer Go to car GET method and click on Try it out!. You will get the car items you added before.

Congratulation 🎉🎉🎉 you have successfully finished building the back-end of the Car api.

In the next part will be working with front end of the Car api how to display, edit ,delete and add them using a front end client app.

Bye for now

Happy Coding 😆💻😆💻