1
00:00:00,940 --> 00:00:06,790
In this video we're going to start to set up this Jason server as our API server for our project.

2
00:00:06,790 --> 00:00:12,550
So I'm going to flip back over to my terminal now I want you to recall that at present we have our application

3
00:00:12,610 --> 00:00:14,490
running inside of one terminal window.

4
00:00:14,580 --> 00:00:20,480
I'm going to start up a second terminal window and navigate to my stream's directory.

5
00:00:20,500 --> 00:00:22,720
So this is a second terminal window that it's running.

6
00:00:22,720 --> 00:00:27,730
In addition to the one that is running my Reebok server and inside the streams directory I see that

7
00:00:27,730 --> 00:00:29,800
client project right there.

8
00:00:29,800 --> 00:00:34,930
So inside of streams we are going to create a second project folder and the second project folder is

9
00:00:34,930 --> 00:00:40,450
going to hold all the code related to the JS on server or the API server that we are trying to set up.

10
00:00:40,450 --> 00:00:44,270
So these are going to be two completely separate servers.

11
00:00:44,290 --> 00:00:49,310
All right so inside my streams directory I'm going to make a new folder called simply server.

12
00:00:49,510 --> 00:00:50,600
Let's call it API.

13
00:00:50,730 --> 00:00:52,570
It doesn't really matter what we call it.

14
00:00:52,690 --> 00:00:54,960
And then all change into that directory.

15
00:00:55,420 --> 00:01:00,760
Then inside if you're going to start to generate a new package not just on file by running the command

16
00:01:00,820 --> 00:01:02,240
NPM in it.

17
00:01:02,680 --> 00:01:05,650
When I enter that command I'm going to be asked a series of questions here.

18
00:01:05,680 --> 00:01:13,190
I'm going to hit enter enter enter like so now after we run it like that we can then list out the files

19
00:01:13,220 --> 00:01:17,120
inside of the API directory and we'll see the package shapes on file.

20
00:01:17,120 --> 00:01:26,410
So the reason we just generated a package such a file is so that we can install this Jaison server library.

21
00:01:26,430 --> 00:01:35,360
So back inside my terminal I'm not going to run an install desktop save Jason Desch server like so.

22
00:01:35,390 --> 00:01:35,620
All right.

23
00:01:35,630 --> 00:01:39,800
That's just going to take a second or two to install some skin to let it do its thing after that is

24
00:01:39,800 --> 00:01:45,340
all done installing and then going to auto open up my code editor inside the API directory.

25
00:01:45,530 --> 00:01:47,450
Right now our code editor isn't open.

26
00:01:47,450 --> 00:01:49,640
Inside the client directory.

27
00:01:49,670 --> 00:01:53,880
So inside of API we're going to open up my code editor.

28
00:01:53,890 --> 00:01:54,590
All right.

29
00:01:54,590 --> 00:01:57,380
Perfect.

30
00:01:57,410 --> 00:02:01,670
Now I'm going to flip back over to the Jay Sun server documentation really quickly if you scroll down

31
00:02:01,670 --> 00:02:07,520
just a little bit you'll notice that this thing essentially says we can create a D-B chase on file and

32
00:02:07,520 --> 00:02:13,040
then any record so we try to save this API server will be automatically stored inside of this DVD case

33
00:02:13,040 --> 00:02:14,100
on file.

34
00:02:14,180 --> 00:02:19,760
So you and I are going to draft out a quick little DVD on file that is only going to have a resource

35
00:02:19,760 --> 00:02:22,440
type of streams.

36
00:02:22,580 --> 00:02:26,510
So inside of the API directory I'm going to make a new file called D-B.

37
00:02:26,590 --> 00:02:33,240
Jason and then inside of here we're going to write out some Jaison now Jaison is not javascript even

38
00:02:33,240 --> 00:02:38,220
though it's going to look really similar to it inside of here we're going to make an empty object that

39
00:02:38,220 --> 00:02:41,090
has a key of stream's.

40
00:02:41,100 --> 00:02:42,990
Notice how I am using double quotes here.

41
00:02:42,990 --> 00:02:47,820
You have to use double quotes inside of Jaison for any key and we'll say that this is going to be an

42
00:02:47,820 --> 00:02:49,340
empty array.

43
00:02:49,380 --> 00:02:53,550
So as we start to create some streams inside of our application those streams are going to be added

44
00:02:53,580 --> 00:02:55,700
as just some records to this array right here.

45
00:02:55,770 --> 00:03:00,330
And over time you're going to see that this chase on file automatically gets some more data added to

46
00:03:00,330 --> 00:03:01,960
it as we use our application.

