How to Automate Vercel Deploys with Twilio SMS webhooks

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.