Previewing PRs on Netlify

[00:00:00]
>> Here is our JAMstack intro basic upon the site. It's doing what we want. So I want to deploy this, I want to get it up on the Internet. So let's add a tool. There are a lot of ways you can do this. The way that I've chosen to do it today is to use nullify, because nullify free and it's pretty painless.

[00:00:19]
So I'm gonna use, let's do, so we're gonna yard global add netlify-cli. And this gives us some command line tools to quickly set up a new project and all those things. Again, you can do this manually, but it's kind of nice to be able to do it, just right from the command line.

[00:00:39]
If you don't wanna use yarn, you can use mm global or npm install -g.
>> Yep, yep.
>> Yeah.
>> With the Netlify bit, do you have to point it to your account in Netlify, or just does the blank-
>> It'll actually handle that for you when you first run it.

[00:00:56]
So with the Netlify CLI, let me just open that up. So once you install it, it'll kind of pick this all up. So you can run Netlify login. So let me just step through this actually. So I will run Netlify login. And it shows me that I'm already logged in.

[00:01:31]
If you are not logged in, it's just going to step you through the process. But what's really fun about this is now that we've got this set up now that we've got this site deployed and hooked up to get and all of this. Again, we are really kind of the masters of our destiny when we look at at JAMstack to play.

[00:01:47]
So as front end developers, I wanna make a change and I wanna let's say, I wanna try something new. I wanna see how this site looks. If I make the background yellow. So what I can do then is I can check out a feature branch. So let's check out a new branch dash b for a new branch, and I'll say background color.

[00:02:10]
And on this branch, I'm going to make a change to my CSS. And I want the background color, To be, let's go with yellow. And I'm in a risky mood, so I don't necessarily wanna check this locally. I'm just gonna ship it. So we've got our change here, and I'm not gonna even worry about the the Netlify stuff just yet.

[00:02:45]
So then I'm going to commit Okay so then I'm gonna push this branch up and that goes up to GitHub. And then I wanna open up a pull request. And so what I could do is I could go to the GitHub UI, I could find that branch and I could click the Create Pull Request button and all that stuff.

[00:03:15]
But what I'd rather do is just type in pull request using hub and then it opens up them. This, if you aren't familiar with sorry, I just trapped you there forever. If you are familiar with this is the commit message that I just sent. So I'm gonna :wq to save and exit.

[00:03:37]
And that will now create a port request for us. So, I'm gonna open this link, and our poll request is open now and check this out, Netlify's already doing stuff, right? So Netlify is now doing a deploy. So if I click this button, I can see that no it's done or it's almost done.

[00:04:05]
It looks like it wants to let me preview, so I can click Preview and maybe that wasn't my best move, right? But what's really cool about this is like now I have my actual site. So this is the actual site JAMstack intro basic.netlify.com. But my pull request got this unique address that I can share with someone so that I could say, hey, team, I have this great idea.

[00:04:31]
What if we made the site a lot uglier? And they can look at this and give me feedback on it and they can say, hey, that's a terrible idea. Don't do that [LAUGH] but let's say that I'm feeling particularly evil, and without asking for permission, I just go ahead and merge this.

[00:04:52]
So I merge it, and then in Netlify, we'll see. As soon as it merges, it's going to start rebuilding that master branch. And we'll just go ahead and watch this happen should happen nice and fast.
>> Where did you get that link for the pull request?
>> The link for the pull request gets generated by the [CROSSTALK]

[00:05:20]
>> For the link for the pull request.
>> So in your, your list of deploys, it gives you a deploy preview and there's just a button right here. It also gets added in your, here once this is done, it'll show you that the deploy previous ready and you can click this button to see it.

[00:05:42]
So this is And it looks like it actually gave me an even better, like more human readable name for that once the deploy preview is finished. So there are a lot of really nice options for getting this done. But so okay, I've now gone ahead and defaced our company website.

[00:06:00]
And so I was working over the weekend I didn't ask for approval, I just did this thing. And so naturally the team came in and they're like, this is about you gotta you gotta fix this. Instead of me having to go and make this change. Somebody with permissions can just go back in here and say, let's just use this one, like let's go back to the original one.

[00:06:19]
And then when I reload, we're back to the fixed site. And then they can reprimand me in private, and have me fix the push before we put something up. But the instant rollback, right? So we've now kinda moved back to what should be there. So these are the reasons, to kinda go back to your question about why I'm using this over GitHub Pages, is that it just gives us more flexibility and control.

[00:06:42]
We can kinda see, try out things, share it with our team, see what they think. But again, I was able to take my idea to something that was up on the Internet and reviewable by the team without having to do anything other than write down the code for the idea, the rest of it just happens automatically.

[00:07:00]
And I think that really starts to illustrate the power of this approach is that I don't need permission for my team. I don't need someone to stand up a staging server. I don't need to go through a review process that has to get vetted by whoever's coming back from their lunch break in an hour.

[00:07:15]
Like, it's just a very quick, I get to say, what if we did it like this and I put that up and it's good to go. So that is the kind of a quick overview. Basic JAMstack stuff, getting it up on the Internet. And it's still up there, we've got to live on in perpetuity.