-: In the last section, we got our application working
but you might notice a little red error message
in the Chrome console.
Something about a web socket connection.
So again, the issue here is that our browser
and the running React app inside of it wants to
get a active connection back to the Development React server
so that it gets a notification anytime
that our source code changes
telling it that the browser needs to automatically reload.
The problem is that we have not set up
our Engine X server to successfully allow
through web socket connections.
And so in this section we're gonna make a little change
to the configuration file
of our Engine X server and solve that issue.
So to get started, I'm gonna open up my code editor.
I'll find the engine x default.com file.
Inside of the server block,
we're going to expose one routing layer or one route
through the Engine X server that will allow a
web socket connection to be made
with the running React process.
Now if you look at the web socket request very carefully,
you'll notice that it says web socket
on a path of socket JS dash node.
So that's the route that we're going to look for
and proxy it up to a backend.
So I'll say location slash soc JS dash node.
We'll do a proxy pass to http slash slash client semi colon,
and then to specifically allow web socket connections,
we'll add on a proxy http version of 1.1,
a proxy set header of upgrade
and then http upgrade with a dollar sign in front of it.
Don't miss the dollar sign.
And then finally, proxy set header connection upgrade.
Oops, lemme get my spelling there.
Upgrade. There we go.
All right, so I'm gonna save this file.
And now that we made a change to the engine X server
we need to rebuild our engine X container.
So to do so,
I'll flip back over to my terminal again
where I have my running Docker composed process.
I'm gonna hit control C to stop all the running containers
and then I'll run docker compose up dash dash build again.
Now this build should be very quick
because we don't have to redo all those NPM installs.
And so almost instantly we should see everything
start to open back up.
Now again, if you see any error messages here
I highly recommend that you hit control C
and just restart everything with a Docker compose up.
Like I said, at this point, there's a couple of kind of
dependency issues where sometimes the API is gonna
load up a little bit too quickly
and it's going to come online before Redis
or Pro Postgres are ready to receive connections.
But when we eventually deploy this
we're going to put a little fix in that's gonna make sure
that that will not be an issue in a production environment.
So, if I now start everything back up again
and then go back to my browser at local Host 30 50,
I'll refresh the page.
It looks like I got the error message to go away
and now you should still be able to enter
in say an index of seven, submit it,
refresh and see for index of seven, I calculated 21.
Cool. So it looks like our application is doing
pretty darn well.
You might also notice that we've got the two
somewhat hard to see links here but they do exist.
You can click on other page.
This is now a distinctly different route, you'll notice
and if you refresh the page
it does successfully still load up the React application
which is exactly what we wanted.
I can then click on home to go back to the home route,
refresh again and again everything works as we would expect.
So I think the application is in a great state.
It definitely looks like it's working
the way we would expect.
So let's take a quick pause right here.
We're gonna come back to the next section and start talking
about deploying this off to Amazon Web Services.
So I'll see you in just a moment.