-: In the last section, we started
up our Docker Compose process for the first time.
And the first time you start everything up
it is incredibly likely that there might be some error.
The first way that you might troubleshoot this error
is to restart the Docker Compose up process.
So I'm gonna hit control C on my keyboard to stop every...
All those different containers,
and then I will immediately start them all back up again
with Docker Compose up.
That's gonna start everything back up a second time.
Now you want to see it starting the development server,
and then eventually a compiled successfully message.
If you don't see this right here,
if you see something from the client one process that says
that there was a typo somewhere,
or that there is a invalid syntax error,
then I highly recommend that you go back about 10 lectures
or so and find that zip file that I posted
with the completed version of kind of the intermediate code.
Download that zip file and extract it into your project
directory, overwriting any existing files.
You can then restart the Docker Compose process
and you should see that any typos,
or related error messages like that go away.
So now that we've got everything started up,
I'm gonna open up my browser,
and I'll try testing out this application.
I want you to recall that inside of our...
Where is it?
Inside of our Docker Composed file right here,
our Nginx service has its port mapped
to 30.50 on our local machine.
So to access our running application,
we're gonna navigate to local host 30.50.
I'll flip on over to my browser.
I'll open up local host: 30.50,
and I should see a page like this up here on the screen.
Now, if you open up your Chrome console by hitting
right click and then inspect right here,
or if you're on Windows, you can hit F 12.
You might see in the console a little red error message
like this right here.
That's totally fine.
We're gonna fix this up in just a second.
Essentially, we're seeing this error message
because anytime our React application boots up
in development mode,
it wants to keep a active connection to the development
server and be notified of anytime that some file changes.
Now, totally.
You know, normally we wouldn't really worry about
that too much, but as it stands by not setting
up this web socket connection, we're actually going to
very significantly impact the performance
of our application, which we can see by entering in a value
to this input right here.
I'm gonna try entering in an index for a Fibonacci value
to calculate of five, and then I'll submit it.
Now you might see, if you have your network request
tab open over here,
you might see that the values request
takes a really long time,
and if it does that's totally fine.
We're gonna fix it up by making this error go away
in just a moment, but eventually, hopefully
that request will resolve.
You should then be able to refresh the page
and see indexes I've seen with five appear
and see that for a index of five,
we got a calculated Fibonacci value of eight.
And so if I go back over to my chart over here,
or a index of five, yep,
we would expect to see a Fibonacci value of eight.
We can do the same thing with say a index of six.
I'll submit that, refresh the page,
and then I'll see for index six, I calculated a value of 13.
Cool, so it looks like everything is more or less working
the way we expect, with the exception of this
little web socket error right here.
So let's take a quick pause.
We'll come back to the next section
and we're gonna fix up this little error message.