Adding JSON Server

[00:00:00]
>> Let's start to look at how to start to build this out and turn this into something that resembles more a real life application. So, Let's go ahead and just kind of a bonus module, I'm going to show you how to use JSON server real quick. And this is going to allow us to remove the hard coded data within our components.

[00:00:37]
So the first thing we're gonna do here. We're going back to the command line and In a new tab, although, Yeah, let me just close this down real quick and we're just going to go. Yarn add Json-server, Save-dev So take just a second And why this is doing this, I am going to, Make a directory.

[00:01:22]
So make directory. We're gonna call it server. And I'm going to touch server.db.json. And so all I've done now is in the code. At the very very root, I've just created the server folder with this db.json file. And then from here, let's go, Widgets. And so I'm just defining a very basic json structure.

[00:01:56]
This is actually an array and we'll go json is And so we know that it is remote, we'll go remote Mock Widget 01, and description is going to be pending all right? And let's just copy this two more times. And if somebody is running a timer, I think I've been invested into this task.

[00:02:45]
For a matter of about, I don't know, three to five minutes at this point. All right, there we go. Good, and I'm gonna save this. Then I'm just going to update our package.json. And that Escape button will be the death of me. We're going to add one more command.

[00:03:23]
So I think it's interesting that. Mpm in and of itself is turned out to be a pretty powerful build tool that I am certainly not shy about jumping in and adding commands to kind of streamline. It makes things more descriptive. So writing a new command serve json, and from here, it's just Jason server.

[00:03:49]
And then we're just gonna point it to db.json. Let's go back into our command line and, I'm going to, Npm run serve : all. But then in here, I'm going to go npm run serve : json. There we go, json serve, words do matter. All right, let's try this again.

[00:04:30]
So, what this allows us to do is from here, local host, 3000 Helloworld And I think we may have some port conflicts a problem I'm gonna spend too much time on this, but Let me just double check and make sure. One second here. Let's do this.
>> This is saying json server not server, but I thought you already fixed that.

[00:05:32]
>> Yeah, I got that. Okay, probably might have copied this wrong, But I think I got it right. So it's one of these fluky things that you live to regret about, but, Let's try this one more time. Yeah, I think I did hold on. Apparently these are different.

[00:06:10]
[LAUGH] Awesome. Now wait for it. It totally make sense in HindSite. All right, let's try this one more time. There we go, boom! Celebrate good times, come on. All right, so now if I go here To see that it's pointing to the json file, and we can consume this.

[00:06:49]
And so if I even go here, 1 or its widgets rather or two So this is the fastest way to get up and running with a REST API.