1
00:00:01,210 --> 00:00:04,630
Now that we understand the general architecture that we're going for, we're going to take a look at

2
00:00:04,630 --> 00:00:06,550
two possible ways of implementing this.

3
00:00:07,330 --> 00:00:10,930
The first way that we're going to take a look at implementing that architecture is going to be one way

4
00:00:10,930 --> 00:00:13,170
to put it all together very easily.

5
00:00:13,210 --> 00:00:17,920
It's me, very simple, very straightforward way of implementing what we just saw on the last diagram.

6
00:00:18,550 --> 00:00:22,600
After we take a look at this very easy way of putting things together, we're then going to take a look

7
00:00:22,600 --> 00:00:27,850
at a much more challenging way, way, way, way, way more challenging way of putting all the same

8
00:00:27,850 --> 00:00:28,560
stuff together.

9
00:00:29,260 --> 00:00:31,180
Why are we taking a look at both approaches?

10
00:00:31,210 --> 00:00:35,830
Well, in this course, we're going to go with the much more challenging solution of putting this out

11
00:00:35,830 --> 00:00:36,270
together.

12
00:00:36,670 --> 00:00:40,210
We're going to make things just way more complicated than they need to be.

13
00:00:40,510 --> 00:00:45,250
And the reason for that is that, well, we're in a course and because we are inside of a course, I

14
00:00:45,250 --> 00:00:50,020
want to show you the more advanced way, the more challenging way, the more kind of in-depth way of

15
00:00:50,020 --> 00:00:51,330
putting all this stuff together.

16
00:00:51,340 --> 00:00:54,940
I don't want to just keep out and say, oh, yeah, here's how you can just hack this stuff together

17
00:00:54,940 --> 00:00:55,540
very easily.

18
00:00:56,170 --> 00:01:00,670
We'll go into a little bit more on why this approach is more challenging in just a moment and exactly

19
00:01:00,670 --> 00:01:03,310
why we are going to take the more challenging approach right now.

20
00:01:03,310 --> 00:01:07,610
Let's just focus on how we can very easily set up an architecture like this right here.

21
00:01:08,050 --> 00:01:10,710
OK, so here's the very easy and straightforward approach.

22
00:01:11,560 --> 00:01:12,010
Right now.

23
00:01:12,010 --> 00:01:16,630
We are making use of racked up, as you probably well know, when we generate a new reactor up, we

24
00:01:16,630 --> 00:01:21,070
get a couple of different scripts created for us inside of our package JSON file.

25
00:01:21,440 --> 00:01:25,150
I'm going to go back over to my editor very quickly and find where those scripts already find.

26
00:01:26,850 --> 00:01:33,900
So here's my packages on file, I'm going to go down to my scripts section right here, and as I just

27
00:01:33,900 --> 00:01:37,200
mentioned, we get a couple of scripts created for us automatically.

28
00:01:37,470 --> 00:01:39,150
Two of them are start and built.

29
00:01:39,720 --> 00:01:43,650
The start script starts up the development server that is the command that we are very familiar with

30
00:01:43,650 --> 00:01:44,010
running.

31
00:01:44,430 --> 00:01:48,960
We've also got build, which we can use to build our production ready bundle for all of our different

32
00:01:48,960 --> 00:01:49,740
react assets.

33
00:01:50,400 --> 00:01:56,160
It's a very easy way that we can implement this architecture right here would be to just add in another

34
00:01:56,160 --> 00:02:00,480
script to our packages on file, and we might call this something like serve.

35
00:02:00,990 --> 00:02:06,030
And if we run the serve command, we might run some code that's going to start up a local node API.

36
00:02:06,330 --> 00:02:12,390
So by local node API, I mean a copy of node or really of express running directly on the user's machine.

37
00:02:12,600 --> 00:02:15,870
That's going to do those three different tasks we just mentioned in the last video.

38
00:02:16,870 --> 00:02:20,530
So let me just very quickly show you how we might put this thing together.

