1
00:00:00,210 --> 00:00:00,490
All right.

2
00:00:00,510 --> 00:00:06,750
Hopefully, you were able to spin up concurrently and your result is exactly the same every time you

3
00:00:06,750 --> 00:00:08,220
make change in the server.

4
00:00:08,520 --> 00:00:15,240
We're listening for that as well as the frontend, but we're not done with a setup when it comes to

5
00:00:15,240 --> 00:00:17,210
a front and back end.

6
00:00:17,910 --> 00:00:27,000
So effectively, the way we'll build on Christian will be setting up the logic on a server and in our

7
00:00:27,000 --> 00:00:29,850
React application, we'll be making requests.

8
00:00:30,800 --> 00:00:33,590
But there's a big gotcha right now.

9
00:00:33,950 --> 00:00:41,390
And that is the simple fact that even though we have a server running as well as the frontend since

10
00:00:41,390 --> 00:00:48,140
both of them are on separate servers, we won't be able to communicate between the two.

11
00:00:48,560 --> 00:00:51,020
And technically, this video is optional.

12
00:00:51,320 --> 00:00:54,290
You don't have to a along since I remove the code anyway.

13
00:00:54,590 --> 00:01:01,250
But it's very important for me to showcase the problem and that in the next video, I'll show you possible

14
00:01:01,250 --> 00:01:01,820
solutions.

15
00:01:02,180 --> 00:01:08,540
And the one that we'll hear, and let's just start very simply by navigating the server address.

16
00:01:08,900 --> 00:01:12,110
And let's try to remember that we have this dummy, right?

17
00:01:12,110 --> 00:01:12,410
Correct.

18
00:01:12,740 --> 00:01:15,650
So we have apps that get online, which sound welcome.

19
00:01:16,100 --> 00:01:19,940
Now what do you think is going to happen if I'm going to go to localhost 5000?

20
00:01:20,180 --> 00:01:21,620
And this is not a trick question.

21
00:01:21,830 --> 00:01:28,070
I mean, we should see the welcome correct unless you, I don't know, don't have the browser running

22
00:01:28,070 --> 00:01:28,640
or whatever.

23
00:01:29,240 --> 00:01:30,770
OK, so that kind of makes sense.

24
00:01:31,220 --> 00:01:34,970
So let's also set up dummy right over here again if you don't want to.

25
00:01:35,030 --> 00:01:40,220
You don't have to do this, but it's very important for me to showcase everything in great detail.

26
00:01:40,220 --> 00:01:43,130
So that way you're on the stand for your future projects.

27
00:01:43,520 --> 00:01:45,290
And I'm just going to set up the dummy route again.

28
00:01:45,530 --> 00:01:46,850
I'm going to remove it in a second.

29
00:01:47,120 --> 00:01:52,610
And all that, and here's what I want to do is just take this localhost because remember, the URL is

30
00:01:52,880 --> 00:01:55,700
for slash API, and that's not the gotcha here.

31
00:01:56,000 --> 00:01:58,280
I simply want to go here with Get our son.

32
00:01:58,580 --> 00:02:02,060
And yep, I have the welcome and I'm not going to save this route.

33
00:02:02,150 --> 00:02:03,830
This is just for demonstration.

34
00:02:04,190 --> 00:02:06,110
But here comes the trick question.

35
00:02:06,620 --> 00:02:12,500
If I set up a fetch request in the dashboard page or any of the pages, for that matter.

36
00:02:12,980 --> 00:02:14,030
That's not the trick.

37
00:02:14,030 --> 00:02:15,980
But what do you think is going to happen?

38
00:02:16,430 --> 00:02:19,010
Well, there's only one way to find out, correct?

39
00:02:19,220 --> 00:02:23,600
So let's go to the dashboard and I'm going to start by getting my user effect.

40
00:02:23,790 --> 00:02:27,980
So I'm going to say here import and use effect.

41
00:02:28,370 --> 00:02:34,160
Now that one is coming from react and then let's set up the function, let's set up fetch data.

42
00:02:34,390 --> 00:02:40,850
And even though eventually we will use Axios install everything because it's going to be very useful

43
00:02:41,090 --> 00:02:43,010
as we're progressing with the application.

44
00:02:43,370 --> 00:02:45,620
For now, again, this is just for demonstration.

45
00:02:45,860 --> 00:02:47,670
So let's just use fetch.

46
00:02:47,930 --> 00:02:49,820
Again, that's not the tricky part.

47
00:02:50,210 --> 00:02:56,960
So let's say here, fetch data is equal, not date for data is equal to a sync vine.

48
00:02:56,960 --> 00:03:00,840
We're going to function and then instead of the function body, let's go with councillors.

49
00:03:02,030 --> 00:03:05,360
No one is equal to a weight fetches, built in.

50
00:03:05,360 --> 00:03:10,580
So we don't do anything and always grab a localhost 5000 because I'm just too lazy to type that out.

51
00:03:11,030 --> 00:03:18,050
So it's passing the string gathered and it's good cast and data is equal to weight.

52
00:03:18,050 --> 00:03:20,810
And remember, we need it to run a response.

53
00:03:21,380 --> 00:03:22,340
And Jason?

54
00:03:23,280 --> 00:03:30,090
And then at the very end, we'll go with data and I'll utilize my years effect where I'm just going

55
00:03:30,090 --> 00:03:37,080
to say once the application opens up, basically once I navigate to that more page, well, then I want

56
00:03:37,080 --> 00:03:38,370
to invoke it, correct?

57
00:03:38,820 --> 00:03:43,620
And since I only want to do that when the component mounts kind of makes sense.

58
00:03:44,190 --> 00:03:50,910
If I set up my dependency era and I'm just going to be an empty array and then it's out of my callback

59
00:03:50,910 --> 00:03:56,220
function, let's go with fetch and we're going to go with fetch data in this case.

60
00:03:56,790 --> 00:03:57,840
So let's save it.

61
00:03:58,110 --> 00:04:03,210
And what you'll notice that we're going to get big fat are not technically, we're going to make an

62
00:04:03,210 --> 00:04:06,360
argument that it is because we didn't set up a try catch.

63
00:04:06,360 --> 00:04:11,630
But keep in mind, this will only make sure that our application doesn't break.

64
00:04:11,970 --> 00:04:14,460
We still won't be able to access the data.

65
00:04:14,760 --> 00:04:18,180
So in here, let's go with our like so server.

66
00:04:18,420 --> 00:04:22,770
And yes, our application works, but I hate to break it to you.

67
00:04:23,070 --> 00:04:26,250
We don't have access to the simple, silly Hello.

68
00:04:26,340 --> 00:04:26,730
Why?

69
00:04:27,000 --> 00:04:29,330
Well, I'll talk about it in the next video.

70
00:04:29,670 --> 00:04:36,750
But hopefully this is clear that unless we make some changes to our application, this is not going

71
00:04:36,750 --> 00:04:38,970
to work simply because.

72
00:04:40,010 --> 00:04:48,020
Both of our applications are living on separate servers, so we have one localhost 5000 thousand one

73
00:04:48,080 --> 00:04:49,220
local host, 3000.

74
00:04:49,400 --> 00:04:53,570
And then in the next video, I'll cover what are the solutions?

75
00:04:54,110 --> 00:05:00,530
And also what is going to be approach at the very, very end once we push this up to a production?