Inside of our local client package, we now have that build folder, so inside that folder are all of
our react production assets.
So we essentially want to take this folder and somehow make it available or really the contents of it
over to our local API package.
That local API can serve up all the contents of that folder.
Now, this entire process is going to be a little bit crazy.
This is probably one of the hardest things inside this entire course.
To wrap your head around what we are about to do here, the first thing I want to do is a very quick
little housekeeping change, just a little bit of administrative work where they are going to take a
look at a couple of diagrams and understand the big solution we're going to use here.
OK, so here, first off, is a little bit of administrative work we need to do inside of local client.
I'm going to find the package JSON file inside there.
We've got this name property with JDBC.
We're going to change that name property to be local client instead.
Like I said, just a little bit of housekeeping.
Why are we doing that?
Well, remember, we've been running commands with Lernout several times at our terminal and we've been
using that SCOP option quite a bit.
Inside of scope, we've been putting in the names of all of our different packages, so, for example,
we did a llena ad of some package and the scope of Seelie or local API.
Those scope names are not coming from the names of the folders inside of our packages directory.
Instead, the scope names are actually coming from the name field of our packages on file.
So the only reason I'm changing this from Chibouk over to local client is to just kind of better reflect
the actual name of the local client package, that we've got a very consistent name here.
And if we ever do a not ad with a scope of local client, it means go and find this directory right
here.
So, again, just a little bit of housekeeping just to make sure all these names line up and are super
clear to you.
OK, so there's our administrative change, so now we're going to take a look at a couple of diagrams
and understand how we're going to get all this stuff working correctly when a user eventually installs
this JDBC application onto their local machine.
So instead of our local client package, now we have a build directory and inside there are a bunch
of built react files, so we want to somehow get access to these files and be able to serve them up
from inside of our local API package or more specifically, the express application.
So one solution we can use to very easily do so is to use a middleware that you might already be familiar
with.
It is called static middleware.
This is a middleware that is included by with express by default.
The static middleware is going to automatically serve up all the different files and folders inside
of some directory.
The static middleware is used in tremendous numbers of express applications, and a great example of
the use of the static middleware might be the public directory inside of react up to remember any ReachOut
project has a public directory and you can very, very easily access all the different files and folders
inside there by just trying to go directly to say, localhost three thousand logo one nine to.
So that is the express static in in in action, it serves up all the files and folders from a given
directory.
So it seems to me that we could somehow make everything inside that bill directory available to users
who are making requests to our local API Express server, if we can set up the static middleware inside
there and then say, hey, static middleware, go over to the bill directory of our local client package
and serve up all the files and folders inside there, that would probably work as expected.
So we could definitely try wiring this up, let's go back over to our Ed, we're going to put together
kind of somewhat naive solution.
So I say naive here, because this is not going to be a solution that's going to work in the long term,
but it will at least work for a little bit right now.
So back inside, my editor.
I'm going to go to local AP inducts.
Inside of here at the very top.
Or see me at the top of our search function.
I'm going to comment about all this stuff around Proxy where for just a moment.
So right now we're not using the proxy anymore.
And so in theory, if we started up our express application, we would no longer be able to access any
of our Riak stuff, even in the development environment.
So we're going to replace that very temporarily with app use, express static, so there's these static
middleware.
The only argument to the static middleware is going to be a path to the directory that we want to serve
up.
But here's our naive solution.
We're going to put in a directory right here that's going to be essentially walk from our index file.
We're going to go up one folder to local API, will then go into local client and then say that we want
to serve up that build directory.
So as a string right here, I'm going to say go up into local API.
Go up into packages.
Go to local client.
And then build.
So I want to try to serve up all the files and folders from that directory, and again, this is not
a good solution here is just kind of a proof of concept.
So I'm going to save this, go back over to my terminal.
I'm going to stop my running express application, so if you're still running that NPM run or speed
the node index Jessopp command, just go ahead and stop it.
Well, then started back up with another note indexed J.S. Surf.
And then going to go back over to my browser, I'm going to go to localhost four thousand five when
I do so, I'm going to expect to see our REACT application appear.
So back inside my browser.
I'm going to refresh while at localhost four thousand five, and sure enough, I still see our application
up here on the screen.
So that means that we have correctly set up this link.
We have said that we want our local express API, the static middleware, to serve up all the files
and folders from the build directory inside of our local client package.
And the code that we wrote out works one hundred percent.
But like I said, it is a naive solution, it's not a good solution.
Let me tell you first off why it is not a good solution.
When I say not a good solution, what I really mean to say is it is a solution that is not going to
work in the real world.
So here's why.
All right, so we've got our packages folder inside there, we've got our Seelie package, local API
and local client and inside of local client is built.
We're essentially trying to walk directly from inside of our local API package and go directly over
to that build folder.
But here's the problem.
Inside of a learning project, we cannot directly require files or folders or even reference files or
folders or provide even parts, the files or folders between these different packages.
So that whole path that we just wrote out, that long string that would not work as soon as we start
to run our project on the user's machine.
The reason for this is very simple.
Eventually, we're going to deploy all these different packages off to the NPM registry.
So each of these different packages are going to be essentially taken like each folder is going to be
taken.
It's going to be zipped up and then sent over to the NPM registry, zipped up, sent over to the registry.
And each of these little zip files, they're not technically zip files.
Their archives are going to contain just the contents of Seelie, just the contents of local API and
only the contents of local clients.
So there's not going to be any sibling directory when local API tries to go to its sibling folder and
try to find local client.
That is just not going to exist as soon as we start running the application on a user's machine.
So the current path that we have written out is a path that is only going to work for you and I right
now in this development environment, it is not going to work as soon as a user starts to say, install
the Seelie onto their local machine.
Now, this part this is the part where I said when I said at the start, this video, this is a really
confusing topic.
This right here is kind of what I'm talking about.
You might say you might be saying, wait, Stephen, wait.
Like, what is this about a user installing these packages?
How is this all work if this part is unclear?
Don't sweat it too much.
All I mean to say here is that we pretty much cannot do a direct reference to this other folder that
is inside of our packages directory.
That's pretty much the rule.
So if that doesn't make sense, that's OK.
Just kind of accepted as reality.
And let's continue on.
Let's take a look at a solution we're going to use to kind of get around this rule.
OK, so this is what is allowed, we can set up a link between local API and local client, we can set
local client to be a dependency of local API.
And remember, we have technically already done this between our client and local API projects.
Let's go take a look at that really quickly just to get the reminder.
So if we go back over and find our Seelie project inside, there is package, Jason, remember we said
that a dependency of Seelie was local API that set up a link between Seelie and local API inside of
Seelie.
If we open up the node modules directory, we can see a reference to our local API package right there.
So we're going to use this exact same technique to get a reference to local client inside of local API.
So we're going to use Launa to link these two packages together, and when we set up that link, we
can imagine that inside of local APIs node modules directory, we're going to get kind of a shortcut
over to the local client folder, like the actual four folder.
This is kind of a shortcut right here over to the real local client, all the files and folders that
are inside of local client right here.
We will see inside the node modules directory of local API.
So because local client is now kind of technically kind of inside of local API, we can safely write
out a path that looks into this local client folder right here and finds the directory inside of it.
And again, that is a link that is allowed.
So we're going to go back over to our static middleware and we're going to say whenever a user makes
a request, try to serve up all the files and folders from our node modules, local client build directory.
And again, that is a link that is allowed.
OK, so let's first begin all this stuff by going back over to our terminal, we're going to set up
the link.
Between.
Local AP and local client, they're going to go back over to my terminal.
I'm going to stop are running serve process and I'll do a llena ad, I want to add local client to local
API.
It's going to run that.
I get a little warning here, you're probably not going to see this warning because I've recorded this
video several times now to get it just right.
I've already added the two.
So, again, you're going to see a slightly different message right there.
Then back inside of our code editor, we should be able to go into our local AP packages on file and
see inside there.
We now have local client listed as a dependency.
And inside of our Noad Modules directory, if I open that up, I should be able to scroll down and find
local client.
There it is right there.
If you do not see local client inside of your local API node modules directory, just restart your editor.
So that is a shortcut.
It's not a copy of local client, we didn't copy these files over.
It is a shortcut over to the local client folder.
So now we can get direct access to that build folder and serve up all the different files inside.
They're using the express static middleware.
So that's it.
That's the solution.
The last thing we have to do is go back into our source index file and update this path right here.
Now, updating that path, there's going to be just one last very small challenge around it.
So we're going to just pause for one second.
We're going to come back next video.
We're going to understand what this last little challenge is and then write out the last bit of code.
So quick pause and finish this stuff up in just a moment.