Setup Gatsby

[00:00:00]
>> I want to build a little app that will actually use serverless functions. And the app that I want to build is a contact form. So we're going to build a little react contact form and that is going to submit to a serverless function that will actually send an email.

[00:00:15]
The actual email sending part is optional. I'm going to use a service to show it actually working top to bottom, but you can skip that part. I'm going to use mailgun. If you don't want to sign up for a mailgun account, you can just skip it and like console log the output.

[00:00:29]
So to start, let's build ourselves a form. So I'm gonna use Gatsby, because Gatsby gets a lot of the boilerplate out of getting a react site going. So to do that, I'm going to run yarn init -y, which just sets up a package JSON for me. And then I'm going to yarn add gatsby react, and react-dom And to show you what this looks like, here's the package JSON that got created.

[00:01:01]
It just uses the defaults that I have set. And then it's going to momentarily update with the dependencies. Okay, all good. And then for convenience, I'm going to add a scripts key and we'll just put develop is going to be gatsby develop.
>> What was the command again?

[00:01:26]
>> I ran yarn init dash y which is for yes. So I'm basically answering yes to all questions. And then after running yarn init, I just installed gatsby react and react dom.
>> And NPM version of that NPM install.
>> NPMI or install gatsby react and react dom.

[00:01:50]
>> And react dom
>> React dash dom
>> Perfect.
>> Okay. So, once we have that setup, we're going to create a new file. So we'll just start with an index page. So I'm gonna go and create source slash pages slash index.js. I'm not going to go deep into how Gatsby works.

[00:02:12]
I have a workshop that's kind of an introduction to Gatsby and another one that's an intermediate Gatsby course. If you want to go deeper, you can. But if you don't, don't worry, I'm gonna try to avoid any Gatsby specific stuff in favor of just writing React apps today.

[00:02:29]
The one thing that you'll need to know is that Gatsby uses this pages directory as kind of like anything that I create here. So index.js will become index.html. If I created an about j s, it would become about. So that's how the site kind of builds its routing.

[00:02:46]
So in my index.js, I'm gonna import react from react. And then I want to export default and this is going to be our page structure. And I'm just gonna use a react fragment here, so that I don't generate any kind of useless divs or markup. And I'm gonna put a heading that says send a message.

[00:03:12]
And then down here We need to add a form. And that form is going to be a component that we'll import. Let's start up, the Gatsby development server so that we can watch our progress here. So I'm going to run yarn develop, you can also run NPM run develop.

[00:03:39]
And this will start up our site, And once the site gets running, it runs at local host 8000. So let's boot that up. Okay so we've got our kind of simplified site. It just shows a heading right now. And I'm gonna add a couple little things in the styles.

[00:04:05]
So let me add a, in the source folder is where I'm meant to be. I'm gonna add a global.css. And I'm gonna make some site wide adjustments. So the first thing that I wanna do is I wanna set box sizing border box. If you want to skip ahead on the CSS, it's not required.

[00:04:27]
This will work fine being ugly, I just wanted to show how to handle a couple things. We're gonna do CSS only pending states and stuff for the form to show a couple approaches that avoid lots and lots of JavaScript to handle things that CSS can do for us.

[00:04:42]
So I'm gonna set the box sizing to border box. I'm going to then set up the HTML to use some visually pleasing color so it's not stark black and white, will do font family Sans Serif and set up font size of 18. I also want to set the heading to be a little bit darker, so it stands out.

[00:05:10]
And I will set font size of the heading to be a little bit smaller, the-
>> Got the F there.
>> Boy, I'm typing like a pro today. Margin top, we'll set it to REM and we'll text align center. Okay, so now that I've created this, what I can do is head over into this index.js and just import this directly and Gatsby will pick up the styling for us.

[00:05:43]
So I'm going to import. Global.css. And we can see that Gatsby picked it up for us. So what this means is that we are able to just kind of edit styles. Gatsby has some built in CSS handling. You can also use your preferred thing. What we're gonna use a lot of today is called CSS modules, which is not CSS and JS, but it gives us some of the same scoping flexibility, which is nice.