1
00:00:00,150 --> 00:00:06,360
And once have talked and talked and talked about it for what it seems to be like a half an hour now,

2
00:00:06,360 --> 00:00:10,470
I want you to take a look at the research that I provided in reading me.

3
00:00:10,740 --> 00:00:14,340
So notice here we have create React app proxy.

4
00:00:14,880 --> 00:00:17,310
And this is the documentation for it.

5
00:00:17,610 --> 00:00:19,560
And then this is going to be the code.

6
00:00:20,010 --> 00:00:23,640
So let me navigate there, and then I'm just going to basically explain what's happening.

7
00:00:24,060 --> 00:00:29,250
And once you get here, I strongly suggest reading the first, I don't know, three paragraphs.

8
00:00:29,670 --> 00:00:35,190
Yeah, I think three is going to be more enough where they explain everything in great detail.

9
00:00:35,580 --> 00:00:37,920
I just want to mention two things first.

10
00:00:39,050 --> 00:00:46,400
Once we have this in package, Jason, the proxy and then our own server, you know, which in our case

11
00:00:46,700 --> 00:00:54,140
is going to be 5000 on our front end application will be able to go with fetch or access, and auctions

12
00:00:54,140 --> 00:00:59,560
will install access and then forward slash and line whatever is the endpoint.

13
00:00:59,690 --> 00:01:02,780
Like I said, well, that's all, that's jobs.

14
00:01:03,110 --> 00:01:06,230
And hopefully you get the gist of that's point number one.

15
00:01:06,530 --> 00:01:10,490
And then second, this only works in development.

16
00:01:11,360 --> 00:01:17,870
So if you have a situation where your front end react application is going to be hosted separately from

17
00:01:17,870 --> 00:01:22,080
your server, which is the case, these are the questions that I'm getting in my note.

18
00:01:22,270 --> 00:01:27,290
For example, you need to keep in mind that this setup is not going to be affecting that.

19
00:01:27,860 --> 00:01:32,780
So you'll have to figure out how to do that from your own hosting provider.

20
00:01:33,380 --> 00:01:34,310
It's not going to be the case.

21
00:01:34,550 --> 00:01:36,830
This is only in development again.

22
00:01:37,130 --> 00:01:41,110
In our case, we'll build them as static assets at the end of the day anyway.

23
00:01:41,630 --> 00:01:47,720
So we'll fix that issue this way and it's going to be hosted on the same server.

24
00:01:48,630 --> 00:01:54,120
But if you don't have that situation, this only works in development, and this is very, very important,

25
00:01:54,130 --> 00:01:57,000
and therefore I am being annoying and repeating that.

26
00:01:57,180 --> 00:02:01,740
So let's finally set this up where I want to go back to my story first.

27
00:02:01,920 --> 00:02:04,470
And like I said, this was just to showcase some stuff.

28
00:02:04,830 --> 00:02:09,930
So remove the course here and I'll remove the course over here as well.

29
00:02:10,229 --> 00:02:14,370
Then I want to navigate to my client client package, Jason.

30
00:02:14,880 --> 00:02:15,960
Extremely important.

31
00:02:16,170 --> 00:02:20,460
Please do not set this up on the server and I'm going to go here.

32
00:02:20,850 --> 00:02:27,270
So these are my React commands, so I know that I'm in the proper place and now we want to go with proxy

33
00:02:27,810 --> 00:02:30,510
online and we want to provide the URL.

34
00:02:30,750 --> 00:02:34,690
Now, in my case, I remove the trailing slash if you want.

35
00:02:34,710 --> 00:02:38,880
You can add that, but you have to remember that pretty much every time you set this up.

36
00:02:39,030 --> 00:02:44,310
So let me go to my dashboard here and I'll grab this one over here.

37
00:02:44,670 --> 00:02:52,320
So the localhost 5000, let's actually cut this out one minute, and then let's go back to the proxy

38
00:02:52,320 --> 00:02:54,930
copy and paste, and let's remove the efforts.

39
00:02:55,410 --> 00:03:01,710
Now also one thing to keep in mind, and actually, I have to add that here is the fact that we need

40
00:03:01,710 --> 00:03:02,800
to restart everything.

41
00:03:02,820 --> 00:03:07,740
So let's go here with a restart and then I'm just going to say app.

42
00:03:08,220 --> 00:03:11,670
So you know that we're actually restarting the concurrently.

43
00:03:11,670 --> 00:03:13,110
So stop it over here.

44
00:03:13,410 --> 00:03:15,180
Let's go with npm start.

45
00:03:15,510 --> 00:03:19,260
And then where I have the dashboard, I simply want to go with 4GB.

46
00:03:19,290 --> 00:03:19,680
That's it.

47
00:03:19,920 --> 00:03:21,090
That's all we have to do.

48
00:03:21,870 --> 00:03:22,830
We want to save it.

49
00:03:23,130 --> 00:03:30,510
And now you'll notice that not only I can successfully access the data without that annoying course.

50
00:03:31,200 --> 00:03:37,730
I can also skip the entire local 5000 part, and technically everything works.

