1
00:00:03,680 --> 00:00:07,640
In order to further develop our application,

2
00:00:07,640 --> 00:00:11,025
we want to setup a simple server

3
00:00:11,025 --> 00:00:14,890
that will serve up our data that is required by our application.

4
00:00:14,890 --> 00:00:18,440
So far, we haven't learned enough about how

5
00:00:18,440 --> 00:00:22,090
we can set up a server that will serve up a REST API.

6
00:00:22,090 --> 00:00:26,410
Instead, we will make use of a simple node module called json-server,

7
00:00:26,410 --> 00:00:32,990
which helps us to quickly set up a simple server that will serve up data that is given

8
00:00:32,990 --> 00:00:36,230
to it in the form of a JSON file and also

9
00:00:36,230 --> 00:00:39,600
serve up images that might be required by our application.

10
00:00:39,600 --> 00:00:41,020
So, to get started,

11
00:00:41,020 --> 00:00:45,450
let's proceed forward to install the json-server node module,

12
00:00:45,450 --> 00:00:50,285
and thereafter, setup our json-server in this exercise.

13
00:00:50,285 --> 00:00:53,945
To get started, go to your convenient location

14
00:00:53,945 --> 00:00:57,550
on your computer and create a folder named json-server.

15
00:00:57,550 --> 00:01:01,820
The reason why I create this folder is that I can store all the files

16
00:01:01,820 --> 00:01:06,170
that are required by my json-server into this particular folder.

17
00:01:06,170 --> 00:01:15,290
Thereafter, we will install the json-server npm module as a global MPM module.

18
00:01:15,290 --> 00:01:16,620
So, to do that,

19
00:01:16,620 --> 00:01:20,305
at the prompt in your terminal,

20
00:01:20,305 --> 00:01:27,430
type npm install minus g json-server,

21
00:01:27,430 --> 00:01:30,575
and then let that complete the installation

22
00:01:30,575 --> 00:01:34,820
of the json-server npm module as a global module.

23
00:01:34,820 --> 00:01:39,525
Now, in case you are doing this on a Linux or a Mac,

24
00:01:39,525 --> 00:01:43,530
make sure to use sudo in front of it.

25
00:01:46,460 --> 00:01:49,520
Once the installation is complete,

26
00:01:49,520 --> 00:01:53,545
go to the instructions for setting up the json-server,

27
00:01:53,545 --> 00:01:56,935
and there, we provide a file named db.json.

28
00:01:56,935 --> 00:02:01,040
Download this file and name it as db.json and move this file

29
00:02:01,040 --> 00:02:05,525
to the json-server folder that you have created in the previous step.

30
00:02:05,525 --> 00:02:10,490
You now see that I have already downloaded the db.json

31
00:02:10,490 --> 00:02:15,500
file and then move that db.json file into the json-server folder.

32
00:02:15,500 --> 00:02:18,830
In addition, I have also created another folder,

33
00:02:18,830 --> 00:02:21,690
inside the json-server folder, named public.

34
00:02:21,690 --> 00:02:26,375
Now, whatever we put in this public folder will be made available by

35
00:02:26,375 --> 00:02:33,630
our json-server as a resource that can be downloaded from our server.

36
00:02:33,630 --> 00:02:40,430
Thus, our json-server acts as a simple static web server that can help us

37
00:02:40,430 --> 00:02:46,770
to serve up any resources like images or even a whole website.

38
00:02:46,770 --> 00:02:50,300
If you want to, you can copy that into the public folder and make it

39
00:02:50,300 --> 00:02:56,925
available to be served up by the json-server and viewed in a browser.

40
00:02:56,925 --> 00:02:59,650
Next, again, go to the instructions,

41
00:02:59,650 --> 00:03:03,915
and then download this zip file name images.zip,

42
00:03:03,915 --> 00:03:05,570
and then unzip this file,

43
00:03:05,570 --> 00:03:08,490
and then you will obtain a folder named images,

44
00:03:08,490 --> 00:03:13,880
which contains a set of PNG images that we will make use of within our application.

45
00:03:13,880 --> 00:03:16,470
So, once the images folder is ready,