39
00:02:20,710 --> 00:02:22,100
You don't have to write out any of this code.

40
00:02:22,120 --> 00:02:27,880
I'm going to delete it very quickly to back inside of my packaged JSON file, I might add, in some

41
00:02:27,880 --> 00:02:28,900
kind of serve commands.

42
00:02:29,680 --> 00:02:34,450
And whenever I run surf or really a user run surf, because it will be up to our users to run the server

43
00:02:34,450 --> 00:02:34,900
command.

44
00:02:36,220 --> 00:02:38,230
I might decide to run something like Noad.

45
00:02:39,900 --> 00:02:42,480
Local AP J.S..

46
00:02:43,420 --> 00:02:47,950
Then inside of my project directory, I might create that local API JS file.

47
00:02:48,890 --> 00:02:54,800
And then inside of here, I might import, express or required in.

48
00:02:55,630 --> 00:03:02,590
I might then set up a couple of different routes, maybe one route to serve up react production assets,

49
00:03:02,900 --> 00:03:08,320
so that's really our entire bundled react application, all the components we've been putting together.

50
00:03:09,340 --> 00:03:13,480
I might create another route to save a list of.

51
00:03:14,800 --> 00:03:16,270
Sells into a file.

52
00:03:17,320 --> 00:03:25,300
And then one more route that we could use to load up a list of cells from a file and then at the very

53
00:03:25,300 --> 00:03:30,190
bottom, I can have my express server listen on Port 40, 50.

54
00:03:32,340 --> 00:03:36,420
So this is all implementation, we could add indirectly to this local API JS file.

55
00:03:37,250 --> 00:03:42,890
Whenever a user runs, this serve, script will then start listening on ports.

56
00:03:43,200 --> 00:03:44,840
I put four thousand five right there.

57
00:03:45,790 --> 00:03:47,620
Just to be consistent with, say, 40, 50.

58
00:03:48,870 --> 00:03:52,380
So that's going to start up our express application on localhost 40, 50.

59
00:03:54,200 --> 00:03:58,250
And our express server is going to do everything we just listed out inside these comments, so one route

60
00:03:58,250 --> 00:04:03,170
to serve up all the react production assets, one for saving a list of cells into a file and one for

61
00:04:03,170 --> 00:04:04,700
loading up a list of cells as well.

62
00:04:05,210 --> 00:04:09,770
So all this functionality, we can very easily pack into just one single file or maybe a couple if this

63
00:04:09,770 --> 00:04:11,250
file ends up getting really large.

64
00:04:11,990 --> 00:04:17,779
So, again, this is one way of implementing all this stuff in a very simple and straightforward fashion.

65
00:04:17,779 --> 00:04:22,820
We're just adding in one additional script to a great ReachOut project, and that is pretty much it.

66
00:04:23,510 --> 00:04:29,450
We can then figure out some way to deploy our ReachOut project to NPM so that users could install our

67
00:04:29,450 --> 00:04:34,640
project as an NPR module and then run it from the command line, like exactly how you see it right there

68
00:04:35,150 --> 00:04:36,290
and then be that, be it.

69
00:04:36,290 --> 00:04:37,130
That's the whole thing.

70
00:04:37,130 --> 00:04:40,150
We can solve all this stuff very, very easily.

71
00:04:40,460 --> 00:04:42,800
But again, we're not going to take the easy way.

72
00:04:42,800 --> 00:04:44,880
We're going to take the much more challenging way.

73
00:04:45,410 --> 00:04:46,410
So let's take a pause right here.

74
00:04:46,430 --> 00:04:46,940
We can come back.

75
00:04:46,940 --> 00:04:47,570
Next video.

76
00:04:47,600 --> 00:04:52,400
We're going to discuss exactly why we are taking a more challenging way, what benefits it actually

77
00:04:52,400 --> 00:04:55,730
gives us and what the more challenging way is anyways.

78
00:04:56,060 --> 00:04:58,300
So a quick pause and cover all that in just a moment.