Netlify and IFTTT, push notifications on deployment
After the setup of this new website with Netlify I lost a little the perception of when the website was up to date. Before I had to run the build and deployment manually from my console so I knew exactly when it finished, but now thanks to having automatic deployments on every commit I’m not longer sure about it.
Of course I could go to Netlify’s website and open the remote console to see the progress but what’s the point then on having automatic deployments? No, there is a better solution.
Receiving push notifications on every deployment.
The setup is quite simple. Netlify triggers a webhook to IFTTT and that sends a push notification to the mobile App.
IFTTT is a web service that automates and connects the web. It allows you to perform certain actions (in our case sending a push notification) when specific events across the web happen (in our case a deployment in Netlify).
The amount of services supported is so big that I’m pretty sure you can find something interesting to automate. From Twitter to Instagram, RSS feeds and even changes in the weather forecast.
To start you need to Create a new Applet. The first step is to setup the condition, the IF.
The service that triggers the event is Netlify via webhooks, for that you just look for the Webhooks service and select the only available event of that service: Receive a web request.
Write something descriptive in the Event name field and write it down, you will need it later to complete setup in Netlify.
I personally have 3 events: start deployment, successfully deployed and deployment failed. You just need repeat the same process 3 times.
Now you need to setup the action to perform. Feel free to setup any other action you want, but in my case what I want are push notifications.
Look for the Notification action using the search field.
This service has 2 actions that you can perform. The first one is a simple push notification with only a message. The second one is a rich notifications that can include images (more on that later).
You can customize the push notification message. Write whatever you want to receive, for example: “Website updated!”. This action also has some variable ingredients. The most useful one is probably the Occurred At which will insert the time of the even so you can quickly read when it happened in case you forgot you were updating your website!
Now, the next step is a little tricky. You need to get the URL that triggers the action, and it’s quite hidden.
- Go to your Applets page and select the one you just created.
- Click on the Webhooks link in the path list.
- In the webhooks description page. Click on the Documentation button.
- Finally you’re in a personal page that shows the URL you need to hit for the action to start.
Copy the URL and change the {event} with the name of the event that you wrote in the creation of your Applet.
Netlify deploy notifications
Now the easy part.
Just go to your Netlify deploy settings and add new notifications via webhooks. Select the event type and paste the URL that you copied from IFTTT.
And that’s it! Now you can commit to your repo, Netlify will start a deployment and you will receive notifications on your phone!
Extra: Rich notifications
You can use the Rich notifications action in IFTTT to receive a notification with a thumbnail of your website after it has been deployed.
For that you will need some service that allows you to take screenshoots of websites and gives you a static URL with the latest image.
Sadly I’ve tried a couple of free options but none of them seem to work. If you have any tips about this please send me a message ;)