1
00:00:00,050 --> 00:00:00,440
All right.

2
00:00:00,440 --> 00:00:06,410
And once we can create the users, we can set up the jobs we can log out.

3
00:00:06,440 --> 00:00:09,020
We can also modify the user.

4
00:00:09,050 --> 00:00:14,830
Now let's switch back to the front end and let's start building our pages.

5
00:00:14,840 --> 00:00:19,250
And actually, the first thing we want to do is to set up a proxy.

6
00:00:19,490 --> 00:00:26,450
You see, by default, browsers do not allow access resources from different servers.

7
00:00:26,570 --> 00:00:29,480
And please keep in mind something very, very important.

8
00:00:29,510 --> 00:00:33,800
That's the case in our scenario when we are in development.

9
00:00:33,830 --> 00:00:40,880
We have a server which is running essentially on one port, so that's one server.

10
00:00:40,910 --> 00:00:42,230
That's our front end.

11
00:00:42,230 --> 00:00:48,530
And then we have our server which is running on at least in my case, 5100.

12
00:00:48,560 --> 00:00:53,570
So those are two different servers and I'll showcase in a second how.

13
00:00:54,360 --> 00:00:58,800
Browser will yell and scream at you if you try to access the resource.

14
00:00:58,800 --> 00:01:05,670
So long story short, we'll have to set up a proxy which will allow us to make that request.

15
00:01:05,700 --> 00:01:11,100
Now it's only needed while we're in development.

16
00:01:11,130 --> 00:01:16,260
Once we go to production, all the front end code will be on the same server.

17
00:01:16,470 --> 00:01:18,540
And again, you'll see that a little bit later.

18
00:01:18,570 --> 00:01:20,810
Of course, once we deploy the application.

19
00:01:20,820 --> 00:01:26,580
Now in our case, it's also a must since we're sending back the cookies.

20
00:01:26,580 --> 00:01:30,540
And one major thing we need to always keep in mind.

21
00:01:30,660 --> 00:01:35,820
Cookies are only sent back to the same server.

22
00:01:35,940 --> 00:01:42,030
So again, in our case, it's a must for us to have a proxy and one by one.

23
00:01:42,060 --> 00:01:44,500
Let's spin up both servers.

24
00:01:44,520 --> 00:01:47,280
So first we're going to go over here with NPM run dev.

25
00:01:47,280 --> 00:01:55,600
So this is going to spin up my server server, basically a back end server and also I want to spin up

26
00:01:55,600 --> 00:01:56,890
the V one.

27
00:01:56,890 --> 00:01:58,280
So let's go over here.

28
00:01:58,300 --> 00:02:04,510
I'll open up a new terminal and I'm going to navigate to a client and I'll sign out.

29
00:02:04,720 --> 00:02:07,630
In next video we'll set up a.

30
00:02:08,289 --> 00:02:11,230
Functionality to have only one command, but that is coming up.

31
00:02:11,380 --> 00:02:12,400
So for now.

32
00:02:12,430 --> 00:02:16,720
CD Client And then once we're there, remember the command is exactly the same.

33
00:02:16,720 --> 00:02:18,970
So we go here with NPM run dev.

34
00:02:19,210 --> 00:02:23,800
So now I have here the backend as well as the frontend.

35
00:02:23,830 --> 00:02:28,930
Now let me open up the front end because I do want to showcase some stuff over here.

36
00:02:29,320 --> 00:02:30,850
Think I have two tabs.

37
00:02:30,850 --> 00:02:31,690
I don't need them.

38
00:02:31,690 --> 00:02:38,500
It doesn't really matter which page you open since we'll set up the functionality in the main JS So

39
00:02:38,500 --> 00:02:43,360
here's what I want to do first in a server, I'll just create the dummy root.

40
00:02:43,360 --> 00:02:49,510
And as a quick side note, if you don't want to follow along as far as making a request which is going

41
00:02:49,510 --> 00:02:54,610
to fail, you don't have to just make sure that you watch till the end and you add this code.

42
00:02:54,730 --> 00:02:55,420
This is a must.

43
00:02:55,420 --> 00:03:00,040
Again, if you're not going to have this code, then you won't be able to follow along.

44
00:03:00,040 --> 00:03:06,610
But I also suggest actually doing this one because we will utilize it a little bit later as well when

45
00:03:06,610 --> 00:03:09,070
we start working with the Axios again.

46
00:03:09,160 --> 00:03:10,920
That's just my suggestion.