51
00:03:38,130 --> 00:03:43,920
But there's another and I specifically wanted to discuss this error because it's something that I think

52
00:03:43,920 --> 00:03:50,430
that you should be aware of where when we set up the proxy, we are talking about the fallback.

53
00:03:50,520 --> 00:03:51,600
Now what do I mean by that?

54
00:03:51,630 --> 00:03:55,380
Well, notice over here how we're just looking for a forward slash, correct?

55
00:03:56,240 --> 00:04:02,140
But when we're talking about the forward slash, actually, that is going to be our own indexation email,

56
00:04:02,540 --> 00:04:05,600
well, this is why we get this weird bug here.

57
00:04:05,750 --> 00:04:07,450
Unexpected, though, can blow over.

58
00:04:07,880 --> 00:04:09,980
And if you want to console.log, you'll see the response.

59
00:04:10,310 --> 00:04:12,690
So essentially, there is a successful response.

60
00:04:12,710 --> 00:04:13,820
This is just that.

61
00:04:13,820 --> 00:04:17,870
I'm trying to convert this into adoration now where I'm going with this.

62
00:04:18,529 --> 00:04:25,100
Back on the server, instead of just having this forward slash and then bumming around, I might leave

63
00:04:25,100 --> 00:04:26,630
this one just in case.

64
00:04:26,780 --> 00:04:30,070
So maybe there's a time when I want to showcase something in a browser again.

65
00:04:30,080 --> 00:04:32,480
We can always remove those suckers later.

66
00:04:32,840 --> 00:04:36,980
But for the time being, I'm just going to go with API and then version one.

67
00:04:37,310 --> 00:04:37,640
Why?

68
00:04:37,670 --> 00:04:40,730
Well, because all our APIs are going to start like this.

69
00:04:41,030 --> 00:04:48,080
We're going to go with API version one and let's just say here API and now it's going to happen back

70
00:04:48,080 --> 00:04:48,920
on the dashboard.

71
00:04:49,220 --> 00:04:54,970
If I add here API and then version one, you manage that everything works.

72
00:04:54,980 --> 00:04:57,140
So now I can clearly see the API.

73
00:04:57,470 --> 00:04:59,960
So essentially this is treat it as a fallback.

74
00:05:00,260 --> 00:05:07,040
So if you don't have that resource on your React server, advantage is going to be like, OK, so have

75
00:05:07,040 --> 00:05:07,640
this proxy.

76
00:05:07,640 --> 00:05:09,140
You have this localhost 5000.

77
00:05:09,470 --> 00:05:11,820
Let me go and take a look at all of that.

78
00:05:11,850 --> 00:05:18,740
Now, if I'll add here something like random, then I should get back the error because there is no

79
00:05:18,740 --> 00:05:19,490
resource correct.

80
00:05:19,730 --> 00:05:21,170
So we get back four or four.

81
00:05:21,410 --> 00:05:22,100
That's a start.

82
00:05:22,340 --> 00:05:29,380
And then the second one we get of these chase on error because we're not able to convert it into education.

83
00:05:29,720 --> 00:05:34,430
I know that this was somewhat long VIDEO Probably for setting up the proxy.

84
00:05:34,430 --> 00:05:39,440
But in my opinion, it's very important that you understand these nitty gritty details because in my

85
00:05:39,440 --> 00:05:46,190
opinion, it will help you tremendously when you had some kind of bugs, especially while you're pushing

86
00:05:46,400 --> 00:05:48,290
your project up to production.

87
00:05:48,650 --> 00:05:51,800
So let me remove the random part here.

88
00:05:52,160 --> 00:05:58,310
I mean, just take a look that, yes, I'm able to set up successful requests, and now let me just

89
00:05:58,310 --> 00:06:01,430
simply showcase that I can still access the data.

90
00:06:01,760 --> 00:06:08,660
So let me comment on the API one and back to the data one, and you'll notice that in a console, I

91
00:06:08,660 --> 00:06:09,620
still see the jump.

92
00:06:09,860 --> 00:06:13,280
So just to recap, this is going to be treated as a fallback.

93
00:06:13,580 --> 00:06:19,520
So we're looking for the resource and if it's not on our server, then we're going to use our proxy

94
00:06:19,540 --> 00:06:26,080
rather now in order to add it, we need to go to packaged JSON me to go with proxy and learn whatever

95
00:06:26,090 --> 00:06:29,660
is the URL we need to restart the server.

96
00:06:29,660 --> 00:06:32,180
So market that is going to be concurrently.

97
00:06:32,420 --> 00:06:39,410
And lastly, it is only going to work while you're developing online when you push this up to production.

98
00:06:40,010 --> 00:06:48,530
You'll have to figure out which option you pick, whether we'll use React Build to build this up as

99
00:06:48,530 --> 00:06:52,430
static assets and then serve them on the express server.

100
00:06:52,640 --> 00:06:58,820
But if you decide to host them on different platforms, meaning to front an application and manage the

101
00:06:59,030 --> 00:07:05,720
server application, then you have to add some configuration options that are provided by your hosting

102
00:07:05,720 --> 00:07:06,260
provider.