Kent C. Dodds: 0:00 Before we get started with the Bookshelf app, I thought it might be useful for me to give you a bit of a lay of the land of how the application is created in the first place, as well as how things are configured in this app so that you aren't confused as you work through these exercises.

0:16 This is a Create React App-based application. This means that we are using the tool, React scripts, to run our build, our development, and a whole bunch of other things in our application. You can learn more about Create React App from create-react-app.dev. Here, if you go to Getting Started, you'll learn how to create your own React app.

0:40 We don't bother going through this in the workshop because it's pretty much copy-paste this thing and it's all created. The other thing I want to tell you a little bit about is some of the custom configuration that we have set up in here. If we go to our package.json, you'll notice we have bunch of dependencies.

0:55 You won't have to install any dependencies. Every one of the exercises has all of the dependencies installed. You don't need to worry about constantly npm installing a bunch of stuff.

1:05 They're all built-in right here and then we have these big lists of scripts. Now, you're mostly using the start script, and the test script, sometimes you'll use the build script. We also have the test end-to-end script here as well.

1:22 You can dive into some of the packages that we're using for this, like cypress, start-server-and-test. We also have our regular setup script here and some things for my automatic workflow to automatically update exercises and make sure that we don't break anything.

1:40 There are some things within the configuration of this project that are really 100 percent geared toward making your workshop experience better, but you don't actually work with at all, as you're working through the workshop. It's pretty much start, build, and test, and then test:e2e that you're going to be working with through the course of the workshop.

2:02 Feel free to dive in and see what these different packages are. Here, we have react-scripts for several of this, but it's not super critical that you get a solid understanding of these things for the purpose of the workshop.

2:14 Then we also have custom jsconfig.json. We're not using TypeScript in this particular workshop, but we do want some of the niceties of VS code. We use jsconfig.json which will give us some type completions for cypress, as well as some niceties on this source for the base URL.

2:36 What this allows us to do is quite interesting. If you dive into one of the lower level files here, if you go to the book right here, you'll notice that we're importing {useBook} from 'utils/books'.

2:49 Now, we're not getting any sort of warning or anything, but I promise you that this is not a module that's coming from node modules or npm or anything like that. This is pointing to the utils directory /books right here. We're importing that module. This is working. Thanks to our JS Configuration, which we've set to say the baseUrl as source.

3:10 When we have some import right here, it's going to check our source directory first to see if there's a file available in that directory. If that doesn't match anything, then it will check the node modules directory like it does normally when you're importing from our node modules there.

3:29 That's one thing that you'll notice all throughout this workshop as we're importing things starting from the source directory in quite a few places. It makes things really nice because the alternative is to add a bunch of this and I'm not a huge fan of doing that.

3:44 That is one thing that you might be a little bit confused about, but hopefully, that makes sense of why that's working and you don't have to do relative paths for a whole lot. We do relative paths for some things but not for a lot.

3:58 Another thing that's unique here is we have this Jest configuration. Now create-react-app and react-scripts comes with Jest configuration built-in, but we've added Jest configuration here for the purpose of the workshops.

4:11 Normally, if you're building a normal application, you're using create-react-app. You won't have to configure a Jest at all. It will be baked in, but we've configured it ourselves here, because I needed it to be able to match different things in a special way for our exercises, as we go through the testing exercises.

4:31 That's why we have configuration for Jest. Other than this, this is exactly the same configuration that you're going to have in a stock react-scripts project, but I thought I'd show you this just so you're not confused about what this Jest configuration is all about.

4:45 The last thing here, I wanted to show you is we are deploying to netlify. It's pretty simple. We're running that same set of command that you run which validates the project and everything and then we publish the build directory. We also are using netlify-plugin-cypress so that we can run our cypress end-to-end test. We run that on netlify's CI.

5:06 Here we have the-react-bookshelf. This is open source. You can't see some of these things and you can take a look at the deploys. You'll notice we're deploying every single exercise branch to its own individual netlify site. That's why we have production deploy URL's for each one of the exercises so that you reference with the production build of each one of this it's going to be.

5:29 That's a quick rundown of the Bookshelf app and how it's configured and built out. I'm excited to run through this with you. Let's dive in.