47
00:03:10,930 --> 00:03:16,390
Long story short, let's go to a server and let's set up a dummy root.

48
00:03:16,570 --> 00:03:18,880
So somewhere there it doesn't really matter.

49
00:03:18,880 --> 00:03:20,410
Again, we will remove it.

50
00:03:20,620 --> 00:03:22,420
This is just to showcase how.

51
00:03:23,250 --> 00:03:25,000
Of the proxy is going to work.

52
00:03:25,020 --> 00:03:26,430
I'm just going to go with APT get.

53
00:03:26,430 --> 00:03:28,320
So it's going to be a get request.

54
00:03:28,320 --> 00:03:29,580
Pretty straightforward.

55
00:03:29,610 --> 00:03:33,240
Then API, then version one over here.

56
00:03:34,220 --> 00:03:37,160
And then we want to go with forward slash test.

57
00:03:37,310 --> 00:03:42,440
Again, it doesn't really matter what we have over here as long as you remember the actual URL.

58
00:03:42,470 --> 00:03:42,830
Okay.

59
00:03:42,860 --> 00:03:47,420
And as far as the controller, well, let's just send back res.json.

60
00:03:47,690 --> 00:03:51,790
And inside of it, we're going to go with message and we'll say test route.

61
00:03:51,800 --> 00:03:53,660
So pretty straightforward.

62
00:03:53,660 --> 00:03:54,290
Correct.

63
00:03:54,470 --> 00:03:57,560
Now let's navigate to our front end.

64
00:03:57,800 --> 00:03:59,150
So client over here.

65
00:03:59,150 --> 00:04:05,240
And like I said, I'll be setting up everything in the main JSX because we will remove this code eventually

66
00:04:05,240 --> 00:04:10,130
and there's no need to set it up in a specific page when we submit the form or anything like that.

67
00:04:10,130 --> 00:04:16,070
No, I just want to run this when my application loads since in my opinion it's going to be easier to

68
00:04:16,070 --> 00:04:16,760
test it.

69
00:04:16,790 --> 00:04:18,950
So what do I want to do over here?

70
00:04:18,950 --> 00:04:26,480
Well, I want to showcase how we won't be able to fetch the message from our backend.

71
00:04:26,660 --> 00:04:27,290
Why?

72
00:04:27,290 --> 00:04:30,790
Well, because browsers, again, don't allow such behavior.

73
00:04:30,800 --> 00:04:36,820
So let's try over here in the main JSX first, let's go fetch, which is always available.

74
00:04:36,830 --> 00:04:43,640
Then as far as the URL, we're going to go with Http colon, then two forward slashes local.

75
00:04:44,590 --> 00:04:46,300
Host then.

76
00:04:47,390 --> 00:04:49,850
Colon, then 5100.

77
00:04:49,850 --> 00:04:55,430
And then remember the URL was API version one and then test.

78
00:04:55,460 --> 00:04:57,470
Now this returns a promise.

79
00:04:57,470 --> 00:04:59,270
So we want to go with Dot then.

80
00:04:59,660 --> 00:05:03,710
Then we want to actually pass in the callback function.

81
00:05:04,500 --> 00:05:09,270
I'm going to call this raise and I want to return a rest dot Json.

82
00:05:10,340 --> 00:05:11,180
I want to invoke it.

83
00:05:11,180 --> 00:05:13,900
And at the very, very end, I want to grab the data.

84
00:05:13,910 --> 00:05:16,190
So this returns another promise.

85
00:05:16,190 --> 00:05:22,400
And again, we pass in a callback function data and then I want to log the data.

86
00:05:22,430 --> 00:05:27,690
Now, don't worry, we won't need to use such syntax in the upcoming requests.

87
00:05:27,710 --> 00:05:30,380
This is just for demonstration purposes.

88
00:05:30,470 --> 00:05:32,180
So let's save it.

89
00:05:32,180 --> 00:05:35,350
I can guarantee you that this code is correct.

90
00:05:35,360 --> 00:05:37,850
I mean, unless I made some bug.

91
00:05:37,910 --> 00:05:39,590
So let me navigate over here.

92
00:05:39,590 --> 00:05:41,840
Let me refresh and check it out.

93
00:05:41,840 --> 00:05:48,860
In the console, you'll have big fat errors, access to fetch at URL from origin, blah blah blah blah

94
00:05:48,860 --> 00:05:49,430
blah.

95
00:05:49,730 --> 00:05:52,580
Essentially we cannot make such request.

96
00:05:53,190 --> 00:05:54,330
Now, what's the solution?

