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.
- Node version 12 or newer.
- Twilio account. Sign up for free if you don’t have one.
- Phone with an active phone number and WhatsApp installed.
In your preferred terminal, run the following commands to install the tools needed for this project.
$ npm install -g typescript$ npm install -g twilio-cli
$ twilio plugins:install @twilio-labs/plugin-serverless
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:
$ twilio login
Alternatively, head over to the Twilio console and grab your ACCOUNT SID and AUTH TOKEN and export them as the following in your terminal
$ export TWILIO_ACCOUNT_SID=<your_account_sid>$ export TWILIO_AUTH_TOKEN=<your_auth_token>
If you are on windows, run:
$ set TWILIO_ACCOUNT_SID=<your_account_sid>$ set TWILIO_AUTH_TOKEN=<your_auth_token>
The twilio cli will use these environment variables to authenticate to Twilio. Next, run the following commands to create our twilio serverless project.
$ twilio serverless:init demo — typescript
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:
$ npm start
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:
$ npm run deploy
You should see a similar screen like the one below. Test your deployed functions by running their respective URLs displayed in the terminal.
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!