1
00:00:01,000 --> 00:00:01,460
All right.

2
00:00:01,460 --> 00:00:05,760
After a whole bunch of lecturing it is finally time to actually write some code and whatnot.

3
00:00:05,760 --> 00:00:09,560
So in this video let's do a quick overview of some of the setup that we're going to go through rather

4
00:00:09,560 --> 00:00:10,790
quickly.

5
00:00:10,790 --> 00:00:11,180
All right.

6
00:00:11,240 --> 00:00:14,460
So here's the general architecture of what we're going to initially try to build.

7
00:00:15,260 --> 00:00:18,530
What's running inside of our browser is going to be a react application.

8
00:00:18,590 --> 00:00:24,200
This react application is going to communicate the ad network request to a post service and a comments

9
00:00:24,260 --> 00:00:29,690
service both the Postal Service and the comment service are going to be expressed based applications.

10
00:00:29,690 --> 00:00:32,360
We're not going to worry about any databases or anything like that.

11
00:00:32,360 --> 00:00:36,130
Instead we're going to store all of our data in memory for this very first project.

12
00:00:36,170 --> 00:00:41,150
Again this first project is just about giving you an idea of how this stuff works together as opposed

13
00:00:41,150 --> 00:00:45,740
to really focusing on the nitty gritty details of implementation.

14
00:00:45,810 --> 00:00:48,240
Let me tell you about the setup we're going to do in this video.

15
00:00:48,450 --> 00:00:52,890
We're going to first generate a new project using create react app that's going to handle our ReACT

16
00:00:52,890 --> 00:00:58,860
application or then going to scaffold out or put together a little bit of code for an expressed based

17
00:00:58,860 --> 00:01:00,750
Project for the Postal Service.

18
00:01:00,840 --> 00:01:03,800
And the same thing for the comments service as well.

19
00:01:03,840 --> 00:01:08,340
So in total we're going to go through three things setting up each of these is going to take a little

20
00:01:08,340 --> 00:01:08,920
bit of time.

21
00:01:08,940 --> 00:01:14,310
So we might start by generating the react application and then while that's initializing and installing

22
00:01:14,310 --> 00:01:18,650
itself will probably go over and quickly set up the post and come service as well.

23
00:01:19,440 --> 00:01:25,120
I'm going to get started by going over to my terminal inside of a workspace directory of sorts.

24
00:01:25,120 --> 00:01:32,590
This can be anywhere on your computer and inside of here I'm going to make a new folder called log that's

25
00:01:32,590 --> 00:01:37,400
going to be where I'm going to generate my entire set of different projects or services.

26
00:01:37,480 --> 00:01:43,180
That's going to create the totality of our project inside of this blog directory and then going to generate

27
00:01:43,210 --> 00:01:48,320
a new react application using NPCs rate react app.

28
00:01:48,640 --> 00:01:55,290
And I'm going to call this simply client to say hey this is our web client that's going to take a couple

29
00:01:55,290 --> 00:01:57,510
of minutes to install while that's running.

30
00:01:57,510 --> 00:02:04,210
I'm going to open up a second terminal window and I'm once again inside my blog project directory.

31
00:02:04,290 --> 00:02:05,340
It's now inside of here.

32
00:02:05,370 --> 00:02:09,100
I'm going to create a folder for first my post service.

33
00:02:09,200 --> 00:02:10,640
It's all I'll say make Dir.

34
00:02:10,650 --> 00:02:17,040
Create new folder I'll post I'm going to change into that directory and then inside of here I'm going

35
00:02:17,040 --> 00:02:22,240
to generate a new package not just on file and then install a couple of dependencies into it.

36
00:02:22,420 --> 00:02:25,030
I'm going to do an NPM in it.

37
00:02:25,080 --> 00:02:34,360
That's why that's going to generate my package dot JS on file I'll then do an npm install and we're

38
00:02:34,360 --> 00:02:36,760
going to get four different packages.

39
00:02:36,760 --> 00:02:41,820
We're going to get express we're going to get another package called course I'll tell you why we are

40
00:02:41,810 --> 00:02:43,810
going to use that in just a moment.

41
00:02:43,950 --> 00:02:45,410
Something called axioms.

42
00:02:45,420 --> 00:02:48,500
Again I'll tell you why we're using that on the server in just a moment.

43
00:02:48,520 --> 00:02:52,940
I mean finally to actually run our project all the code inside of it we're going to use node man as

44
00:02:52,940 --> 00:02:55,690
well OK.

45
00:02:55,720 --> 00:02:57,550
So that's my post project.

46
00:02:57,580 --> 00:03:00,940
Now we're going to repeat that same process for comments as well.

47
00:03:01,120 --> 00:03:08,140
They're going to create a third term the window are going to change back out to my workspace directory.

48
00:03:08,260 --> 00:03:14,240
Then once again inside a blog and there's my client and post folders inside of here I'm gonna make a

49
00:03:14,240 --> 00:03:21,520
third project called comments I'll change into comments I'll do an NPM and it Dash why.

50
00:03:21,520 --> 00:03:27,580
Once again and then we're going to install the same four dependencies that we've just installed into

51
00:03:27,580 --> 00:03:40,790
the post project they'll do an npm install we'll get access those orders Express and Node one.

52
00:03:40,850 --> 00:03:41,240
All right.

53
00:03:41,240 --> 00:03:46,360
There we go now after just a moment comments will be all set up.

54
00:03:46,560 --> 00:03:48,170
Yep there we go.

55
00:03:48,170 --> 00:03:52,610
I'm going to go back over to my second terminal window which is where I installed posts.

56
00:03:52,610 --> 00:03:57,060
So looks like the four pencils for the post project were installed successfully as well.

57
00:03:57,140 --> 00:04:01,210
And then finally if I go back to the first project window or the first small window I should see at

58
00:04:01,220 --> 00:04:06,870
the create react up all finished installing on the first panel window.

59
00:04:06,870 --> 00:04:10,850
I'm gonna make sure that I change into that client Directory OK.

60
00:04:10,920 --> 00:04:18,060
Now in total I've got three terminal windows one for client I've got one for our postal service and

61
00:04:18,060 --> 00:04:20,770
one for our comments service as well.

62
00:04:20,970 --> 00:04:25,080
I can tell you right away that one of the most confusing things inside this course is gonna be the number

63
00:04:25,080 --> 00:04:27,760
of terminal windows that we're running at any given time.

64
00:04:27,930 --> 00:04:32,850
And I can really apologize in advance because well I'm going to be changing between these terminal windows

65
00:04:32,850 --> 00:04:37,140
quite a bit hopefully at some point in time I'll figure out a better way to present these things to

66
00:04:37,140 --> 00:04:37,630
you.

67
00:04:37,630 --> 00:04:41,040
Well you'll probably see the next video I'll probably tile these windows so you can see all of them

68
00:04:41,070 --> 00:04:42,690
at the same time very easily.

69
00:04:42,690 --> 00:04:46,230
But I just want you to be aware that we're going to be working between multiple terminal windows quite

70
00:04:46,230 --> 00:04:46,770
a bit.

71
00:04:46,770 --> 00:04:50,760
And so it's really important for you to just be aware of what window we are in at any given time.

72
00:04:51,620 --> 00:04:51,900
OK.

73
00:04:51,930 --> 00:04:54,360
So that's it for our initial project setup though.

74
00:04:54,390 --> 00:04:55,290
Quick pause right here.

75
00:04:55,320 --> 00:04:57,540
Going to start writing some code in just a minute.