1
00:00:00,920 --> 00:00:07,370
In the last section we use the Create react up tool to generate a brand new client side re-act project.

2
00:00:07,460 --> 00:00:12,740
I'm now in my server directory Still if I list out all the different files and folders I have inside

3
00:00:12,740 --> 00:00:16,130
of here I should now see a new folder called client.

4
00:00:16,400 --> 00:00:21,970
This client Fuller is what houses everything having to do 3x side of our application.

5
00:00:22,160 --> 00:00:27,230
If I change into that directory and then list out all the different files I can now see a couple of

6
00:00:27,230 --> 00:00:30,100
different things that are related to just the reac side.

7
00:00:30,320 --> 00:00:35,160
So this is all stuff that we got for free when we generated our new project.

8
00:00:35,180 --> 00:00:40,670
Now the first thing I want to tell you about this new re-act project that we just generated is that

9
00:00:40,670 --> 00:00:49,040
it has its own built in server OK and has its own built in server in order to start up the react side

10
00:00:49,040 --> 00:00:50,980
of our up of our application.

11
00:00:51,020 --> 00:00:55,980
We can run the command NPM start while inside of the client directory.

12
00:00:55,980 --> 00:01:01,010
It's all run NPM start and then we'll get a little message that says OK we're setting up the development

13
00:01:01,010 --> 00:01:03,350
server any second now.

14
00:01:03,560 --> 00:01:04,030
There we go.

15
00:01:04,040 --> 00:01:09,350
So starting the development server we get automatically kicked over to the browser you should have a

16
00:01:09,350 --> 00:01:13,380
tab open up automatically that tries to take you to localhost.

17
00:01:13,440 --> 00:01:19,100
Colin 3000 and then if you try visiting that and wait just a couple of minutes for the development server

18
00:01:19,110 --> 00:01:20,260
is finished starting up.

19
00:01:20,360 --> 00:01:25,420
You'll then see some boiler plate that we got for free when we generated the re-act application.

20
00:01:25,530 --> 00:01:30,400
And OK so here it is the application is now available on localhost 3000.

21
00:01:30,470 --> 00:01:34,420
And if I go back over to the browser Here's the re-act application.

22
00:01:35,650 --> 00:01:36,010
OK.

23
00:01:36,020 --> 00:01:40,590
So let's figure out how to change some stuff inside that project back inside my code editor.

24
00:01:40,700 --> 00:01:42,520
I can now find the client directory.

25
00:01:42,800 --> 00:01:44,890
I'll find the SIRC folder.

26
00:01:45,140 --> 00:01:49,580
I'll find the outtalk J.S. file and will do the very classic change here.

27
00:01:49,620 --> 00:01:55,880
I need to find the H-2 that says welcome to react and I'm going to replace it with something else and

28
00:01:55,880 --> 00:02:00,440
I'm going to say my classic thing for testing stuff out which is high there.

29
00:02:00,500 --> 00:02:01,600
So make that change.

30
00:02:01,610 --> 00:02:04,630
I'm going to save the file when I go back over to the browser.

31
00:02:04,640 --> 00:02:07,620
The application is going to automatically refresh.

32
00:02:07,670 --> 00:02:08,880
So there it is right there.

33
00:02:09,050 --> 00:02:10,330
And here's our change.

34
00:02:10,490 --> 00:02:11,170
OK.

35
00:02:11,870 --> 00:02:16,460
So that's pretty much it for getting the development server for the re-act side of our application started

36
00:02:16,520 --> 00:02:17,700
up and running.

37
00:02:18,200 --> 00:02:24,350
Now before I take things too far or before we go too far and into detail about what's going on here

38
00:02:24,830 --> 00:02:27,550
you might have a little bit of a question.

39
00:02:27,590 --> 00:02:33,130
You might say Steven Riak application has its own server.

40
00:02:33,140 --> 00:02:36,010
Why does the re-act application have its own server.

41
00:02:36,020 --> 00:02:37,910
We've already got the Express application.

42
00:02:37,940 --> 00:02:45,810
Why aren't we using Express to like do this re-act stuff that is a very good question.

43
00:02:45,980 --> 00:02:49,970
And when I was kind of like steering you away in the last section by saying there's going to be some

44
00:02:49,970 --> 00:02:53,130
really confusing stuff all that confusing stuff.

45
00:02:53,150 --> 00:03:00,710
It all comes down to the fact that we now have a second server running for our development environment.

46
00:03:00,740 --> 00:03:01,270
OK.

47
00:03:01,340 --> 00:03:07,100
The fact that we now have a second server is what is going to cause us at some point a lot of headache

48
00:03:08,210 --> 00:03:11,570
only the headache on the part of figuring out how this stuff works internally.

49
00:03:11,660 --> 00:03:13,100
The actual set up of everything.

50
00:03:13,100 --> 00:03:16,080
Again I can't say it enough will be straightforward.

51
00:03:16,100 --> 00:03:21,260
So with that in mind I want to give you a couple different reasons that we are going to make use of

52
00:03:21,260 --> 00:03:24,730
a separate development server for the re-act side of our application.

53
00:03:24,830 --> 00:03:29,030
And I also want to show you a diagram that just very clearly lays out how things are now going to be

54
00:03:29,030 --> 00:03:30,950
structured in our application.

55
00:03:30,950 --> 00:03:33,210
So let's look at the kind of overall architecture.

56
00:03:33,210 --> 00:03:35,520
First so at the very top.

57
00:03:35,530 --> 00:03:39,400
We've got our browser down here we have this new re-act server.

58
00:03:39,640 --> 00:03:43,810
And then over here we've got the Express server which we've been working on a whole bunch throughout

