How to set up a Twilio Function that sends a Twilio SMS or WhatsApp message with TypeScript

A serverless function, as the name suggests, is a single purpose, independent function, deployed in a managed infrastructure. By the sole fact that it lives in a managed infrastructure, the responsibility of ensuring your function is secure, always available and scale as needed, is offloaded from you and is handled by the infrastructure company, at a reduced cost! Twilio, provides this serverless environment, which enables developers to quickly develop and deploy Twilio specific functions. In this tutorial, I will take you through how to set up one, to send an SMS and a WhatsApp message.

Prerequisites

  1. Node version 12 or newer.
  2. Twilio account. Sign up for free if you don’t have one.
  3. Phone with an active phone number and WhatsApp installed.

Getting Started

In your preferred terminal, run the following commands to install the tools needed for this project.

The commands above installed twilio-cli globally to manage our twilio resources from the terminal and typescript, to add static types to our Javascript code. A clean installation of the twilio-cli doesn’t ship with the serverless plugin, which we will need in order to build our functions. To add this plugin, run the following command:

It however, requires us to first authenticate to Twilio before creating a project. To do so, run the following command to login via the terminal:

Alternatively, head over to the Twilio console and grab your ACCOUNT SID and AUTH TOKEN and export them as the following in your terminal

If you are on windows, run:

The twilio cli will use these environment variables to authenticate to Twilio. Next, run the following commands to create our twilio serverless project.

This bootstraps a typescript project with the following directory structure.

The src/assets directory stores all our project assets and all functions are defined in src/functions directory by default. You can, however, specify a different folder for the assets and functions while creating the project by using the — assets-folder and — functions-folder respectively.

The tsconfig.json file defines the compiler options needed by typescript when building our project. These options include:

- module- sets the module system for the project. This can be AMD, CommonJS, System, UMD etc.

- target- Specifies the ECMAScript version for the project.

- outDir- Where the transpiled JS files will be emitted to. For our case, edit this configuration to “dist/functions”

- strict- enables strict type checking of the JS files.

- sourceMap- generates a corresponding source map file for all the transpiled JS files.

- skipLibCheck- skip the typechecking of declaration files. These files normally have the *.d.ts extension.

To learn more about the configuration options above, you can have a look here

For the scope of this project, delete the assets folder and all the files defined inside the functions directory as we will not be needing them.

Building Our Functions

Create a file called whatsapp.ts in src/functions folder and add the following lines of code:

The above code uses the Twilio client to send a whatsapp message to the specified number. The handler function is an interface between Twilio Functions and your application logic. It accepts three main arguments which are:

- context — This is an object that provides access to environment variables and helper methods that can be accessed at execution time. In our case, we are using the context object to get access to the TwilioClient to enable us to send a WhatsApp message.

- event — This contains the request parameters passed to our function.

- callback — Completes the execution of our handler function and emits the response passed to it.

Ensure to replace these values <your_phone_number> and <your_whatsapp_sandbox_number>.

Since we will be using Twilio functions to send an SMS too, next, create another file called sms.ts inside the functions folder and add the following lines of code:

The function above sends a text to the number specified.

Ensure to replace these values <your_twilio_phone_number> and <your_phone_number(ideally the phone number you registered in Twilio with during account setup)>

Activate Twilio Sandbox For WhatsApp

Before running our application, we need to activate the Twilio sandbox for WhatsApp in order to test our WhatsApp function that we have just created. In the Twilio console , head over to “All Products & Services” tab to the left and select “Programmable Messaging”. Next, click on “Try it Out” then “Try WhatsApp” to activate the sandbox as shown below:

Send the code displayed on your console (join ****), as a WhatsApp message from your personal mobile number to the WhatsApp sandbox number indicated in the page. After a successful activation, you should receive a confirmation message stating you are connected to the sandbox and are all set to receive and send messages.

Testing Our Functions

To start the application locally, run:

You should see a similar output like below.

To test the functions, open the links in your browser and you should expect an sms and WhatsApp message to be sent to your personal phone number.

Deploying Our Functions

Now that we have verified the functions work as expected, the next step would be to deploy our functions. In your terminal run the command below:

You should see a similar screen like the one below. Test your deployed functions by running their respective URLs displayed in the terminal.

Conclusion

Congratulations on reaching this far! You can learn out more about Twilio functions here and I can’t wait to see what you build!

Daisy is a software engineer who enjoys design and frontend development. Let’s chat!

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store