How to Automate Vercel Deploys with Twilio SMS webhooks

In an earlier article on this blog, I taught you how to leverage the power of webhooks to automate Netlify deploys. In this tutorial, you can follow along as we tackle Vercel,a deployment and collaboration platform for frontend developers that is similar to Netlify. I will show you how to build a service that triggers Vercel deploys via SMS so that once an SMS with a specific keyword is received, the Vercel build is triggered. In order to do this, we will be connecting Twilio webhooks with Vercel’s webhook equivalent, deploy hooks.

After reading this post, you will learn how to :

• Configure Vercel deploy Hooks
• Configure Twilio webhooks

We have written a couple of articles on the basics of working with Twilio webhooks - I suggest you read our Twilio feature and best practices guide before continuing with this post.

Setting up the Vercel and Twilio integration

Configuring Vercel’s Deploy Hooks

To start building this service, we need to configure Vercel’s deploy hooks. Once this is done, you will be provided with a URL that triggers Vercel builds when it receives an HTTP request.

1. First, head over to your Vercel dashboard and select the project that you would like to set up automatic deploys for.
2. Navigate to the Settings page of your project, and select the “Git” menu item.
3. Scroll to the “Deploy Hooks” section, write a suitable name for your deploy hook in the menu, and select a branch to be deployed from the dropdown menu.
4. After filling the form, click the “Create Hook” button. If everything goes well, you should receive a URL, which is your deploy hook trigger.

It is important to note that Vercel deploy hooks are only available for projects connected to a Git repository.

Creating A Server

In this section, you will learn how to set up a server that makes an HTTP request to the trigger URL, once it has received a webhook notification from Twilio’s webhooks.

Start by initializing a new NodeJS project, and add the following lines of code to the root file of your project:

const express = require("express");
const app = express();
const request = require("request");
const bodyParser = require("body-parser");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const TriggerDeploy = () => {
  const options = {
    method: "POST",
    url: "https://api.vercel.com/v1/integrations/deploy/xxxxxxx",
    headers: {
      "Content-type": "application/json",
    },
  };
  request(options, function (error, response) {
    if (error) throw new Error(error);
    console.log(response.statusCode);
  });
};

const hasWord = (str, word) => str.split(/\s+/).includes(word);

app.post("/", async (req, res) => {
  res.status(200).send();
  const body = req.body.Body;
  const shouldTrigger = hasWord(body, "deploy");
  if (shouldTrigger) {
    TriggerDeploy();
  }
});

app.listen(3000, () => console.log(`App is running on port 3000`));

As seen in the code snippet above, if you receive a request that contains the word “deploy,” you should configure your Web Server to make an HTTP request to Vercel’s trigger URL. Make sure to update the URL field in the TriggerDeploy function above with the URL you received after creating the deploy hook over at Vercel. With this server in place, you can use a local tunneling tool like Ngrok in a development environment to get a URL. The URL for this server is required to configure Twilio webhooks in the next section.

Configuring Twilio Webhooks

It is now time for us to walk through the set-up of Twilio webhooks.

1. To get started, head to the phone number tab on the Twilio console, scroll to the messaging section, and change the value of the “Configure With” field to “Webhooks”.
2. Next, input the URL of the server from above into the “A Message Comes In” field.
3. After filling the form, save the settings.

At this point, you are good to go. Incoming messages to your Twilio phone number will now automatically trigger Vercel deploy builds.

Before going to production

Now that we have a working integration, there are a few things we must talk about. Going to production has its challenges specifically with webhooks. Missing one or failing to properly synchronize has consequences. We published a whole guide to help you with this, you can find it right here.

Deploying integration to production

Before you can deploy your service to production, there are still some loose ends that need tying up. Now, you need to deploy your web server to a proper hosting service like Heroku.[Learn how to deploy a server on Heroku]

After this, you should also set up Hookdeck. Hookdeck controls ingestion and errors in webhook connections, ensuring that you will not miss out on any webhook notifications sent to Vercel.

Once this is done, you just need to update the webhook URL field over at Twilio with the new URL Hookdeck has provided, and your service is complete!

Conclusion

In this tutorial, we have learned how to automate deploys to Vercel using the power of Webhooks. It’s not as hard as you think - especially when using Hookdeck!