Build & test an API using JSON-Server

This is really interesting. Brad Traversy’s Create a Fake REST API with JSON-Server video follows on from my learning post about Node.js with The Coding Train’s tutorials.

I’m being pulled in 2 directions at this time, 1/ Trying to get my head around using APIs and building them & 2/ Creating a Node.js server somewhere where I can run a site using it.

At this point I’ll go back to exploring the API and building one, I want to get an understanding of their structure and how to call and manage them, so this is useful.

I just found this web scraper tutorial by Brad Traversy which is what i want to do after this post:

Fake API for testing

So there is a github repository where you can use their remote connection to test using that API, but you can only use GET, you can’t alter the data, whereas if you build your own you can test your front end with data structured as you want it to consume, also you can test other requests like POST. In the video he uses Postman to update fields, so can test to see if structure correct. Go here for github page typicode / json-server

So, followed along with the first video tutorial up to starting the server

>npm run json:server

I had some trouble as my JSON file was not formatted properly, so server wouldn’t start and got lots of ERRORS. So searched for an online JSON formatter to check my JSON file, you need “” double quotes around all key pairs (apart form numbers).

So once the JSON file was corrected I had no problem starting the server.

In Brad’s video he then uses POSTMAN to update the data, this is something that I want to test, to see how to alter, add to or delete from the file.

So , in the browser can use queries such as below you can use to query the json file:

  • http://localhost:3000/companies/?
  • http://localhost:3000/companies/1/users
  • http://localhost:3000/users/1

postman

In postman you need to set to a Post request, in Headers tab you need to put content type as application/json and in Body set to RAW

And then run the post request. On checking with a GET request there are 3users, so that worked fine

so with patch I just gave Zoe a middle name , I’d left the comma at the end and it didn’t like that, also I identified it as http://localhost:3000/users/2 in the URL, and it all worked. Cool

End comment

This is a good exercise, and using postman with it allows me to see about getting, posting, patching and deleting,and I’ve built a JSON file. I need to think of things I want to put into a JSON file for consuming. I could store it on Github and call the raw data.

One interesting point that I did hit, that CodeTrain man talked about was CORS error where API could only be used from a Server request, not a client request. I think it was series 3 about 2nd or 3rd video in. I had that issue I think with Stats NZ or else the Sharemarket one.

I’m glad I’ve done this exercise, a good bit of learning on JSON structure. Now i have this method of talknig with an API structure with Postman & JSON server I can start to extend the complexity of the JSON format.