1
00:00:01,310 --> 00:00:04,970
All right, let's take a look at how we're going to solve scenario number two, so to make sure that

2
00:00:04,970 --> 00:00:09,980
we can make a request from our browser over to our local API and have it get routed automatically over

3
00:00:09,980 --> 00:00:12,050
to our running react app development server.

4
00:00:12,430 --> 00:00:15,770
We're going to build up a proxy inside of the local API.

5
00:00:16,580 --> 00:00:20,230
We're going to make a proxy whenever we receive a request from the browser.

6
00:00:20,450 --> 00:00:25,010
We're going to say that if it is not a request that is trying to fetch a list of cells and if it's not

7
00:00:25,010 --> 00:00:29,930
requested it's trying to save a list of cells, then we will just assume that it is some request that

8
00:00:29,930 --> 00:00:33,880
is intended to go over to our create, react up and get some development files.

9
00:00:34,490 --> 00:00:40,430
So we're going to a proxy that incoming request over to localhost PT. three thousand, which is presumably

10
00:00:40,430 --> 00:00:42,350
where our REACT application is running.

11
00:00:43,160 --> 00:00:45,070
This proxy is going to for the request over.

12
00:00:45,710 --> 00:00:48,090
We're going to get whatever development files we are looking for.

13
00:00:48,110 --> 00:00:51,650
So that might be our indexed HTML files and JavaScript files, whatever else.

14
00:00:52,040 --> 00:00:55,070
And we're going to send the response back over to the browser automatically.

15
00:00:55,880 --> 00:01:00,800
This proxy is going to be implemented with the packets we install just a little bit ago called HTTP

16
00:01:00,800 --> 00:01:02,090
Proxy Middleware.

17
00:01:02,870 --> 00:01:05,390
Let's go back over to our browser and make use of this right away.

18
00:01:07,300 --> 00:01:10,090
Excuse me, my our editor there we go now to Browsr.

19
00:01:11,210 --> 00:01:16,850
OK, so inside of our inducts file, I'm looking at our search function at the very top, I'm going

20
00:01:16,850 --> 00:01:23,750
to import great proxy middleware from HTTP proxy middleware.

21
00:01:27,020 --> 00:01:31,730
Right after we create our express application, we're going to wire up this proxy, we're going to say

22
00:01:32,390 --> 00:01:33,800
app use.

23
00:01:35,350 --> 00:01:40,720
Great proxy middleware, we're going to call it, and provide a configuration object.

24
00:01:41,820 --> 00:01:47,040
Our target will be HTP localhost three thousand.

25
00:01:49,100 --> 00:01:55,820
We are going to enable WebSocket supports, and we do that by putting a true react out by default uses

26
00:01:55,820 --> 00:02:00,890
WebSocket to tell the browser whenever some development file is changed because you might have changed

27
00:02:00,890 --> 00:02:02,000
a file instead of your editor.

28
00:02:03,290 --> 00:02:07,640
And then finally, we're also going to put in a log level of silence that's going to make sure that

29
00:02:07,640 --> 00:02:10,940
the proxy middleware doesn't try to log every incoming request.

30
00:02:11,270 --> 00:02:15,380
If you enable that, then you're going to see a lot of output scroll by in your terminal very quickly.

31
00:02:15,530 --> 00:02:17,170
And it's not really very useful information.

32
00:02:17,180 --> 00:02:20,150
So it's going to turn off all logs coming from the proxy middleware.

33
00:02:21,940 --> 00:02:22,260
All right.

34
00:02:22,320 --> 00:02:23,020
Let's say this.

35
00:02:24,040 --> 00:02:25,660
We're then going to go back over to our terminal.

36
00:02:28,830 --> 00:02:33,420
I'm going to stop the second copy of Serv that we were running just a moment ago.

37
00:02:34,710 --> 00:02:37,750
Here's the copy of Served that we're running on four thousand five.

38
00:02:38,100 --> 00:02:41,370
We do have to restart this because we just made a change to our.

39
00:02:42,210 --> 00:02:42,840
It's going to stop.

40
00:02:42,840 --> 00:02:44,430
It started back up.

41
00:02:46,510 --> 00:02:51,280
And then going to also make sure that I still have my other terminal window where we are running NPM

42
00:02:51,280 --> 00:02:56,980
run start on our route project, so our route project director, remember, we set up everything inside

43
00:02:56,980 --> 00:03:01,750
of llena to run three different commands at once, one for our local API, one for the Seelie and one

44
00:03:01,750 --> 00:03:02,440
for the ReachOut.

45
00:03:02,950 --> 00:03:07,600
So this is my terminal window still running that if you close that terminal window at any point in time,

46
00:03:07,600 --> 00:03:12,130
all you have to do is open another terminal window, go back to our route project directory and do an

47
00:03:12,130 --> 00:03:13,650
NPM run, start inside there.

48
00:03:14,170 --> 00:03:19,690
And so you just want to make sure that you have something saying that to create reactivates running.

49
00:03:20,440 --> 00:03:22,420
I saw the message of it just a moment ago.

50
00:03:22,630 --> 00:03:26,260
Well, somewhere inside of you or something that says, yeah, create react app is definitely running.

51
00:03:27,010 --> 00:03:27,350
All right.

52
00:03:27,350 --> 00:03:28,750
So let's now go back over to our browser.

53
00:03:30,520 --> 00:03:35,870
So I should be able to go to localhost three thousand and see our REACT application appear.

54
00:03:35,920 --> 00:03:39,960
So this is normal behavior, totally normal, nothing strange here whatsoever.

55
00:03:40,630 --> 00:03:47,140
But now we should also be able to go to our local API, which is at localhost four thousand five, and

56
00:03:47,140 --> 00:03:49,270
also see our REACT application up here.

57
00:03:50,310 --> 00:03:56,400
And in fact, we do so this is a sign that we are accessing our local API, but the request we are making

58
00:03:56,400 --> 00:04:01,620
is being automatically proxy over to our REACT app and we're getting all of our different development

59
00:04:01,620 --> 00:04:03,780
assets and then send them back over to the browser.

60
00:04:04,740 --> 00:04:08,060
Now, at this point in time, you might be wondering why are we going through this process?

61
00:04:08,070 --> 00:04:13,140
Why don't we just connect directly to localhost three thousand and get connected to our reachout directly?

62
00:04:13,560 --> 00:04:18,420
We'll remember the entire point here is that eventually we're going to have our local API that is not

63
00:04:18,420 --> 00:04:23,700
only serving up these react assets, but it's also going to be the source and destination of all changes

64
00:04:23,700 --> 00:04:24,780
to cells that we make.

65
00:04:25,260 --> 00:04:30,150
In addition, when we eventually are running our application inside of a kind of production style environment,

66
00:04:30,170 --> 00:04:31,800
in other words, on the user's machine.

67
00:04:32,720 --> 00:04:36,920
We are not going to have any running ReachOut server is just not going to exist.

68
00:04:37,160 --> 00:04:40,250
Instead, the only thing that we're going to be running is our local API.

69
00:04:40,910 --> 00:04:46,460
So we are connecting to our REACT application through the local API to more closely simulate what is

70
00:04:46,460 --> 00:04:48,640
going to go on in a production environment.

71
00:04:50,100 --> 00:04:54,090
All right, so now we've got this scenario to kind of take care of here, we're going to take a quick

72
00:04:54,090 --> 00:04:57,450
pause, come back and then start to address scenario number one as well.