Create a Fake REST API with JSON-Server

In this video I am going to show you how to install a fake REST API using an incredible tool called JSON-Server. This is used for mocking and prototyping and is something that I personally use all of the time. It is useful to anyone building frontend apps with something like Angular, React, etc.

CODE: Download the files

JSON CRASH COURSE:

SPONSORS:

BECOME A PATRON: Support me directly for even $1 per month
ONE TIME DONATIONS:

FOLLOW TRAVERSY MEDIA:

[surajbhatt]

you made my day. thanks a lot.
i was working on a react web app and i got stuck in between with json server . i searched a lot and eventually i got here and now i just learned all i wanted. thanks again !

[albopoker]

hello sir...today i have a job in nodejs because of you ...the very basics of node i got to learn from you...thank you very much for that...and your content is absolutely amazing....THANK YOU.

[froggerabc]

It's great finding devs like you who can be bothered to set up with real world examples and not just 'sdf' or 'abc'
Web dev now is a bit of a chore to set up like this from scratch - Thank you very much. New sub :)

[muzz]

I originally did your HTML5 course on Udemy then stumbled across you here on youtube. Your style really helps me learn and I really appreciate all the free stuff you give out!

[mageKnightz]

In case you are struggling with why these relationships are even working in the first place, it's all about the singular and plural name of the resource and resourceId.

Taking from Brad's example: if you want to have a bunch of users related to specific companies, you would have an array of objects "users" and another "companies". If you set up a property like "companiesId=1" and then an "id='1'" in one of the companies' array, that would not work when you type - it will only show the full list from companies. BUT if you define "companyId=1" inside an object inside the users array, then that will work. This worked also with another example I was building: I have a bunch of "flows" that will live inside "steps": I named stepsId inside flow and it wouldn't work. The moment I renamed it to stepId, it worked. This is very weird and I couldn't find any explanation to why this is like this in the JSON-server docs, and I had to figure it out myself (I'm not even sure I figured it out correctly)...

[johnnydriesen]

Bookmarked this vid in July 2017.
Watching it again today (late September 2021)
Still very useful.
Thanks for all the effort you're doing since YEARS, Brad.

[philippebaillargeon]

Traversy Media is easily one of the best cs learning channel on youtube.

[plor]

Hands down one of the best teachers. Good pace. Just the right amount of context needed to understand what you're doing and what's happening. Thank you!

[Khalyomede]

I did knew about json placeholder web api but I was not aware of any Node.js alternative, which seems to come very handy when you do not have that time to build your database on your own. Great resource, thank you :)

[ghostgutarist]

Last time I used ServerDummies, it takes JSON structure I want, even field names and data formats and gives me an API that can be directly used in the application. No hassle at all.

[tblancog]

These videos you make are so easy to understand, keep up the good work!! Thanks!!

[AbhishekShukla-fbgu]

Your videos are very easy to understand. Very helpful for beginners like me. Thank you Brad :)

[maciejc]

Thank you for yet another very useful video :) I know, that you've already made one tutorial about JS Testing lately, but I personally think, that this is very important topic for new developers and also people, that want to get hired one day and start professional career in IT. Of course all your videos are great and I'm really greatful, but it would be so beneficial to have something like full-fledged crash course about JS Testing from you :)

[jasperzanjani]

keep in mind that if you accidentally make your directory "json-server" with a hyphen, npm won't install the package in there. And also keep in mind that you can't even run the "json-server" command from the command line if it is not installed globally

[muzafferhassan]

thanks Brad... you always inspired me through your videos... please don't stop to create such simple and useful tutorials...

[odincoding]

Thanks for the great video! I have been looking for this exact package but I couldn't remember the name or find it, great to see an in depth run-through of it

[austineokenu]

This was really helpful. I was able to install and build my test json server for my project. Thank you very much

[KrunalDharamshi]

Very helpful for a mobile app dev as well... will be trying it in my next project.. thanks

[MoebiusS]

I don't understand where the dependency between "companyID" in "users" and "id" in "companies" is beeing made. How does JSON-Server understand that relationship??? That's like it would understand the meaning of the word "company" and its plural form "companies".

[mohammadjouza]

You are the best, really thank you for every single second you spend to explain the thing in an easier and an awesome way.