00:00 For this first exercise, we're really just warming things up, warming you up, warming me up. We're just getting us organized with the code base itself. So there are a couple of concepts that might be new to you that I want to introduce to you, and the first is the import map.

00:16 Because we're using native ESM for both Node and the browser, on the browser side we need to tell the browser how to resolve imports like import from React because the import syntax is supposed to, that string is supposed to be a URL

00:32 that points to the JavaScript file that you're trying to load. On Node, there's a module resolution strategy and we have access to the file system. In the browser, we can't just like search around the server's file system to find out where is this React thing,

00:47 and so you have to have a mapping of these import maps. So here we can import React to esm.sh react. So ESM is a handy CDN for creating ESM packages out of things that are on NPM.

01:04 So we'll be using ESM in this workshop series to make that happen, and you can dive through all of this. It's really powerful and actually quite cool.

01:16 It basically creates bundles or ESM bundles on the fly and delivers it to your browser as a native ESM. Pretty neat stuff. The other thing in our index.html that we've got is this UI slash index, and that's going to point to our index file that looks something like this,

01:34 and thanks to our import map, we'll be able to resolve those to the proper modules, and thanks to the location of our index file in the UI directory, it will be able to resolve this in the UI directory of our project. Now, we have to have a server that's going to be serving these static assets,

01:52 and that is Hano.js. So we've got this serve static that's going to be handling everything in the public directory. We'll also want to handle stuff from the UI directory, and then we'll need to handle sending the index.html for all the requests that we're going to be making,

02:08 regardless of whether it has the ship ID in the URL or whatever. And then, of course, we also have database access or data requests and stuff that we'll handle with Hano as well. So this first exercise is just to kind of get you used to the project and kind of explore things.

02:27 Feel free to go through the documentation on import maps and also learn a little bit about Hano, but remember the objective of this workshop is to learn RSCs,

02:38 and so I'm going to try and require as little of you as possible when it comes to framework-specific things like Hano and focus more of our time and attention on RSCs. So we'll be hand-holdy when it comes to Hano and import maps and things like that,

02:54 but I do want you to see what is required to make all of these pieces work together. So let's get into this exercise.