00:00 The first thing that I want to do is make it so that we get our index.html rendering on the screen so that when people come to our website, they get not a 404. So we'll come into our app server and right down here we have Marty the money bag giving us a bit of Hanojs code for us.

00:19 So this app.get is configuring Hano to handle get request to slash ship ID. The ship ID is optional, so we have no ship ID here, so this will apply.

00:32 And then we're going to read a file, public index HTML as UTF-8, and we'll send that as HTML to the client. Now this read file we're going to need to import from FS promises and we'll save this refresh. And now we are no longer getting a 404.

00:49 So that is awesome. Let's take a look at our network. Let's make sure we're not throttling or anything. Refresh. Sweet. We're getting our local host. We can take a look at the response and there's all of our stuff. Perfect. So we are getting another error in here. If we take a look at the console, we're going to be getting a 404 for the fallback ship.

01:07 That's because we're not serving a public directory yet, and so we'll want to deal with that. But the first thing I want to do is I want to handle our index HTML starting to load some of our JavaScript. So I'm going to add a script tag for our UI index JS module.

01:26 So we get our client side application running in here. So we'll refresh the page now and we're going to get an error not found. And this is because our server isn't yet configured to serve the UI directory. And so let's go back to our server and get that piece working right there.

01:43 And while we're at it, we'll fix this fallback ship error by having Hano serve our public directory as well. And we're also telling it to not bother with the index because we want to handle that down here. So now our UI directory is going to be served and our public directory is going to be served.

02:02 Our UI directory is kind of special. So it's got this extra configuration. We want it to give us the file not found and things like that. And rewrite the request path properly. So with that all configured now, we should be able to load the fallback ship and the UI index.

02:18 So let's refresh again. And it looks like it fell over. So let me just start over the server. Sometimes when you're making changes to the server, it needs a hard re reboot. So let's get that restarted. And actually, you know what? It looks like we're missing serve static. Here we go.

02:36 Save that. Try this again. Restarting the server now. And we're getting failed to resolve module specifier react. OK, that one makes sense because here in our index. Yes, we're trying to import from react, but we haven't configured the browser to be able to handle those.

02:54 So let's go to our index HTML again. We'll get rid of this comment line here and here. And so this will configure our imports to import the correct version of react that we're using for this workshop. At the time that you're going through this workshop, these versions might actually change.

03:12 I will keep the material up to date so that you're working with the latest versions of everything. OK, great. So with that, I'm going to refresh. And OK, we're getting closer, getting closer. Now we're getting a syntax error. We got the open curly bracket is not valid JSON.

03:27 If we take a look at where that error is coming from, it's this API request right here. So we got a redirect there, I guess, because that close or that ending slash, we're getting rid of those slashes or servers.

03:43 So it got redirected to slash API and it's trying to send index HTML. That is not what we want it to do. And so we need to actually handle those API requests. So let's grab this. And we've got app dot get to slash API ship ID.

04:00 And we'll take that information and load the ship details and all that stuff. So we're going to need to get those utilities from our database. And if we save that now, we should be loading. Perfect. All right. So we're handling loading public assets.

04:16 We're handling loading index HTML, handling our JSON API. And we're handling our import maps so that when we have an import from React, it knows how to resolve that.

04:29 And we're also loading our UI index, loading our application and then handling serving everything from the UI directory as well. So we're ready to get going on this application.