47
00:03:02,100 --> 00:03:07,140
So you can you essentially imagine this D-B that some file is like an actual database.

48
00:03:07,140 --> 00:03:11,610
It's not a real database but it's serving as a database.

49
00:03:11,730 --> 00:03:17,540
So we're going to save this file and then we're going to open up our package not just on file inside

50
00:03:17,540 --> 00:03:23,340
if you're going to find the script section and I'm going to delete the default script of test we're

51
00:03:23,340 --> 00:03:29,970
going to write a new script inside of it that's going to start up and run the Jaison server to do so.

52
00:03:30,000 --> 00:03:35,370
We're going to add on a new script with the name of start again making sure that we use double quotes

53
00:03:35,370 --> 00:03:46,600
here and then for the value we're going to put in Jason dash server dash P three thousand and one dash

54
00:03:46,610 --> 00:03:50,430
deep WCSB D-B Jaison like so.

55
00:03:50,840 --> 00:03:56,630
So this is going to start up the JS on server running on port three thousand one and it's going to watch

56
00:03:56,630 --> 00:04:00,370
the DB database on file for any changes that get made to it.

57
00:04:00,380 --> 00:04:05,470
So now we can save this we can close the package not just on file.

58
00:04:05,650 --> 00:04:10,990
I'm going to close the DVD case on file and then I'm going to close my editor I opened up inside the

59
00:04:10,990 --> 00:04:12,170
API directory.

60
00:04:12,320 --> 00:04:18,250
That's literally all the code we have to write to get the DBI or the API server up and running.

61
00:04:18,250 --> 00:04:23,170
Now flip back over to my terminal still inside the API directory and inside of here I'm going to run

62
00:04:23,510 --> 00:04:25,680
NPM start like so.

63
00:04:25,870 --> 00:04:27,020
And that's pretty much it.

64
00:04:27,280 --> 00:04:33,820
So you'll notice that we now have a listed resource here at localhost three thousand one slash streams.

65
00:04:33,940 --> 00:04:39,460
So now we can make use of this chase on server to manipulate the list of streams that are stored inside

66
00:04:39,460 --> 00:04:40,440
the API server.

67
00:04:40,510 --> 00:04:44,310
By following all of these restful conventions.

68
00:04:44,920 --> 00:04:50,050
So if we want to get a list of all of our streams we are going to make a get request to localhost three

69
00:04:50,060 --> 00:04:55,180
thousand one slash streams if we want to get a particular stream we'll make a request to localhost three

70
00:04:55,180 --> 00:05:00,930
thousand one stream slash ID if we want to delete a stream we'll make a delete type request to slot

71
00:05:01,030 --> 00:05:05,590
local host three thousand one streams slash and then the ID of the record we want to delete.

72
00:05:05,860 --> 00:05:08,260
So like I said really easy to get started with.

73
00:05:08,260 --> 00:05:13,780
JS on server and because it follows these restful connections so closely as long as you understand the

74
00:05:13,800 --> 00:05:19,210
restful conventions you don't have to look at any documentation whatsoever you just are going to follow

75
00:05:19,210 --> 00:05:24,900
these conventions and you will be able to work with all the records that are stored by that D-B server.

76
00:05:24,910 --> 00:05:29,590
All right now lesing want to mention here is that from now on inside this application we're now going

77
00:05:29,590 --> 00:05:32,160
to be running two separate terminal windows.

78
00:05:32,290 --> 00:05:38,180
We've got one terminal window for our re-act application and one window for RJC on server.

79
00:05:38,200 --> 00:05:42,700
So if for any reason you have to stop working on this application and come back to it at some point

80
00:05:42,700 --> 00:05:47,700
in the future you're going to open up to terminal windows one inside the API directory.

81
00:05:48,590 --> 00:05:53,990
And then one inside the client directory and inside both these windows you're going to run NPM start.

82
00:05:54,130 --> 00:05:58,130
I don't do that right now because you'll probably see an error message but you get the idea if you ever

83
00:05:58,130 --> 00:06:03,820
start this again in the future and people start in both client and API.

84
00:06:03,860 --> 00:06:04,250
All right.

85
00:06:04,250 --> 00:06:05,090
So this looks great.

86
00:06:05,090 --> 00:06:08,040
We've now got an API server to store our list of streams.

87
00:06:08,160 --> 00:06:09,300
So let's take a quick pause.

88
00:06:09,320 --> 00:06:13,730
When we come back the next video we're going to make sure that from our stream it creates a component

89
00:06:13,970 --> 00:06:15,740
whenever a user submits our form.

90
00:06:15,770 --> 00:06:21,060
We attempt to make a post request to our API server and create a new stream record.