To make the most of the resources in this post, you should have:
- A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade your account)
- A working knowledge of React
- Node.js installed on your machine
- npm, yarn, or another package manager
twilio-node server-side helper library that you could use inside a Twilio Function or another backend Node.js app. These SDKs allow you to build browser apps for video calling, voice calling, chat, and more. They include:
- The Twilio Client JS SDK for Programmable Voice
- The Conversations API JS SDK for building chat apps
- The Twilio Programmable Video JS SDK
- The Twilio Sync JS Library
Generating Access Tokens
To make use of these SDKs, you need a way to authenticate your users with Twilio in a way that doesn’t expose your Twilio credentials. That means that even though the app is built on the client side, you’ll still need a backend server to generate access tokens. These tokens verify the client's identity and grant it access to Twilio API features.
Programmable Voice and Twilio Client JS SDK
The Twilio Client JS SDK is for building Programmable Voice apps in the browser. With this SDK, you can “open inbound and outbound audio connections to Twilio for building softphones, walkie-talkies, conference calls, click-to-talk systems, and more, all from the browser.”
To install it from your command line:
npm install twilio-client
Once you’ve installed the SDK and generated your access token, you’re free to start building your Programmable Voice React app.
Conversations API and Programmable Chat
Twilio Programmable Chat, used to develop text-based chatting applications, is being replaced by the Conversations API. Programmable Chat will be sunsetted in July of 2022. Luckily, the Conversations API is built on the same foundations as Programmable Chat, with a few key differences. And for React developers, the overall implementation strategy should be the same.
Install the Conversations API JS SDK:
npm install --save @twilio/conversations
Install the Programmable Video JS SDK:
npm install --save twilio-video
Twilio Sync is a “state synchronization service, offering two-way real-time communication between browsers, mobiles, and the cloud.” Many of Twilio’s APIs use Sync under the hood.
To get started with the Sync JS Library, install it with this command:
npm install --save twilio-sync