46
00:03:16,470 --> 00:03:19,160
move that images folder to the public folder that we have

47
00:03:19,160 --> 00:03:22,665
just created in the json-server folder.

48
00:03:22,665 --> 00:03:24,485
Going to our folder,

49
00:03:24,485 --> 00:03:26,420
you'll see that inside the public folder,

50
00:03:26,420 --> 00:03:31,070
I have already move the images subfolder into the public folder here,

51
00:03:31,070 --> 00:03:36,510
and this contains all the images that will be useful for my application.

52
00:03:36,510 --> 00:03:39,125
To start up your json-server,

53
00:03:39,125 --> 00:03:43,470
go to the json-server folder in your terminal and at the prompt,

54
00:03:43,470 --> 00:03:50,665
type json-server and minus minus watch db.json.

55
00:03:50,665 --> 00:03:54,650
The reason for using this watch flag

56
00:03:54,650 --> 00:03:58,610
is that this json-server will keep a watch on the bb.json file,

57
00:03:58,610 --> 00:04:01,279
and anytime the db.json file is modified,

58
00:04:01,279 --> 00:04:07,810
it will reload the db.json file and start serving up the modified data from the server.

59
00:04:07,810 --> 00:04:13,280
In addition, we can also give a minus d flag with a value,

60
00:04:13,280 --> 00:04:15,035
say, for example, 2,000,

61
00:04:15,035 --> 00:04:19,430
which means that when the server receives a request,

62
00:04:19,430 --> 00:04:25,380
it will serve the data back to the requester after a 2-second delay.

63
00:04:25,380 --> 00:04:31,880
Now, this would be used to simulate delay in accessing a server over the Internet.

64
00:04:31,880 --> 00:04:35,270
So, that's the reason why I would also suggest to use the minus d

65
00:04:35,270 --> 00:04:39,255
2,000 flag for the json-server.

66
00:04:39,255 --> 00:04:41,390
So, let's start up our json-server,

67
00:04:41,390 --> 00:04:44,735
and then you will notice that the json-server starts up

68
00:04:44,735 --> 00:04:49,680
and declares all the resources that are available from the json-server.

69
00:04:49,680 --> 00:04:57,825
So, you can see that it has a set of resources that are available at all these URLs.

70
00:04:57,825 --> 00:05:02,300
In addition, the public static server that serves up

71
00:05:02,300 --> 00:05:07,825
static data is available at this URL, localhost:3000.

72
00:05:07,825 --> 00:05:13,445
Now, you can go to any browser and then if you type in

73
00:05:13,445 --> 00:05:20,515
localhost:3000 and slash dishes,

74
00:05:20,515 --> 00:05:27,020
you will see that this will start serving up our data in the form of JSON array here.

75
00:05:27,020 --> 00:05:30,530
So, this will be useful for our application.

76
00:05:30,530 --> 00:05:37,395
Similarly, you can type leaders,

77
00:05:37,395 --> 00:05:39,110
and you will see, again,

78
00:05:39,110 --> 00:05:41,095
the data being served up and so on.

79
00:05:41,095 --> 00:05:45,760
If you type in the localhost:3000,

80
00:05:45,760 --> 00:05:48,665
you will see that the server will serve up

81
00:05:48,665 --> 00:05:53,395
the data as a static server and then currently, it is empty.

82
00:05:53,395 --> 00:05:57,860
Now, if you want to access the images that are available from the server,

83
00:05:57,860 --> 00:06:06,520
I can just type images and type in the name of a PNG file,

84
00:06:06,520 --> 00:06:10,020
and then you will see that it'll serve up the corresponding image.

85
00:06:10,020 --> 00:06:12,570
Now, this is very useful for us,

86
00:06:12,570 --> 00:06:16,170
as we develop our application in this course.

87
00:06:16,170 --> 00:06:19,169
With this, we complete this exercise,

88
00:06:19,169 --> 00:06:24,560
where we have set up a simple server called the json-server to serve up

89
00:06:24,560 --> 00:06:30,850
data and support a REST API that we can access from our application.