In the last section we use the Create react up tool to generate a brand new client side re-act project.
I'm now in my server directory Still if I list out all the different files and folders I have inside
of here I should now see a new folder called client.
This client Fuller is what houses everything having to do 3x side of our application.
If I change into that directory and then list out all the different files I can now see a couple of
different things that are related to just the reac side.
So this is all stuff that we got for free when we generated our new project.
Now the first thing I want to tell you about this new re-act project that we just generated is that
it has its own built in server OK and has its own built in server in order to start up the react side
of our up of our application.
We can run the command NPM start while inside of the client directory.
It's all run NPM start and then we'll get a little message that says OK we're setting up the development
server any second now.
There we go.
So starting the development server we get automatically kicked over to the browser you should have a
tab open up automatically that tries to take you to localhost.
Colin 3000 and then if you try visiting that and wait just a couple of minutes for the development server
is finished starting up.
You'll then see some boiler plate that we got for free when we generated the re-act application.
And OK so here it is the application is now available on localhost 3000.
And if I go back over to the browser Here's the re-act application.
OK.
So let's figure out how to change some stuff inside that project back inside my code editor.
I can now find the client directory.
I'll find the SIRC folder.
I'll find the outtalk J.S. file and will do the very classic change here.
I need to find the H-2 that says welcome to react and I'm going to replace it with something else and
I'm going to say my classic thing for testing stuff out which is high there.
So make that change.
I'm going to save the file when I go back over to the browser.
The application is going to automatically refresh.
So there it is right there.
And here's our change.
OK.
So that's pretty much it for getting the development server for the re-act side of our application started
up and running.
Now before I take things too far or before we go too far and into detail about what's going on here
you might have a little bit of a question.
You might say Steven Riak application has its own server.
Why does the re-act application have its own server.
We've already got the Express application.
Why aren't we using Express to like do this re-act stuff that is a very good question.
And when I was kind of like steering you away in the last section by saying there's going to be some
really confusing stuff all that confusing stuff.
It all comes down to the fact that we now have a second server running for our development environment.
OK.
The fact that we now have a second server is what is going to cause us at some point a lot of headache
only the headache on the part of figuring out how this stuff works internally.
The actual set up of everything.
Again I can't say it enough will be straightforward.
So with that in mind I want to give you a couple different reasons that we are going to make use of
a separate development server for the re-act side of our application.
And I also want to show you a diagram that just very clearly lays out how things are now going to be
structured in our application.
So let's look at the kind of overall architecture.
First so at the very top.
We've got our browser down here we have this new re-act server.
And then over here we've got the Express server which we've been working on a whole bunch throughout
this course.
Now you have a good idea of what's going on with the express server already because we put it together
right.
The Express server pulls some information out of Mongo D.B and then it can respond to requests that
the browser makes with some amount of Jaison or something that says like hey here's your user user model
or here's how you go through the Auth. flow and all that kind of good stuff.
So the Express server is really solely concerned with generating Jason data and nothing else that serves
data.
It doesn't do a darn thing besides that.
Now the re-act side of our application however this re-act server is going to eventually take a bunch
of different component files.
So these are all you can imagine being re-act components right here.
It's going to take them all together it's going to bundle them all together using web pack and babbel
and then it's going to spit out a single bundle that G-S file that will be loaded up into the browser
so it can now kind of imagine that we've got one server for serving up our front end application assets
and then the second server that serves up all the different data inside of our application.
OK.
Now this still doesn't quite answer the question of why we have two servers.
Why couldn't we just like stick these things together and figure out some way for the express server
to generate and build our re-act application.
Well you know what I'll be honest with you we absolutely could do that.
That is absolutely unequivocally without a doubt an option.
We could say that we want to figure out how to build our really smart expressed server and inside of
that server was going to be all the logic for building our re-act application and serving it up to the
browser.
Right something like this.
We get to figure that out.
Great pain.
Well not me you know me not a lot of pain but we can figure it out right.
It wouldn't have been the worst thing in the world.
So the reason that we are using two separate servers here is one just very simple one very straightforward
and simple reason and that is the fact that create re-act app is bar none the best way to get started
with building re-act applications create re-act out has so much pre-built configuration already placed
into it that it's going to save us so much time in trying to wire together web pack and babbel and the
development server.
You know all this bundling stuff and all these other dependencies all the CSSA handling all these other
well-packed plug ins all this stuff we get just out of the box for free with create re-act out.
And so just using create react to operate here saves us a tremendous amount of time and is worth this
extra development or this extra time it takes to figure out exactly how to make the two of them work
together nicely.
So at the end of the day the reason we're using the separate re-act server is that using Briac create
re-act out is absolutely worth it and it gives us a ton of awesome functionality right out of the box.
So rather than setting up all of this re-act stuff from scratch we're going to be spending some time
just figuring out how to make the server and the Express server work together nicely.
And again I'm going to say for the third time now getting them to work together nicely is very simple
very straightforward and we're going to start it in the next section.
It is understanding how they work together.
That is where a lot of these challenges come from.
OK.
All right.
So with that said now we've got a little bit of a better idea of this overall architecture right here.
Let's take a quick break.
When we come back in the next section we're going to figure out how to get these two things to work
together nicely and we'll just go out and do it.
So I'll see you in the next section.