Ryan Chenkie: [0:00] We've now got a small subset of the Orbit application moved over to Gatsby. Since Gatsby is well suited to making websites where you can pre-generate your contents, we're going to consider that Gatsby might be useful for our marketing pages.

[0:14] For example, we might want this main page of our applications website to be a Gatsby site. Then, if we had other marketing materials, those might be a good target for Gatsby as well. However, the other pieces of our application like the dashboard and the inventory area, since those use dynamic data, they're not terribly well-suited to what Gatsby has to offer.

[0:33] Now, by all means, we could take the whole application, the whole Orbit app, and we could make everything into a Gatsby website, but there is an argument to be made to say that those pieces of the application might not be terribly well-suited.

[0:45] However, in this module, we are going to take certain dynamic portions of an application, and we are going to make those worked with Gatsby. Of course, we're going to see how to deal with authentication throughout all of it.

[0:56] For this small subset of our Orbit application, we've got that the marketing page, we've got the sign up page, we've also got the login page. If we go to log in, just as we normally would, we're going to get over to a user profile. Now, when we log in, instead of going to a dashboard, we just go to this profile page.

[1:17] The idea here is that this content that is going in to power the profile page, this is all fetched from the backends and it's made possible through our typical JSON Web Token authentication. In terms of differences when it comes to the code, we can take a look at the code base for this module, "Orbit app is now a Gatsby app."

[1:35] In here, you're going to see all sorts of Gatsby config and there are a couple differences to point out. If we take a tour of the source directory, we'll see some things that look the same and also some differences. We've copied over most of the components from the Create React App variety of our Orbit application.

[1:52] We've got our common components, and then, we've got our other components, and we've got some new ones here as well. We'll dig into those as we go. We've still got AuthContext and FetchContext. Then, in the pages' directory, this is going to look a little bit different now.

[2:06] In our environment file, we have got this Gatsby API URL, which actually just points to the same localhost:3001 domain that we've been using up to now. If we take a look into the server.js, so let's go up to Orbit API and take a look into server, we've now got a new endpoint, which is going to give us profile data for the user. We've got this endpoint of API/profile.

[2:30] This endpoint is going to take the user ID coming in on the request and it's going to get that user's profile, and the data from this endpoint is going to power this profile area. One other difference to note here on the frontend is that we're now serving at localhost:8000 instead of :3000.

[2:45] That's because that is the default port that Gatsby uses for development. One other functional change here is that the link to the user's profile is now found here in this drop-down.

[2:56] The last thing to note is that this module is definitely not an intro to Gatsby. It's not going to cover the basics of Gatsby. It's not going to go into static site generation as a concept. Instead, it's just going to focus on the pieces that you need to build in if you want to add authentication to your Gatsby app.

[3:13] If you haven't already gotten your feet wet with Gatsby, I'd recommend doing that before you do this module. I'd recommend you do some tutorials or some other courses that focus specifically on Gatsby. Then, when you are at least a little bit comfortable, you can come back to this module and find out how to build in authentication.