Sending an SMS Text Message with Twilio SDK

We’re at a point now where you can deploy back-end-like functionality onto a serverless environment without the need of creating a Node or Ruby on Rails environment and without Heroku or AWS. You can just deploy what are basically discrete functions on a serverless architecture without configuring servers or doing any work with servers. This is cutting-edge work that has yet to hit critical mass (like blockchain, IoT, Ethereum, etc.).

Note that serverless computing is not the same as microservices, but that’s where this is all heading. You can build an entire microservices architecture on a serverless stack. Microservices are onerous for a small startup — it’s over-optimization. Running 10 nodes of a microservice requires different server architectures for each, and you end up paying for all the servers that are required. But with a serverless architecture, you only pay for the compute — the raw compute cycles and in some instances the request volume.

Let’s do a short tutorial implementing pre-written code to guide you through deploying a live function on the Turbo platform.

This tutorial is done on a Mac. Terminal code is denoted by a single line starting with .

SMS Text Message with Twilio SDK

First, let’s create some basic repos to help you get your head wrapped around the process. We can start using a CLI called Turbo: a project scaffold generator for Node, React, and Redux projects.

Make sure you have the right Node version

$ node -v

Anything over version 6 is suitable.

Couple global installs:

$ sudo npm i -g gulp
$ sudo npm i -g webpack
$ sudo npm i -g turbo-cli

Head to www.turbo360.co and create an account if you don’t already have one.

In Terminal, navigate to where you do your programming — for this tutorial’s purposes, that will be the desktop.

$ cd ~/desktop

Create the Turbo project with the name sms-demo. We’re creating a project that will deploy a serverless function that sends a text message. Navigate to your project directory and install npm for dependencies and node modules.

$ turbo new sms-demo
$ cd sms-demo
$ npm install

First, we’ll deploy to a live staging environment and put it on Github right away. After, we’ll hook in the functionality. This will give your project a rich commit history. Let’s head to the turbo website again and create the corresponding project on the Turbo platform. Log in and click “Create App” in the menu. Name your app “sms-demo” with an optional description (maybe “Send Text Messages!”). Creating that will bring up an overview dashboard with an “App ID” in the top right corner. Highlight and copy the ID. Back in Terminal, connect your project with the app. We’ll also perform a quick deploy to staging to confirm everything worked.

$ turbo app PASTE_APP_ID_HERE
$ turbo deploy

Upon completion, you will see a DEPLOY COMPLETE: WEBSITE_URL line in the terminal code. This is your staging environment that is live on the internet — visit it in your web browser if you would like. Also check that running $ turbo devserver displays in Terminal that the devserver runs on http://localhost:3000. Press CONTROL-C to turn off the devserver for now.

Now you can head to a code editor of your choice and examine the code that has already been set up in your project environment. Out of the box, a Turbo scaffold gives you a readme with proper markdown and instructions. Pushing this to Github will eliminate the need for you to create one for any project.

While in your text editor, replace the code of the .gitignore file of your project environment (sms-demo) with what’s below.

Now, let’s commit the project to Github.

$ git init
$ git add .
$ git status
$ git commit -m "initial"
$ git status

This sequence of commands should end with a message letting you know you have a “working tree clean”. In your web browser, go to github.com and create a new repo named sms-demo. In the page that pops up after creating the repo, under “…or create a new repository on the command line”, copy the line similar to what is below.

git remote add origin YOUR_UNIQUE_ADRESS.git

Now paste it into Terminal to run, along with pushing an origin master.

$ git remote add origin YOUR_UNIQUE_ADRESS.git
$ git push -u origin master

Reloading your Github repo page will bring up a well-formatted readme and everything — instructions included. This is an enforcement of best practice; Turbo guides the user into always using best-practice for developing.

Now, let’s build a couple bits of functionality. This will accentuate serverless deployment functionality. We call these units of functionality that are deployed on Turbo, vectors. Run the terminal code below to build the files. Then deploy again.

$ npm run build
$ turbo deploy

If you navigate back to turbo360.co and look at your dashboard, you’ll see the “sms-demo” app come up. Clicking on the app will bring up project details. Locate the “Public Page” link and click the link. This is a page for your project with the readme displayed. This readme is automatically adjusted for changes made to it with every deployment.

The code for the funcitonality of the project is provided below, this article will not be a guide to developing that specifically.

In your text editor, expand the vectors folder of your project. Turbo vectors support two runtime environments: python and javascript. Open index.js of the js folder. Delete the code there and paste in the code above.

Notice at the top of the file that we have two dependencies we need to install: superagent and twilio. Let’s install those back in Terminal.

$ turbo install superagent
$ turbo install twilio

Looking through the code we can gather the basic structure of it. There’s req and a res on line 8 — a request and a response. This is very similar to Node Express architecture where you send the response back and the res object. The request object is looking for two parameters: the message and the to query. It sends the sms to the specified phone number. Let’s run the Turbo devserver on Terminal now.

$ turbo devserver

Now, the vectors endpoint is the base URL *slash* vectors *slash* the vector name (in this case, sms): http://localhost:3000/vectors/sms. At this point, navigating to this in a browser will give an error because there’s no message parameter. We can add the message query parameter and the to parameter to eliminate all errors: http://localhost:3000/vectors/sms?message=hello!&to=INSERT_PHONE_NUMBER. You can insert your own phone number (just successive numbers, no hyphens) into this and have a text sent to you, ensuring everything is working so far.

Time to deploy vectors on Turbo. The vectors environment is a full abstraction of a server-less architecture for the end-user.

$ turbo vectors

Once the functions are up, there should be an endpoint URL given in your terminal window. You can copy and paste this URL into your web browser, and add your vector name (in this case sms) to the end along with the required parameters like we did above to test the live endpoint of your function.

Let’s finish up the git sequence.

$ git status
$ git add .
$ git status
$ git commit -m "sms vector"
$ git status
$ git push origin master

The GitHub code is now updated. As good guidance, you should also update your readme with instructions on how to test the function and give a full example. To turn this function into a presentational or portfolio piece, you should add a theme to the local host page that is run with the devserver.

$ turbo theme
$ turbo theme THEME_NAME
$ turbo devserver

Now, navigating to the local host in your web browser will show a nice UI. This gives you a raw theme that you can customize this however you would like. A good feature would be to have input fields where the user enters their message and phone number to test your function easily (this is done in .../sms-demo/assets/js/app.js with just javascript). Make sure to commit the change again to keep the theme.

$ git status
$ git add .
$ git status
$ git commit -m "hyperspace theme integration"

Deploy to Turbo and the page will now be live.

$ turbo deploy