Transcript from the "Deploying a Dynamic Site to Netlify" Lesson
[00:00:00]
>> Why don't we go ahead and build ourselves a deployable site? So because this is a monorepo, Gatsby sites by default, they're gonna build to a folder called public. This is what the build folder looks like. And they've got this .cache folder which needs to be kept around between sites.
[00:00:20] And now we told Netlify to look in the the netlify.toml here but once it looks in here, it needs to find another netlify.toml to tell it what the rules are. I mean, we could go configure this to the UI as well but if we're sending this to other people, it's just easier to not make them do the configuration manually when we can commit it into the code.
[00:00:45] So we wanna make sure that it uses the right workspace command. So we're gonna say yarn workspace site build is our command instead of the autodetected Gatsby build that we would get. We're gonna set our publish directory to public. And because it's in this folder, it's relative, right?
[00:01:02] So if we close up source, we're in this directory and we wanna get to public. And then I also wanna make sure this is a quirk that, honestly, this is something that I think Netlify needs to improve. But right out of the gate, we don't have a lock file in this folder.
[00:01:21] The lock file is actually outside of it in the top level. So by default, Gatsby won't use yarn. So I'm gonna tell it to use yarn by setting an environment variable here. And this is one way that you can set an environment variable but as you can see, I don't know, this doesn't scale, right?
[00:01:43] Having to put a ton of these in, that's not gonna fly forever, right? So for one, okay fine, all good, don't care. But for multiple, it's not gonna work very well. The other thing that we're doing is we're using these client-only routes where we want these catch balls.
[00:02:01] And that means that there are redirects being done. And in order to get redirects to get picked up properly, we need to install a plugin that will sync those between Gatsby and whatever host it's using. So for netlify, we will yarn workspace site add, and then we're gonna add gatsby-plugin-netlify.
[00:02:22] And this is going to make the redirects work, and it adds some other stuff like content security policy headers and iframe security and some things that will help with your web speed score. Once we've got that plugin, we can just toss it at the bottom of our gatsby-config.
[00:02:38] Doesn't need any options or anything. So we'll put in gatsby-plugin-netlify, okay? And then we can just add all this stuff. So let's add everything git commit and say, site ready to deploy. Let's push it. Okay, so what I'm gonna do is I have to use this progress branch, which means I have to do an extra step because by default, what netlify will do is run off the main branch.
[00:03:20] So I'm gonna do a netlify in it. And actually, I wonder if it'll let me set the branch, that will be cool. Nah, that's okay. So let's do netlify in it and this is going to walk me through setting up a new site. So I'm gonna create and configure a new site.
[00:03:40] And then I'm gonna choose my own team, and I wanna give this a name. So let's call it frontend-masters-intermediate-gatsby. That's already taken, let's try another one. frontend-masters-intermediate-gatsby-project. There we go. All right, so we already know that we've got the base set to site and because it's leading our netlify.toml, well now it can see it wants yarn workspace I build, good.
[00:04:13] It's pulling public, right. We can ignore that one. It needs the essential Gatsby plugin. This is gonna keep the cache around. It's gonna make Gatsby functions work, it does a bunch of stuff like that. Theoretically, you could opt out of it but I don't know why you would.
[00:04:26] So we will let that run and then, we're off to the races. So let's open this. And what I have to do is because I, see it open in the wrong browser, let's pull it on to this one. Because I changed my branch, I'm just gonna jump into the site settings and go to Deploy.
[00:04:47] Let me make this a little bit bigger so it's easier to read, and then go to Build & deploy. And then I'm gonna change the branch. And I'm just gonna build this progress branch that we've been using. So let me save that, head out to my deploys. You don't need to finish that one, so we can cancel it.
[00:05:04] And then I'm gonna go to here and let's just start again. So I'm gonna deploy the site. All right, so here we go. We're deploying the sit and this is going to install Node. It's gonna install all of our packages, yarn, all the things that we need and then it's gonna run our yarn workspaces command.
[00:05:22] It'll also compile our functions and store the cache and all the stuff that we don't wanna have to do ourselves, so that we can just move on with our day and be happy about having deployed a site instead of thinking about how to get that site deployed. And this will take usually about two minutes the first time around, and then it'll drop down to about a minute on repeat deploys.
[00:06:00] The thing about Gatsby is that it's a really large NPM package, but we don't ship most of that to production, right? Gatsby is a build tool. So it pulls in a ton of stuff for building sites. And then the vast majority of that is only used for the build, it doesn't actually get used in production on the client site.
[00:06:23] So it's important to look at not just the package size because that can be misleading. It's important to look at what actually comes out of the production build, cuz a very small package can produce huge bundle sizes if it's not optimized. And vice versa, huge package that's optimized well can create some pretty tiny bundles.
[00:06:48] Okay, so we're running the build, you can see it's installing this plugin. It doesn't have a Gatsby cache cuz this is the first time we're building the site. It's running that yarn workspace site build, that's what we wanted. So off to the races we go, and this will just take a few more seconds.
[00:07:07] And then once this finishes, netlify will bundle the functions, push all these pages up to the CDN and then we will be live. There we go. Function's bundling, that's done. It's deploying the site, that goes and then got ourselves a site. So we can go look at this now.
[00:07:28] We've got our site up on the Internet, we can go to our Books, we can go to our Authors, we can go to the accounts. And we go. If we log in, great, log out, great. All the things that we wanna do, right? It's all doing what we want, and we've got our optimized images.
[00:07:47] So this is pretty slick. It's doing what we want. I'm happy with this, we're able to get it up pretty quickly, and it's fairly painless to get this up and running. And now any changes that we make will also automatically build and deploy.