Jamstack Explorers

Split testing with Netlify with Phil Hawksworth

Creating branch deploys

Netlify can deploy each branch of your code repo to a unique URL of its own. This can be very helpful for creating different environments for your site.

Need a staging site, a testing site, and a production site? No problem, Netlify lets you create unlimited environments on within Netlify Edge. This video will show you how.

[00:00:00] When we're building for the web, often what we'll want is to have different environments for different needs. We might want a production environment, which is our live site. We might want a staging environment where we can preview changes and other environments along the way like testing environments or even environments to test specific features. The way that we do that at Netlify is that we build on top of the Git model. We actually create a new instance of your site for every branch that you create but you need to tell Netlify to do that.

[00:00:30] Let's have a look at doing that now. I'm going to do that for a site we've created earlier. I'm looking at this site, the Vapourium, this is what it looks like currently. This is created from a Git repository. If we make changes to that Git repository and start creating new branches, we'll get a new URL for every branch that we deploy. Let's go do that now. Let's go to the site configuration, we'll go to the site settings and we'll go to build and deploy. Then in our deploy context, we get the chance to do some configuration. Let's edit that and we can see that we've specified that the main branch is our production branch.

[00:01:10] In fact, this was picked up automatically from the Git repository but we can configure that here. There's some options we've got for deploy previews. We'll come back to that in another lesson. For now, what we're interested in is our branch deploys. Currently we're set to only deploy the production branch. We could choose specific named branches that exist in our repository or we can tell Netlify to just watch for all branches that are created in that repository and create a build for each of those. Let's do that.

[00:01:40] We save that configuration now. Now what I'll do is I'll make changes in a branch on this repository. In fact, I've already cloned that repository. I have that locally, I'm on the main branch now. We can see our source code here. It's just a simple site with just a few assets and I'm going to make some changes here. What I'll do is, let's make a new branch. Let's call it staging and effectively this is going to give us a staging environment in the Netlify CDN. We'll go move over to that, French. Okay, let's make some changes. Let's perhaps change the title of the site from one product to view them, to rule them all. Let's call that the Vapourium.

[00:02:30] Okay and let's maybe make one more change that's a bit more visible maybe in our product description fancy handmade coffee mug. Okay great, save that change and we can copy updates, make that commit and we'll push, watch for our repository. I'll push our branch to publishing it. It's going to take a look in our Git repo. Here we are. Our staging branch has arrived and since we've made that change in Netlify, we should also see if we go to our deploys that, yes, we now have a branch deploy happening on the staging branch. We could go off and we could see what code had changed. Here we are. Here are our changes, again great for just keeping track of what change is instigated, an update on the site. Let's go in and actually see the build happening. Okay, that's done already. We've seen now that we've got a link to a branch deploy, so we can go to that and the difference between the-- This is our production version on this URL and then our staging one, we have now a URL, which is named according to our branch name.

[00:03:50] We have the branch name dash dash and then the site name. If you had a custom domain name here, you could put this on a subdomain. This is just how things work by default. Now you'll see that we've got a different thing being served on different environments. Both of these are propagated out to the CDN, that Netlify Edge CDN. Effectively we've got different code operating in different instances of the site, but both in the same environment. Really, we have a real like for like comparison of the different environments.

This is great for keeping environments in step.

[00:04:30] I know it can be a challenge otherwise when you've got complex infrastructure to keep in check, but here with this approach from Netlify, what we can do is for every branch that we create, we will get a different URL that tracks the head of that branch. This is a useful thing for lots of things to come and we'll pick up on those in another lesson.


your progress