All right, and once we're done with logout user as well as fresh warnings up next, I want to get our
front end application.
So the one that is living here in a client production ready and in Create React app where we need to
do is run the command ampm on build.
And in the process, we'll create a built folder, and inside of that folder we'll have a bunch of static
assets and those static assets are going to be our production ready application and then we'll worry
how we can serve it, use expression.
But first, we need to create it.
Now I'll purposely create a command in the script, in the package JSON in the server.
So again, we're talking about Package Jason in the server, not on the client, but I do want to create
a command that sets up that production ready application because we'll also use that command on her
uncle.
So at the moment, we don't see how we'll use it.
But since I know that we're going to do that, that's where I'll set up the separate command.
So please do that as well.
And first, we want to navigate to package JSON, and we just need to come up with the name.
So in my case, I'm going to go here with build and let's call this client.
So let's set up the quotation marks, let's say build client.
And first we want to do is navigate to the client folder and it's also right away run, ampm run and
then build.
Let's add a comma, so everything is correct.
Let's stop our server right now, and I'm going to clear the console.
Then I want to go with npm run.
And now let's run the build client.
So build and then client and once create React app is done building on production ready application.
Like I said in the client or have a build folder with a bunch of static assets.
And essentially, this is our production ready application.
So that is the first step.
Now what is the next step?
Well, we need to remember that in Express, we actually have the middleware that serves those static
assets and the way we use that middleware regard app eight years and then we invoke express static and
what we want to do.
We want to point to where the Build folder is located.
So normally when we were just setting up the API, what we did, we created somewhere here on the server.
The folder by the name of public.
And then we just served it, whether it was just as follows the image files and whatever.
In this case, we're serving not production ready application.
Our React application from the client folder.
And then we'll worry about the routing, so we're still have one more step right now since we're using
ES6 modules.
It's a little bit tricky to get the name, because if you remember with passport resolve, we actually
need it to showcase that their name.
So current directory for the server since we need to use the absolute path since we also use that one
somewhere on a server.
And the tricky part here is that again, we're using six modules, so it's not as straightforward as
what common dress where their name was available by default.
In this case, we will need to do a little bit of acrobatics where we want to get the burning, want
to get the file URL to path.
So notice both of the modules and URL, and then we want to invoke Durning.
File your old path.
And remember, I said that when it comes to this six modules in node, there's always this important
matter and URL.
Once you have something tricky.
So this is again that case, and I got this whole deal is because we are using a six modules and their
name is not accessible by default.
And we also import the path because we want to use it here in the express stack.
So let's get cracking.
We have our production ready application.
We build one.
Ready to go.
So that's done.
So now what I want to do is go with all of these imports and then let's copy and paste them in the server.
So let's go back where we have the server address.
Let's copy and paste.
And once I have all my imports in place, let's keep on scrolling right after the express JSON.
Let's go here with app that use.
Let's invoke it and we'll go with express static.
And then let's go with path dot resolve.
And then let's bask in the underscore underscore their name, which we haven't set up yet, so we still
need to add those lines of code.
So let's add a comma here, and we'll go here with client and then build.
Basically, this is where our static assets are going to be located.
And if you remember these static assets, what that means is that they are publicly available.
So once we open up the application, I'll be able to showcase, for example, that if we navigate to
localhost 5000 and then forward slash favorite, can I call?
I'll have access ActionScript.
Why?
Because that is my public asset.
Now we're not done because like I said, we still need to do two things.
We still need to set up the routes being at.
And we also want to get that Bernie, because by default, it's not going to be available.
So you know what?
Let me move this sucker up because I'll set up their name right above here anyway.
Let me go back to the read.
Now, I'm not going to retype this because again, this is just a workaround to get that their name.
So let me go back to the server.
Let me set it up.
And now we have the third name, so everything should be correct now.
And here it looks.
They have three on this course.
Now let me fix that one.
And last thing that we want to do right after both of our API roots, we actually want to set up the
get route and we want to say whatever is the URL, we want to direct the Gertrude's to the index.
The amount why?
Well, because in here in the client building, in the index, actually, you know, we have our React
router.
So what we need to understand is that right now, our React application is going to be the frontend
for our server.
So every route the route goes to our server, we want to pointed to the indexation email and from there,
the React router will do its job.
And the reason why we want to do that after about two years.
Well, because we don't want to have any conflict.
Again, we're talking about only the get roads that go to our application.
But before we route them to indexation email, we want to check whether any of them are to the API auth
or jobs if they are.
Then, of course, we want to direct the user over there.
So let's go here with app on them.
Please keep in mind that, of course, we'll have access to these right from our front end application.
Hopefully that makes sense.
So let's go here and get I want to say that every guest wrote that will get again after we have tried
these two.
So once we have tried these two, let's just look for all to get out.
And then let's around them to the client build and more specifically, indexation IMO.
So let's go here with our callback function, say Rec.
Rose Nunn said of the function, Let's go with arrest and then we have a special method send file.
And now we're just want to provide the path to the indexation ammo.
So any get out and get that message to them after we have tried reached you.
Hopefully, that is clear.
So let's say here path dot resolve and then let's pass them again that their name because remember when
just set it up and man, let's look for words, climb forwards, build.
And then we also want to do the same thing with indexation their money.
So now we have the correct path.
Now keep in mind that, you know, package Jason.
The moment with npm start we run concurrently, which spins up what spins up our server.
And it also spins up our client.
Now that's not what we want anymore, because we already created our production ready application over
here in the build one.
So instead, what we want to do, we want to run node and then the server.
So I don't want to spin up the Create React app.
I just want to spin up the server.
And yes, that's the same thing we'll do on Heroku in a few videos.
We're not going to invoke concurrently.
We'll invoke the node and whatever is our phone.
So in my case, that is server jass.
So let me clear everything here, and let's go with node and that server.
And in this case, we're not looking for localhost three thousand.
Please keep that in mind if we go to your local host 3000.
Actually, there's going to be nothing there because we're not the running the Create React app.
Instead, what we want to do, we want to go with local host and then 5000.
Check it out.
And this is our application and everything works as it should.
So let me go here quickly.
Our game just showcases that.
And again, I know I keep repeating this, but hopefully it is clear that using Create React app, we
created our front and application and that is our public assets right now.
So we use express static to serve them as our public assets.
And if you remember, I said that I'll showcase that by accessing the favorite coin, which is actually
in the build one.
So if we go again with local 5000, whereas the server and if we go to favicon, I call one of, you
know, actually this is my favorite gone.
And with this in place now, I can start setting up these security packages.