How To Send SMS Messages Using Twilio, Rails, and React

My friend Kevin (check out his blogs🤓) and I have been working on a freelance project for a company called Breakup Space. Their mission is to stop the dating trend of ghosting through templated break-up texts. It has been fun and rewarding to work with a company to make their vision a reality.

While building this app we built a feature that lets the user send SMS messages to a mobile device. Ultimately we nixed this feature but I thought it was really fun to create and wanted to share! There are many popular services to use, I found Twilio and they have really easy-to-follow documents. Twilio can do so much more than just sending SMS messaging but for this article, I will only cover sending texts.

What is an SMS Message?

SMS stands for Short Message Service and is a text-only standard that is usually sent from one mobile device to another over a cellular network. Simply put it is a text message! If you want to learn more check out the Twilio docs.

Twilio Setup

Twilio Process!

If you don’t have an account for Twilio, go ahead and sign up for one here. Next, install Twillio CLI. For our Rails Backend, we will need the Account Sid, Auth Token, and your Twilio Number. For now, we’re finished with the Twilio setup. Let’s move on to setting up our Rails Backend!

Backend Setup

Let’s begin by generating a Rails app with:

rails new twilio-messaging --database=postgresql --api

In the Gemfile, we need to include one gem to integrate Twilio. Add gem 'twilio-ruby' , also uncomment out gem 'rack-cors', and run bundle install.

Generate model and controller

Now we will need to generate the model for SmsMessage, which has the attributes of mobile_number and message with datatypes of string.

rails g model SmsMessage mobile_number:string message:string --no-test-framework

Next will also generate the controller:

rails g controller SmsMessages --no-test-framework

Once we have generated the controller and model, let’s create the database and migrate

rails db:create && rails db:migrate

Config file

Let’s navigate to config/initializers/cors.rb . In the file, replace example.com with * and uncomment out below

For security purposes, we need to create an environment.rb file to store our Twilio info and add this filename to .gitignore. This will prevent our environment.rb file from being committed to GitHub.

Now add your Twilio number, Account Sid, and Auth Token to your environment.rb file. In the fields for auth_sid, auth_token, and twilio number replace them with your own Twilio information! Make sure they are in string format.

Next, navigate to config/routes.rb and set up the create route for sms_messages:

resources :sms_messages, only: [:create]

Now let's implement the creation of an Sms Message. Go to your SmsMessagesController and define the method create.

SmsMessagesController

In the create method of SmsMessagesController, what we want to do is send the message from the client to the provided mobile number using the Twilio API. Follow the code snippet below.

The Frontend Set-Up

For the frontend, I just created a new React app and downloaded styled-components to help the frontend look pretty 😍 . I am also using hooks which you should be familiar with. If you need instructions to set up a React app follow the docs here or to read up on hooks see here.

Create a SmsForm component that will handle submitting the mobile number and text message to the Rails API. In SmsForm we’re going to create a form, an input for the mobile number, a textarea for the message, and a button to submit.

Once the submit button is clicked our app will send a post request with the user’s inputs to our Rails API. One major thing to note is that Twilio needs the mobile number prefixed with a 1. So on line 12, you will see I added a 1 to the mobile number the user submitted.

From lines 53 down I used styled-components to style my React app. Feel free to ignore this part of the code and do your own styling 😊 .

Now, just import the SmsForm component into your src/App.js and you are done!

The End Result!

Start your React application with npm startand you should see something like below.

Now that our frontend is setup we are ready to submit a request to our Rails API! First, if you have not already started your Rails API with rails s. Next in your browser just type in your mobile number and text message and click submit.

You should receive a text message on your phone. Congratulations 🎉 ! You have now officially integrated Twilio into your Rails API. You can check out all the code from this blog, frontend and backend.

There is also so much more you can do with Twilio! Feel free to check out Twilio REST API documentation. One thing I would love to add is validation and error messages for the user’s inputs and add phone number lookups. I hope you enjoyed this blog and happy coding!