Introduction

This article will discuss how to build a serverless application with React capable of sending SMS messages using Twilio Programmable SMS. With the rise of serverless architecture, developers can choose to focus on code and leave server management and configuration to third party services. In this tutorial, we will use Vercel to build and deploy serverless functions.

For the complete code, see this GitHub repo.

Prerequisites

• A Twilio account and phone number that can send SMS messages (you can sign up for a Twilio account for free here)
• Node.js
• React Dev Tools (optional)
• Vercel Account
• Any code editor of your choice

Setup

This tutorial will use Create React App to set up the initial React app quickly. Install Node.js on your local development machine if you haven’t already.

Navigate to your project’s parent directory in your command prompt, and run the following commands:

npx create-react-app react-twilio-sms
cd react-twilio-sms
npm start

The last command, npm start, will start the development server. In your browser, head over to http://localhost:3000. You will see the following:

The next step is to clean the sample code that’s generated by create-react-app.

• Delete App.css, index.css, and logo.svg from the src/ folder.
• Remove the line of code that says import './index.css'; from the top of src/index.js.
• Modify App.js to look like this:

import React from 'react';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Check back at http://localhost:3000; the page will be empty now.

#code #tutorials and hacks #react