- [Instructor] So, as I said,
the first thing we're going to do
is build our front end application
and serve the resulting files
from our express server backend.
Again, this will allow us
to run our entire application using only one server
instead of running two,
like we've been doing for the entire course.
So the first step here is going to be
to build our front end,
which in view,
we can do by running the following command.
Just open up a terminal inside
the front end directory here.
And we're going to say,
"npm run build",
and then let's open up the file tree over here
so that we can see what's happening.
And once that completes,
you'll notice that that created this build folder
in our file tree.
And this folder contains
all the optimized compiled code for our front end.
So now that we've done that,
the next thing we're going to want to do
is serve these files from our node server.
Now, the first step in doing that
is to copy and paste this dist folder
that view just generated for us
into the root directory of our backend.
So let's copy this here
and go over to our backend
and inside the root directory,
just say paste.
Ops, and we want that in the root of our directory.
And once we've done that,
we need to change our server to serve this directory.
Now you might remember that much earlier
when we first generated our view project,
the CLI asked us something about
how we wanted the history of our application to work.
Maybe you remember that maybe you don't,
don't worry about it if you don't.
Well, because of the option that we chose at that point,
what we need to do now
is install a package into our server here
called connect-history-api-fallback.
It's a pretty long name,
but it's necessary in order for that to work.
So in order to install that package,
let's say "npm install connect-history-api-fallback"
and hit enter
and that'll install that package.
There we go.
And once we've installed that,
let's modify our server to serve our front end files.
Here's what that's going to look like.
Let's open up server.js.
Okay.
And up at the top,
we're going to import the package
that we just installed.
We're going to say "import",
"history from connect-history-api-fallback".
And now that we've done that,
we're going to add the following code to our server.
So we've already got our body parser
and images things here.
Underneath that, we're going to say "app.use"
and we're going to say "express.static".
And for the first argument here,
we're going to say "path.resolve"
and we're going to say "__"
directory name
and then "../dist"
which will serve our dist folder.
And then the second argument here
is just going to be a little configuration object.
It's going to say maxAge one year,
which is just one Y as a string
and then it's going to say etag false.
And now that we've done that,
the next line we're going to do
is say app.use history.
Okay.
And last but not least at the very end,
we need to add one more route to the very bottom.
We're going to say "app.get"
and for the path here,
we're going to pass a star,
which will basically catch all the routes.
So what this is doing is
all the routes that aren't handled by our API
are going to be directed to the index.html file
inside our distribution folder.
So for the callback here,
we're going to say request response,
"res.sendFile", "path.join",
"__" directory name
and then we're going to say "../dist/index.html".
Okay and that should be all we need to do.
So what we should be able to do now
is we can run our server.
So let's open up a terminal
and say "npm run dev"
and the cool thing is that
we should be able to go to localhost 8,000
and hit enter,
and that should open up our front end, right?
So that's what we mean when we say that our backend
is serving our front end's files.
We can access both on the same port on the same machine.
And just to make sure that
the rest of this stuff still works.
We can add this to our cart.
We can go to our shopping cart.
All of this works.
We can remove items from our cart, et cetera.
So now we are serving our front end files from our backend
along with the API endpoints.