In the last section we started to explore some of the different files inside of our new client project
that we generated inside the server directory.
We also spoke a little bit about how this includes its own separate server and how having that separate
server is actually going to save us a lot of time in the long run because it gives us some great initial
set up right out of the box.
In this section we're now going to continue by figuring out how we can very easily run both the server
and the client together in a fairly elegant fashion.
We'll first get started by changing back over to the terminal where I have the existing client running.
I'm going to kill the client like so and then I'm going to change back into the server directory.
So I'm going to go up one level and now I'm back into the server.
So my first question to you is how in the world would we get both the server and the client to run together
at the same time.
Well there's definitely an easy way in a hard way.
So to get the server and the client working simultaneously or running at the same time a very kind of
straight forward.
But I would call hard way would be to open up a second terminal window change into the client directory
run NPM start over there to start up the client server change back over to the server window and then
run NPM run dev which starts our server up.
So now we have both the development and the backend server.
We're seeing the front end and the back end server working together at the same time.
Now obviously we don't really want to have to always be spinning up to separate windows like this.
And I bet at this point in time you might even be wondering how I open up to windows simultaneously.
So clearly there must be a slightly better solution than this.
And there definitely it's.
So rather than always opening up two separate windows we're going to make use of a little package called
concurrently that's going to help us run two separate servers with a single command.
I'm going to first start off by closing both the client and the server.
And remember you can do that by pressing Control-C and I'm going to flip back over to my code editor
inside of my server directory.
I will find my package got Jesus on file.
So here's the package it's on file.
And here are some of the scripts that we've been working on already.
Now something we're going to tell you right now and we're going to repeat many times throughout this
course.
We now have two separate package.
JS some files one package Jason file exists on the server and records all the development assets or
all the assets that we need for our back end server.
The second packet package that Jason File is inside of the client directory and records all of the dependencies
of our front end application and some of the different scripts that it uses as well.
So throughout the rest of this course it's really really critical that we both make sure that we are
working on the correct package not just on file at any given time.
I will be sure to spend a tremendous amount of effort to be very clear on which package not just on
file We're working with.
Starting right now I'm going to tell you make sure you're in the package not just on file in the server
directory.
So at the very top you should see a name of server right here.
And in general your file right now should look very much like the one I have on my screen.
OK.
So anyways let's get back to it.
We're going to.
Right.
Are we going to make use of a little module that's going to help us run both the client and the server
with a single command at the same time.
So inside my scripts section right here I'm going to add on two additional scripts.
So the first thing I'm going to do is add on an additional script that is going to start up the client
side of our application.
So going to make a new script called client like so for the actual script that gets executed right here.
I'm going to run the command NPM run start because remember that's how we start up the client.
Now there's just one little issue.
If we executed this command right now from our from our terminal it would execute the command NPM run
start in the context of the server directory and that would just start up our server which is definitely
not what we want.
We want to start up our clients so we need to somehow run the command and run start from within the
client directory to do so.
We're going to add on an additional argument to this thing we'll say dash dash prefix client like so.
So this essentially says run the command NPM run start from within the client directory.
So go into the client directory where our new re-act project is sitting and start that development server
up.
OK so now we've got one command to start up our backend one command to start up the client.
Now we will combine the two of them together by creating one more commands.
So I'm going to call this new command and this is going to be very confusing.
Just very briefly I want to call this new one death notice so we still have an old script up here called
dev.
I'm going to change this old one to be called server.
So that's how we were starting up our back and server previously right.
We were running NPM run dev.
So I would make sure that just stays consistent.
So we're going to make sure that we start up our server now by running the command and run server.
We're not.
We are not going to actually run this thing by hand-write here.
They will both be both the server and the client will be started up by the dev script.
OK.
So inside of here for this script we're going to run the command concurrently please triple check your
spelling on this one.
And when concurrently is executed it's going to run two separate commands.
The first one is going to be forward slash double quotes NPM run server forward slash double quotes
and I'm going to put a space in and another forward slash double quotes NPM run client.
And then again forward slash or I keep saying forward slash.
I apologize these are all backslashes my mistake and they're going to close it off.
Lexa OK.
So that's pretty much it.
Now the last thing we have to do is install concurrently as an MP module and then we can test this entire
thing out when we execute concurrently or we execute really the def command right here concurrently
is going to take this command and this command right here and execute both them at the exact same time.
Now if you're curious about these backslashes that we've been using in here they are to escape these
double quotes because remember everything in this file has to have double quotes around it.
So if we did not escape it essentially whatever's parsing this file right here would think that we actually
want to end this script early like this would be the whole script right here and now.
NPM run server right here this text would be not enclosed in quotes and so would be a syntax error.
And so that's the only reason we're using these backslashes.
Were trying to escape the double quotes.
OK so let's install occur concurrently and give this a shot back at my terminal and make sure that I'm
still inside the server directory or doing human stall dashed out safe.
Concurrently.
That's a really small module so it should only take a second or two to install and then after that is
finished installing we can then start up both the client and the server at the same time by running
the command NPM run death.
OK.
So it's all done well now.
Execute NPM run dev.
And when we do so we're going to start to see two sets of outputs appear on the screen at the same time.
So here is our node 1 stuff right here.
And then in just a second we will also see starting the development server which is the message that
gets emitted by our re-act development server.
Ok so this is definitely looking pretty good.
Let's just kind of let it run its course just to make sure everything is running okay.
Any second now.
OK there we go.
So now we can open our browser back up refresh the page at localhost 3000.
Everything here looks good.
And of course we can still access our server over on this other port that we have been using previously
localhost 5000.
And let's do like say API slash current user.
And if I go over here I am still logged in.
OK.
So this is looking pretty good.
We now have both the client and the server running at the same time.
So like I said getting these things working together is not the worst thing in the world.
All we did was run this simple script right here to get both them running at the same time and really
at the end the day we barely even needed this right we could have just ran the two separate terminal
windows to get things working.
So again I can't say it enough getting the re-act server in our back and API to work is not that bad.
OK.
So this is looking great.
Let's now take a break and continue in the next section.