Show Build Status with Netlify

Speaker 0: Netlify is a platform that lets you build and deploy web applications. So it will take code, it will run any build scripts that are required, and then it will deploy the output of that build script. Now this episode of quick connect is all about increasing visibility into a specific deploy, so people know whether it has been successful or not directly from within directors. So people who author content or author updates to content can see when that content has been successfully deployed or perhaps when it hasn't because there's been a problem, and they know that there's some intervention needed. So let's get started.

The first thing we're going to do is head over to flows, and we're going to create a new flow. I'll call this deploy updates, And we're gonna make this a webhook trigger with a post method. Once we create this flow, we are now given a URL. Whenever this URL receives a post request, the flow will begin. So now we're gonna head over to Netlify, and I've set up this little project here.

Very minimal, but it does have a build step, which is important. And we're going to create a new deploy notification, which is an HTTP post request. And in here, we're gonna put the URL that we have just generated from our flow. Now when it comes to which event to listen for, we are going to pick deploy started. So this URL will receive an update whenever a deploy has started.

We'll hit save. While we're here, we're also going to immediately add a second post request for when a deploy has succeeded, and we're gonna send that to exactly the same URL. We're just gonna do when they've started and succeeded today, but in reality, you'll want to set up a third one for when something has not succeeded, when there's been an error. This is actually all we need to do right here, right now. Let's head over to Directus.

Actually, no. Let's not head over to Directus. Let's trigger a deploy and see what happens. So let's deploy our website. And what Netlify is now doing is it's going to grab the code.

It's going to grab all of the dependencies, then it's going to execute the build script that I have provided, which should take almost no time whatsoever again because it's a very minimal site here. There we go. They'll all fill in, and now the site is live. So let's refresh our flow here. And I'm not sure what you might be expecting, but there are actually 2 invocations of this flow.

The first one, if we look at the payload, has some interesting information. Firstly, it has a build ID. So this is for any given deploy, this build ID will stay the same. It has the name of the website, which is also useful because one Netlify account, could be hosting multiple websites, and you may want this flow for multiple sites. For example, at Directus, we have a website, and we have the dots, and they are both deployed by Netlify.

And we may wanna reuse this flow to share the logic. We also have, what else is interesting here? The state. So at the beginning, a state is always building. That is the first step pair after initialization.

Now if we look at the second invocation, it looks almost identical, except the state is now ready because the build succeeded. The state could also not be ready. It could indicate there's an error, should there be 1. But, otherwise, it's the same. The build ID remains the same.

The name of the site stays the same. So first thing we're gonna do here is actually first thing we're gonna do is determine whether or not this is a brand new item or whether this is an update for an existing deploy. So what we'll do is we'll create a condition. I will put in this little default here, except I'm gonna change the values. So it's going to be Bobby.

Inside of the body, there was a state, and we want to check whether that state is equal to, oops, building. Oh, building. Like so. If it is equal to building, that means this is a brand new entry. Otherwise, it means it's an update, and either there's been a success or a failure.

Now in the case that this is successful, we want to store this new deploy in directors. So let's set up a collection for this. I'll call it deploys, and I'm going to make the primary key build underscore ID and make that a manually entered string. There are loads of values we can add here. I think what's useful for now is date created and date updated.

Going into the data model, we want to add a state. You could, of course, chain covers as displayed. I'm just gonna make it a text input for now to keep it easy. The name of the website itself. And I think that's all we need, the build ID, the name of the site, and the state.

Fantastic. So now let's go back to flows. And let's say when this is a brand new item, I e, building is true, we're going to create a new item in the deploys collection. We'll give it full access, and we're going to save 3 keys. Firstly, the build ID, which is required, is going to be equal to trigger dot body dot build underscore ID.

Next was the state, and finally, the site. The order doesn't really matter here they'll all get saved in the correct fields. Great. I'm gonna hit save. I'm just gonna double check.

Was it called site? No. It's called name. So, I will just go and edit that. I had a had a feeling it was wrong.

So that's name, and the value is actually also name in the payload. So let's hit save, and let's retrigger a deploy. We'll just have to wait a moment for that deploy to start and then complete. And what we should see is a new item is created in the collection when it is first when the build first starts, And nothing should currently happen when we get the updated, when we get the update saying that it has been successful. So we see successful successful.

Refresh here, and we should see 4 logs. Correct. The first one has been created in the collection. We see there. Quick connect demo building, and there's the build ID in Netlify.

Now the latest one has a validation error because it was false, which means nothing then happened, which is fantastic. The last thing to really do here is on the reject route of the condition is we're gonna update data. We know it already exists because the first, the first payload we get for each deploy creates the item. Now we just get to update it, which is nice. So what we're gonna do here is we're going to update trigger dot Bobby dot build ID because we know that that is the unique identifier for the item in the collection.

And all we're gonna do here is update state. Oops. So that's going to be, the trigger dot body dot state, which could be success already, or it could be something else. So let's hit save. Let's save again.

Let's retrigger that deploy one more time. And you can imagine that this deploy isn't triggered manually. It's triggered because a user has updated something indirect or for some other reason, there is a a rebuild of the application that's taking place. So it's going ahead. It's building it.

It's going through all those steps. If we look over here, we now see building. If I refresh again, still building. If I refresh again, still building. What's happened there?

Let's take a look. Oh, you don't have permission to access this. This had incorrect permissions. This wants to be full access. Fantastic.

So let's go, and we will now trigger that deploy one more time just to validate everything is set up correctly. So we should expect this to take 10 ish seconds, 10, 15 seconds like it has in the past. Basically, the moment it hits that build step is pretty instant just because of this specific applications. But builds can take, you know, 10 minutes sometimes, if necessary. So now if we look at this collection, we see that it's ready.

So that's the 3rd deploy. We did one at the very start. We did one just now to test it, and that was a problem. And now that we see it's ready. So that is a little bit of, of information on how you can connect Netlify.

We can also see date created, date updated. You know, we can sort by date created, date updated, whatever. And then, you can use this to find the deploy that's just happened and, share that with your team. Hope you found this in this episode of quick connect interesting. This general setup will work across hosting platforms.

The Netlify is the one we use, so it's the one that I wanted to show off. Until next time, have a fantastic day, and I'll see you in the next episode.