59
00:03:43,810 --> 00:03:44,840
this course.

60
00:03:44,860 --> 00:03:49,000
Now you have a good idea of what's going on with the express server already because we put it together

61
00:03:49,000 --> 00:03:49,510
right.

62
00:03:49,750 --> 00:03:55,150
The Express server pulls some information out of Mongo D.B and then it can respond to requests that

63
00:03:55,150 --> 00:04:00,790
the browser makes with some amount of Jaison or something that says like hey here's your user user model

64
00:04:00,820 --> 00:04:04,920
or here's how you go through the Auth. flow and all that kind of good stuff.

65
00:04:04,930 --> 00:04:12,730
So the Express server is really solely concerned with generating Jason data and nothing else that serves

66
00:04:12,730 --> 00:04:13,210
data.

67
00:04:13,210 --> 00:04:16,550
It doesn't do a darn thing besides that.

68
00:04:16,600 --> 00:04:22,990
Now the re-act side of our application however this re-act server is going to eventually take a bunch

69
00:04:22,990 --> 00:04:24,670
of different component files.

70
00:04:24,670 --> 00:04:27,850
So these are all you can imagine being re-act components right here.

71
00:04:27,850 --> 00:04:32,920
It's going to take them all together it's going to bundle them all together using web pack and babbel

72
00:04:33,610 --> 00:04:39,760
and then it's going to spit out a single bundle that G-S file that will be loaded up into the browser

73
00:04:40,450 --> 00:04:46,180
so it can now kind of imagine that we've got one server for serving up our front end application assets

74
00:04:46,600 --> 00:04:51,020
and then the second server that serves up all the different data inside of our application.

75
00:04:51,120 --> 00:04:52,300
OK.

76
00:04:52,720 --> 00:04:56,710
Now this still doesn't quite answer the question of why we have two servers.

77
00:04:56,860 --> 00:05:01,750
Why couldn't we just like stick these things together and figure out some way for the express server

78
00:05:01,750 --> 00:05:04,380
to generate and build our re-act application.

79
00:05:04,720 --> 00:05:08,730
Well you know what I'll be honest with you we absolutely could do that.

80
00:05:08,740 --> 00:05:12,650
That is absolutely unequivocally without a doubt an option.

81
00:05:12,790 --> 00:05:18,700
We could say that we want to figure out how to build our really smart expressed server and inside of

82
00:05:18,700 --> 00:05:24,010
that server was going to be all the logic for building our re-act application and serving it up to the

83
00:05:24,010 --> 00:05:24,830
browser.

84
00:05:25,030 --> 00:05:26,060
Right something like this.

85
00:05:26,070 --> 00:05:27,460
We get to figure that out.

86
00:05:27,490 --> 00:05:29,970
Great pain.

87
00:05:30,160 --> 00:05:32,670
Well not me you know me not a lot of pain but we can figure it out right.

88
00:05:32,680 --> 00:05:34,540
It wouldn't have been the worst thing in the world.

89
00:05:34,840 --> 00:05:41,260
So the reason that we are using two separate servers here is one just very simple one very straightforward

90
00:05:41,290 --> 00:05:48,160
and simple reason and that is the fact that create re-act app is bar none the best way to get started

91
00:05:48,160 --> 00:05:54,940
with building re-act applications create re-act out has so much pre-built configuration already placed

92
00:05:54,940 --> 00:06:03,720
into it that it's going to save us so much time in trying to wire together web pack and babbel and the

93
00:06:03,730 --> 00:06:04,600
development server.

94
00:06:04,620 --> 00:06:09,640
You know all this bundling stuff and all these other dependencies all the CSSA handling all these other

95
00:06:09,640 --> 00:06:16,300
well-packed plug ins all this stuff we get just out of the box for free with create re-act out.

96
00:06:16,300 --> 00:06:22,090
And so just using create react to operate here saves us a tremendous amount of time and is worth this

97
00:06:22,120 --> 00:06:27,700
extra development or this extra time it takes to figure out exactly how to make the two of them work

98
00:06:27,700 --> 00:06:29,410
together nicely.

99
00:06:29,410 --> 00:06:34,750
So at the end of the day the reason we're using the separate re-act server is that using Briac create

100
00:06:34,750 --> 00:06:41,160
re-act out is absolutely worth it and it gives us a ton of awesome functionality right out of the box.

101
00:06:41,200 --> 00:06:45,760
So rather than setting up all of this re-act stuff from scratch we're going to be spending some time

102
00:06:45,970 --> 00:06:51,220
just figuring out how to make the server and the Express server work together nicely.

103
00:06:51,220 --> 00:06:56,610
And again I'm going to say for the third time now getting them to work together nicely is very simple

104
00:06:56,680 --> 00:06:59,550
very straightforward and we're going to start it in the next section.

105
00:06:59,620 --> 00:07:02,450
It is understanding how they work together.

106
00:07:02,560 --> 00:07:04,820
That is where a lot of these challenges come from.

107
00:07:05,030 --> 00:07:07,040
OK.

108
00:07:07,090 --> 00:07:07,690
All right.

109
00:07:07,690 --> 00:07:14,080
So with that said now we've got a little bit of a better idea of this overall architecture right here.

110
00:07:14,260 --> 00:07:15,370
Let's take a quick break.

111
00:07:15,370 --> 00:07:19,360
When we come back in the next section we're going to figure out how to get these two things to work

112
00:07:19,360 --> 00:07:22,540
together nicely and we'll just go out and do it.

113
00:07:22,540 --> 00:07:24,270
So I'll see you in the next section.