Original subtitles

All right.

After a whole bunch of lecturing it is finally time to actually write some code and whatnot.

So in this video let's do a quick overview of some of the setup that we're going to go through rather

quickly.

All right.

So here's the general architecture of what we're going to initially try to build.

What's running inside of our browser is going to be a react application.

This react application is going to communicate the ad network request to a post service and a comments

service both the Postal Service and the comment service are going to be expressed based applications.

We're not going to worry about any databases or anything like that.

Instead we're going to store all of our data in memory for this very first project.

Again this first project is just about giving you an idea of how this stuff works together as opposed

to really focusing on the nitty gritty details of implementation.

Let me tell you about the setup we're going to do in this video.

We're going to first generate a new project using create react app that's going to handle our ReACT

application or then going to scaffold out or put together a little bit of code for an expressed based

Project for the Postal Service.

And the same thing for the comments service as well.

So in total we're going to go through three things setting up each of these is going to take a little

bit of time.

So we might start by generating the react application and then while that's initializing and installing

itself will probably go over and quickly set up the post and come service as well.

I'm going to get started by going over to my terminal inside of a workspace directory of sorts.

This can be anywhere on your computer and inside of here I'm going to make a new folder called log that's

going to be where I'm going to generate my entire set of different projects or services.

That's going to create the totality of our project inside of this blog directory and then going to generate

a new react application using NPCs rate react app.

And I'm going to call this simply client to say hey this is our web client that's going to take a couple

of minutes to install while that's running.

I'm going to open up a second terminal window and I'm once again inside my blog project directory.

It's now inside of here.

I'm going to create a folder for first my post service.

It's all I'll say make Dir.

Create new folder I'll post I'm going to change into that directory and then inside of here I'm going

to generate a new package not just on file and then install a couple of dependencies into it.

I'm going to do an NPM in it.

That's why that's going to generate my package dot JS on file I'll then do an npm install and we're

going to get four different packages.

We're going to get express we're going to get another package called course I'll tell you why we are

going to use that in just a moment.

Something called axioms.

Again I'll tell you why we're using that on the server in just a moment.

I mean finally to actually run our project all the code inside of it we're going to use node man as

well OK.

So that's my post project.

Now we're going to repeat that same process for comments as well.

They're going to create a third term the window are going to change back out to my workspace directory.

Then once again inside a blog and there's my client and post folders inside of here I'm gonna make a

third project called comments I'll change into comments I'll do an NPM and it Dash why.

Once again and then we're going to install the same four dependencies that we've just installed into

the post project they'll do an npm install we'll get access those orders Express and Node one.

All right.

There we go now after just a moment comments will be all set up.

Yep there we go.

I'm going to go back over to my second terminal window which is where I installed posts.

So looks like the four pencils for the post project were installed successfully as well.

And then finally if I go back to the first project window or the first small window I should see at

the create react up all finished installing on the first panel window.

I'm gonna make sure that I change into that client Directory OK.

Now in total I've got three terminal windows one for client I've got one for our postal service and

one for our comments service as well.

I can tell you right away that one of the most confusing things inside this course is gonna be the number

of terminal windows that we're running at any given time.

And I can really apologize in advance because well I'm going to be changing between these terminal windows

quite a bit hopefully at some point in time I'll figure out a better way to present these things to

you.

Well you'll probably see the next video I'll probably tile these windows so you can see all of them

at the same time very easily.

But I just want you to be aware that we're going to be working between multiple terminal windows quite

a bit.

And so it's really important for you to just be aware of what window we are in at any given time.

OK.

So that's it for our initial project setup though.

Quick pause right here.

Going to start writing some code in just a minute.