The last thing we really have to do is update the path that we are providing to express that static
right here now, unfortunately, there's not a very simple and straightforward solution to this.
You might think that there is a very easy solution.
Unfortunately, it's not going to work as expected.
It's going to first show you what you think we need to do here.
And I'm going to show you why it doesn't work.
And we'll take a look at how we're going to actually fix up this problem.
OK, so as we have established several times now, express not static is going to take a reference to
a folder that we want to somehow serve up files and folders from.
So we have now said that we want to serve up from the node modules directory, the local client folder,
and inside there, specifically the build directory, you might think that to do this would be really
easy and straightforward.
You might say, OK, let's just update this path right here.
We're currently inside the Sarsae directory.
So we would go up one folder into our local API directory, then into node modules, then into the local
client slash build directory.
And that is a relative path of where we want to serve up all of our files and folders from.
Well, unfortunately, not going to work as expected.
Let me just prove this to you very quickly.
So I'm going to save the file, go back over to my terminal.
I'm going to restart my Seelie.
So again, inside my destructo, I'm going to rerun node index, just serve.
And if I go back over to my browser and refresh the page, I'll get a nasty error message that just
says cannot get.
So it's pretty clear that the path we just put in is not working as expected.
But why is that?
Well, it all comes down to some inner workings of what express, not static, does.
Remember, when we go into the node modules directory and find the local client folder inside there,
that is called a symbolic link.
This is a shortcut of sorts on your file system that is pointing to some other directory on your machine.
Unfortunately, express, not static, does not work nicely with symbolic links, so we've essentially
got this kind of shortcut that is not at all compatible with express static.
So how are we going to fix this?
We've kind of got these two different systems that are just not behaving as expected at all.
Well, we're going to take this symbolic link right here and we're going to kind of resolve it into
an absolute half.
This is where things get just a little bit crazy, so as usual, let's just write out a little bit of
code.
We're going to kind of get a complete solution here and we'll discuss exactly what it does.
OK, so here's our solution at the very top.
I'm going to first begin by importing half from path.
Then above our use, we're going to add in a package half is required to resolve.
And we're going to look for our local client package, build index HTML.
And then finally, or express static, we're going to pass in half dot da name of package at.
OK, so what's going on here?
Well, first off, this requires resolve, function requires resolve is not going to attempt to actually
load up a file.
Instead, it's going to apply node's HARTH resolution algorithm to figure out the.
Directory or essentially the file location of that indexed HTML file, so package path right here is
going to be the absolute path on your machine to get to that index file.
Then we don't want the entire path because the entire path would include indexed on the very end.
Instead, we just want everything up to the bill directory.
So we call her name, which will give us just everything up to that build folder.
And we're saying, let's specifically serve up that folder.
Now, the important thing here to understand is that we are now working with an absolute path, so this
will be the absolute path to the actual local client directory on your machine, like the other one
inside of our or the other folder inside of our packages directory.
It's going to be the path to local client right there.
Now, you might say, well, doesn't this kind of break what we were saying we wanted to do earlier,
where we wanted to make sure that we were not trying to walk across module lines and go to that other
directory?
Well, this required that result function is going to work slightly differently when user actually installs
all the stuff on their local machine.
Remember, when a user installs RCL on their machine, there is going to be no more symbolic link.
That symbolic link was only set up to make our development a little bit easier and more straightforward.
So as soon as a user installs all the stuff on their local machine, required, Result is going to find
the local client bill directory correctly inside of our node modules folder.
Instead, rather than giving us the local client folder that's inside of packages, we only see a local
client and packages with this line right here when we are running our code in this sort of development
environment.
Now, I just want to I know this stuff is really nasty, really crazy.
If my explanation here does not do this justice and if you're saying, wait, why is this not working
as expected or why is this going to fix the problem?
I would encourage you to just pause video here, make a couple of changes, maybe go back to trying
to do a relative path into our node modules directory and adding some console logs and take a look at
what this package path variable is.
And I think you'll get a good understanding of what's going on pretty quickly.
OK, so enough of that, let's save this file and do a quick test back inside my terminal.
I'm going to restart my Seelie.
I'll then go back over to my browser, do a refresh, and sure enough, the application loads up as
expected.
So, yeah, kind of a nasty solution here, but it does work.
OK, so that's that's so the very last thing we have to do now, remember, we have two different ways
of serving up our REACT assets.
One is intended for when a user has installed our Seelie onto their local machine.
The other is intended for whenever we are running our application in this kind of development mode and
we've got an actual ReachOut server running.
So the last thing we really have to add in here is some kind of check to decide which of these two methods
we want to use to load up our react assets.
So let's add in that final piece in just a moment.