Intermediate Gatsby with Gatsby Themes preBootstrap Hook
This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "preBootstrap Hook" Lesson
>> Jason Lengstorf: Once we've got our site set up, the first thing that we need to do. Is get our theme set up and running with what's called a Pre-Bootstrap. So we wanna make sure that any folders that we're gonna use, exist, because otherwise we'll get an error. So if we're setting up a theme, typically speaking that theme is gonna look for Data.
[00:00:22] And for example, the way our Docs theme is gonna work, is it's gonna be looking for a folder full of MDX files. So if you install this theme into a site and you don't know that and you don't manually create that folder. By default we would get an error that says, couldn't find directory, whatever.
[00:00:38] So we're just gonna go ahead and check for that, make sure the directory exists before we boot up. To avoid any of those confusing errors and just save that work for the people using the theme. To do that we're going to go into our theme and we're gonna create a file called gatsby-node.
[00:00:53] This gives us access to the Gatsby lifecycle methods during the build, we can do a whole bunch of fun stuff here. And what we need to do here is, we're going to use a library or a node-hook called onPreBootstrap. And this lets us get into the Gatsby API.
[00:01:15] And inside of it, we are going to use the Gatsby store, which is just some information about the running program. And then we're gonna use the theme options, which come in as the second argument to most API hooks. Inside of this, we're gonna get the program out of the store's State.
[00:01:36] Now this is kind of like a deep Gatsby internal. It's basically saying, go into Gatsby store and figure out where Gatsby believes it is. Which you could also get with the or the current directory. But doing it this way just helps control, so that the Gatsby environment will be consistent no matter where you are.
[00:01:58] Then we need to get some defaults, so we need to make sure that the options are always set. So if this is empty, we don't want that to come back as an empty object, because we'll get errors. So we need to get options with defaults. And then after we've got the options with defaults, we need to figure out the content path.
[00:02:22] And then once we know that, we need to check if directory doesn't exist
>> Jason Lengstorf: We need to create it. So the first thing we need to do, is write a little utility function to get these defaults. So there's not really a hard-and-fast rule on how to do this, but I'm just gonna create a utils folder.
[00:02:44] And inside of it, I'm gonna create default-options.js, using my favorite little shortcut. Which is that if you just type out a file path with a slash in it, it'll create that folder for you. And inside of this, I'm going to export a function. And we're gonna set up our options here, so our basePath is gonna default to just the root.
[00:03:06] The path is what the URL will be, so when we create pages, we're gonna create these at the root of the site by default. And we'll allow people to override that if they want it to live somewhere else. Then we're gonna set up the contentPath. So by default, we're gonna look for a folder at the root of the site called docs, and the content would live in there.
[00:03:31] And again, we'll let people override that. And then because of a quirk with the way that MDX works, we need to know whether or not the site is already using MDX. Because we can only have one instance of it running at a time. So I'm going to useExternalMDX and by default we'll assume that the site is not using MDX, and we will install it ourselves.
[00:03:55] And then, because we're just feeding in an options object and setting the defaults in this destructuring here. I can just return these straight up. So we'll do basePath, contentPath and useExternalMDX and that's our withDefaults function.
>> Speaker 2: Should that be module singular?
>> Jason Lengstorf: Sure should, good catch, that would have been fun to debug [LAUGH].
[00:04:24] So yeah, module.exports, not modules.exports.
>> Jason Lengstorf: So with this created, we can go into our File and we'll just include that. So withDefaults, we'll call it that, and we'll just require our utils/default-options. And so I can replace this TODO with just the pieces we need, so we're gonna use the contentPath this time.
[00:04:55] And we'll say withDefaults(options). And so what we're doing is we're taking the user supplied options, dropping it into withDefaults. And then just extracting the one piece that we're gonna use. So then, once we have that, we're going to figure out where we are, and then append the contentPath to that.
[00:05:18] So to figure out where we are, we're going to use the path module. So will require('path') and then we can set up our directory. And that is going to be path.join and we'll use the program, so Gatsby's setup, get the folder where Gatsby is running. And then we will append the contentPath to that.
[00:05:44] So now we've created a directory that is the location on the file system of where content should exist.