All right, let's take a look at how we're going to solve scenario number two, so to make sure that
we can make a request from our browser over to our local API and have it get routed automatically over
to our running react app development server.
We're going to build up a proxy inside of the local API.
We're going to make a proxy whenever we receive a request from the browser.
We're going to say that if it is not a request that is trying to fetch a list of cells and if it's not
requested it's trying to save a list of cells, then we will just assume that it is some request that
is intended to go over to our create, react up and get some development files.
So we're going to a proxy that incoming request over to localhost PT. three thousand, which is presumably
where our REACT application is running.
This proxy is going to for the request over.
We're going to get whatever development files we are looking for.
So that might be our indexed HTML files and JavaScript files, whatever else.
And we're going to send the response back over to the browser automatically.
This proxy is going to be implemented with the packets we install just a little bit ago called HTTP
Proxy Middleware.
Let's go back over to our browser and make use of this right away.
Excuse me, my our editor there we go now to Browsr.
OK, so inside of our inducts file, I'm looking at our search function at the very top, I'm going
to import great proxy middleware from HTTP proxy middleware.
Right after we create our express application, we're going to wire up this proxy, we're going to say
app use.
Great proxy middleware, we're going to call it, and provide a configuration object.
Our target will be HTP localhost three thousand.
We are going to enable WebSocket supports, and we do that by putting a true react out by default uses
WebSocket to tell the browser whenever some development file is changed because you might have changed
a file instead of your editor.
And then finally, we're also going to put in a log level of silence that's going to make sure that
the proxy middleware doesn't try to log every incoming request.
If you enable that, then you're going to see a lot of output scroll by in your terminal very quickly.
And it's not really very useful information.
So it's going to turn off all logs coming from the proxy middleware.
All right.
Let's say this.
We're then going to go back over to our terminal.
I'm going to stop the second copy of Serv that we were running just a moment ago.
Here's the copy of Served that we're running on four thousand five.
We do have to restart this because we just made a change to our.
It's going to stop.
It started back up.
And then going to also make sure that I still have my other terminal window where we are running NPM
run start on our route project, so our route project director, remember, we set up everything inside
of llena to run three different commands at once, one for our local API, one for the Seelie and one
for the ReachOut.
So this is my terminal window still running that if you close that terminal window at any point in time,
all you have to do is open another terminal window, go back to our route project directory and do an
NPM run, start inside there.
And so you just want to make sure that you have something saying that to create reactivates running.
I saw the message of it just a moment ago.
Well, somewhere inside of you or something that says, yeah, create react app is definitely running.
All right.
So let's now go back over to our browser.
So I should be able to go to localhost three thousand and see our REACT application appear.
So this is normal behavior, totally normal, nothing strange here whatsoever.
But now we should also be able to go to our local API, which is at localhost four thousand five, and
also see our REACT application up here.
And in fact, we do so this is a sign that we are accessing our local API, but the request we are making
is being automatically proxy over to our REACT app and we're getting all of our different development
assets and then send them back over to the browser.
Now, at this point in time, you might be wondering why are we going through this process?
Why don't we just connect directly to localhost three thousand and get connected to our reachout directly?
We'll remember the entire point here is that eventually we're going to have our local API that is not
only serving up these react assets, but it's also going to be the source and destination of all changes
to cells that we make.
In addition, when we eventually are running our application inside of a kind of production style environment,
in other words, on the user's machine.
We are not going to have any running ReachOut server is just not going to exist.
Instead, the only thing that we're going to be running is our local API.
So we are connecting to our REACT application through the local API to more closely simulate what is
going to go on in a production environment.
All right, so now we've got this scenario to kind of take care of here, we're going to take a quick
pause, come back and then start to address scenario number one as well.