97
00:05:54,330 --> 00:05:59,760
Well, we want to set up the proxy again on the front end during development.

98
00:05:59,850 --> 00:06:02,940
And after that, everything is going to be correct.

99
00:06:02,940 --> 00:06:08,970
And again, in our case, it's super, super important because even though there are different ways

100
00:06:08,970 --> 00:06:15,060
how we can solve this issue, in our case, we need to make sure that the front end, as well as the

101
00:06:15,060 --> 00:06:20,730
back end are on the same server since we're sending back the cookie.

102
00:06:20,880 --> 00:06:23,040
So the fix is following.

103
00:06:23,100 --> 00:06:32,270
We want to go to a Readme and we want to navigate to v2 dot config js and we want to add this code.

104
00:06:32,280 --> 00:06:41,760
Now I strongly suggest to copy and paste this because while I was developing I made a small typo and

105
00:06:41,760 --> 00:06:43,020
I believe I spent.

106
00:06:43,560 --> 00:06:45,540
From half an hour to one hour.

107
00:06:45,570 --> 00:06:48,210
Basically trying to find the solution.

108
00:06:48,480 --> 00:06:52,370
And at the end of the day, I just realized that there's a small typo.

109
00:06:52,380 --> 00:06:53,730
So here's what we want to do.

110
00:06:53,760 --> 00:07:00,290
We want to grab this server object and we want to set it up here in define config.

111
00:07:00,300 --> 00:07:07,320
And once you have it in place, then we'll make the request and then I'll go over the code essentially

112
00:07:07,320 --> 00:07:08,170
what it's doing.

113
00:07:08,190 --> 00:07:09,660
Now you have multiple options.

114
00:07:09,660 --> 00:07:13,050
You can either just grab the server or you can take the entire thing.

115
00:07:13,080 --> 00:07:21,440
Again, I strongly suggest to utilize the Readme to avoid some unnecessary small bugs.

116
00:07:21,450 --> 00:07:23,010
So let me take this.

117
00:07:23,430 --> 00:07:26,790
I'm going to navigate to my VS config at the moment.

118
00:07:26,820 --> 00:07:31,650
Notice we only have plugins for React, so essentially we want to replace it.

119
00:07:31,680 --> 00:07:37,470
Now of course if you have different port, make sure that you utilize that value.

120
00:07:37,740 --> 00:07:45,730
Now we want to navigate to main JS and what's really cool since we're using the proxy, since we're

121
00:07:45,760 --> 00:07:51,760
on the same server, we actually don't need the localhost part anymore.

122
00:07:51,790 --> 00:07:52,410
That's it.

123
00:07:52,420 --> 00:07:54,560
I can simply remove it.

124
00:07:54,580 --> 00:07:56,020
So that's the first step.

125
00:07:56,020 --> 00:07:57,520
And second.

126
00:07:58,090 --> 00:08:01,270
Now everything is going to work as expected.

127
00:08:01,270 --> 00:08:04,720
So now let me navigate back and check it out.

128
00:08:04,750 --> 00:08:10,240
If you see in the console message and the test route, then everything works.

129
00:08:10,270 --> 00:08:10,650
Again.

130
00:08:10,660 --> 00:08:13,840
If you have some issues, please, please, please stop.

131
00:08:13,870 --> 00:08:15,360
Try to troubleshoot.

132
00:08:15,370 --> 00:08:16,780
Use the course Q&A.

133
00:08:16,900 --> 00:08:22,540
You won't be able to follow along unless you see this message in the console.

134
00:08:23,190 --> 00:08:27,210
If you don't see it, that means the proxy is not working properly.

135
00:08:27,210 --> 00:08:32,460
And if that's the case, again, you won't be able to make any requests.

136
00:08:32,490 --> 00:08:36,450
Now, as far as this code, what's happening over here?

137
00:08:37,260 --> 00:08:44,550
And basically all the requests in our application, in our front end application that are going to go

138
00:08:44,550 --> 00:08:51,460
to forward slash API are going to be directed to this URL.

139
00:08:51,480 --> 00:09:00,720
We will change the origin, which actually is going to fix the cause issue and also we will rewrite

140
00:09:00,720 --> 00:09:03,040
the path and remove the API.

141
00:09:03,060 --> 00:09:10,920
And as far as the rewrite, we're going to modify the path with the regular expression to remove the

142
00:09:10,920 --> 00:09:12,700
API prefix.

143
00:09:12,720 --> 00:09:16,350
And with this in place, we can move on to the next step.