Build a Chat App with Twilio and KendoReact – Hacker Noon

Twilio Programmable Chat provides an SDK and robust back-end for real time chat applications, but it’s missing a front-end. If you need a chat UI, as well as a whole bunch of other useful components, then KendoReact might be what you’re looking for.

Kendo UI provides well designed and tested components that you can use within your React, Angular, Vue and jQuery applications. In this post we will build a Twilio Chat application with React and the KendoReact conversational UI components.

What you’ll need

If you want to build along with this tutorial, then you’ll need a few things:

If you want to skip ahead, you can check out the code for this application in this GitHub repo.

Let’s get started

We’re going to use the React and Express starter application that I built in this post as the basis for this app. This app gives us an easy way to run a Node.js server and React front-end with one command and comes with endpoints ready to create Access Tokens for Twilio Programmable Chat. Download or clone the application, change into the directory, and install the dependencies:

git clone -b twilio https://github.com/philnash/react-express-starter.git twilio-chat-kendo
cd twilio-chat-kendo
npm install

Copy the .env.example file to .env then fill in the blanks with your Twilio account SID, the chat service, and API keys you generated earlier.

cp .env.example .env

Run the application to make sure everything is working so far. On the command line run:

npm run dev

You will see an application that looks like this open in your browser at localhost:3000.

We have our Twilio Chat application ready and our React app set up. Let’s get building.

Preparing to chat

There’s a bit of work we need to do before we start on the chat integration. We need to install some dependencies, remove the example app, and add a bit of style. Let’s start with those dependencies.

We’ll need the twilio-chat module to connect with Twilio Chat and then a few KendoReact modules that will provide the components we’re going to use:

npm install twilio-chat @progress/kendo-react-conversational-ui 
@progress/kendo-react-inputs @progress/kendo-react-buttons
@progress/kendo-react-intl @progress/kendo-theme-material

Next, strip src/App.js back to the basics, including the CSS for the KendoReact Material theme:

import React, { Component } from 'react';
import '@progress/kendo-theme-material/dist/all.css';

class App extends Component {
constructor(props) {
super(props);
}

render() {
return

Hello world

;
}
}

export default App;

To give the application a bit more style and layout (without too much effort) add the Bootstrap CSS to the of public/index.html:





React App
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>

With that done it’s time to build our first component.

Building a login form

For users to join our chat we need them to log in and choose a username. If you are building this into an existing application, you probably already have users and a login system. For this post we’re just going to fake it by presenting a login form that asks for a username.

Create a new file, src/Login.js, and open it up. We’ll make this a functional component as the login form itself doesn’t need to store any state. Start with the following boilerplate:

import React from 'react';

const Login = props => {
return;
};
export default Login;

To make our Login form fit in with our conversational UI, we’ll use KendoReact components. At the top import the Button and Input components:

import React from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { Input } from '@progress/kendo-react-inputs';

Modify the Login function to return the following JSX:

const Login = props => {
return (


Log in

name="username"
label="Username"
required={true}
style={{ width: '100%' }}
value={props.username}
onChange={props.handleUsernameChange}
/>






);
};

That’s quite the chunk of JSX, so let’s break it down. The whole thing is a

containing a

and

. Then inside there is an component and a