Course Code Setup

[00:00:00]
>> So let's take a look at the actual sites that we're gonna use today. So we have a course site, that frontendmasters.learnwithJason.dev/intermediate-gatsby, that is gonna contain all of the lessons that we're gonna work on today. And then the source code for the project we're gonna use today is on github at jlengstorf/frontend-masters-intermediate-gatsby-project.

[00:00:26]
We are gonna fork that repo so that you can deploy it later on. So in fact, why don't we just jump right into that, right? So the first thing that we're gonna do is let's make sure that we have all the requisite pieces. So you're gonna need a GitHub account today, so make sure that you are on GitHub and that you have an account.

[00:00:49]
We are also going to be deploying to Netlify, so if you don't have a Netlify account, you can sign in, or sign up for one that you sign up with your GitHub account, so it takes a couple seconds. We are going to be using the GitHub CLI, which I absolutely love.

[00:01:07]
Is a tool, it's made my life as a maintainer so, so much easier. So instead of having to remember all the Git commands, I can just do gh repo clone, and then I get the repo that I want. I don't have to type out the github.com or any of those, like get at GitHub things, none of that, it's all gone.

[00:01:29]
It's really powerful, we're gonna be using that. We're also gonna use the Netlify CLI, and the Netlify CLI today is significantly more important than it was on the Gatsby intro, because we're gonna use it for local development. It gives us the ability to run our mono repo to manage environment variables, it runs our serverless functions for us, so there's a lot that it's doing that just makes local development easier.

[00:01:53]
So I'm gonna be relying on that. If you don't have that, you can install it with npm install -g netlify-cli, and just get the @latest, I'll go ahead and run it right now. Danger zone to install something fresh right before we start. So the version that we are gonna be using today is, let's see, I've got, Netlify 6.3.4, GitHub version 1.2.1.

[00:02:26]
We're using, or let's get the repo forked and then we'll get everything else. Once you've got both of those, you can do gh auth login, and it'll log you into the account that you wanna be logged into. So I'm already logged in, so I'm not gonna re-authenticate. And then Netlify the same thing, ntl login, and it will say that I'm already logged in.

[00:02:50]
So, in your case, it'll bounce you out, you do the auth, and then you'll be ready to rock and roll. We're also gonna be using yarn today, so if you don't have yarn, which you can check by typing which yarn. And I'm using the old version of yarn, so don't worry about having yarn 2 or yarn 3 or anything, you can use yarn 1, it's fine.

[00:03:12]
That is gonna used for running the mono repo, so yarn workspaces are a really nice way to do mono repos, and I'll show you how it works, it's really nice. Okay, so the first thing that we're gonna do is I already have this clone but for everybody else create a fork of the repo.

[00:03:33]
So, gh repo fork, and then you can just type jlengstorf/frontend-masters-intermediate-gatsby-project. And by running this command, you will create a fork of the repo on your own account, you're gonna need that fork in order to deploy. So if you don't wanna fork, you can also clone the repo, delete the .git folder, and then initialize your own version, whatever you wanna do it's up to you.

[00:04:06]
But if you wanna deploy later, you are gonna need a GitHub repo or Bitbucket or git lab that you can deploy from. But I already have it, so let's take a look at what's in the folder. We have just some starter files here. So the first thing is we've got a readme that's just bare-bones details about the repo.

[00:04:29]
We have a Gatsby config, if we look in this Gatsby config, there's actually nothing in it yet. Package.json, we'll look at that in a second. We've got some Json data, so authors and books that's some data that we're gonna work with a little bit later on, but I didn't want everybody to have to type it out, so we just put that right in the repo.

[00:04:46]
And then an index.js, so let's take a look at what these look like. So our gatsby-config is exporting an empty object, our package.json has the bare minimum dependencies, gatsby react and react-dom. Those are what are required for building a Gatsby site, these are the three that you have to have.

[00:05:09]
I set up the scripts that we need, so we've got the develop command, which is the one that runs the Gatsby locally. Start as an alias for that build, we'll build the site, it'll make it into an actual static site that's publishable. Serve lets you take a look locally at what the published site will look like, so it's a way to take a look at your build site on your local machine, and, Clean will delete the cache and public folders and kind of set you back to a freshly installed or freshly built state where there's no cache or anything.

[00:05:47]
Try not to use this feature. The only time that it really makes sense to use this feature is if you're getting behavior that doesn't make any sense. Or if you're working with the schema and you're doing schema customizations, and you're noticing that why is it giving me an error that files there.

[00:06:01]
That's when it makes sense to do Gatsby clean. Don't use it as your turn it off and turn it on again. Most of the time Gatsby clean is just gonna make your build slower. They do a lot of work to make the cache resilient and to recover it, and keeping that cache makes your local and production builds much, much, much faster.

[00:06:21]
So Gatsby clean is a last resort. All right, then you can see an nvmrc here, so I'm going to just run nvm install, and it's gonna pick up that nvmrc and it'll show that we're using version 16.6.1 now. And with that, I think we're ready to go.