Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
7985
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.