Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.

Along the way, you’ll learn powerful concepts like dynamic route handling in Gatsby, form management with React Hooks, writing custom React Hooks, context management and reducers in React, handling real-time interactions in a React app, creating serverless functions in Twilio, and setting up a Twilio account to support realtime video calling.

Aleksander Ageev

Taylor Bell: Hey Jason, thanks for meeting with me today.Jason Lengstorf: Yeah, thanks for having me on.Taylor Bell: Yeah. I wanted to talk to you about your new course about combining Twilio and Gatsby. So, what's the idea? Like, what are you doing with Twilio and Gatsby?Jason Lengstorf: We're combining them.Taylor Bell: Oh yeah. Classic.Jason Lengstorf: No. So, I thought that ... One of the things that I've seen a lot in discussions around the JAMstack in general, like this idea of building the static sites, is a kind of a push back or a feeling that you can't do dynamic things with it. And so I thought, why not show the most dynamic thing, which is like real time video, right? Why not build a JAMstack site that handles that? And Twilio is just such an amazing service. They can do so much. I know you think ... Well, I don't know. Maybe not everybody, but I always thought like, "Oh, it's Twilio. They only do text messaging and voice call.Jason Lengstorf: And then I met Nathaniel Chenwa on the Twilio team and he showed me this whole suite of services that they have that are really, really powerful. So I wanted to dig into how that live video chat works, and just show people how to build really, really dynamic and cool apps without the need for a whole bunch of backend servers and all these really complicated things. You can actually just build like a normal, you know, front end only website, a JAMstack site, and then add this really powerful front end only real time video capability using tools like Twilio.Taylor Bell: Cool. And so over the course of your course-Jason Lengstorf: Over the course of the course.Taylor Bell: Yeah. During the course, what's the journey that you take the learner on?Jason Lengstorf: So we're going to start by just building a basic Gatsby site and then we'll set up some kind of like very appy things. So, client only routes, we'll set up the ability to manage user authentication in a certain way. Not like real user authentication, but the idea of of protecting content until you have met some qualification. And then from there we will start looking at how the Twilio integration works. Along the way we're going to do some really fun stuff. Like, we get into React Context. We're going to write some custom hooks. We're going to use the use reducer pattern in React, which is really, really nice, as a way to get some of what Redux does without all of the weight and mental overhead of using full blown Redux.Jason Lengstorf: And when we get into the Twilio stuff, we will look at first, how to handle all of the Twilio parts. But we're also going to look at things like, what happens if you're using a third party library that's not built for React, which is Twilio. Twilio gives you DOM elements, not React components. So we have to look at how to use React refs to put components from other libraries, put DOM elements from other libraries into our React apps in a way that actually works, that's not, you know, shoehorning them in or doing a whole bunch of extra work to re-implement how that third party library works.Taylor Bell: Cool. I really like that you're going to have the learner build a thing, but then there's all these other things that you'll touch on and that are all going to be useful for future projects.Jason Lengstorf: Yeah, the hope is that ... because, I mean, how often do you really have to build a video chat app in your in your professional life, right? So it's not like, hey, let's build a video chat app. It's, let's look at building dynamic apps, like apps with real world requirements using Gatsby and React and third party libraries.Taylor Bell: That's awesome. So, after somebody takes your course, what would you suggest they do next?Jason Lengstorf: I would say the first thing that I would recommend is that you're going to cement this stuff in your head better if you build something. So I would pick another service, something that is, you know, exciting to you. That can be literally anything, something that you enjoy working with, and try to build something similar. Try to implement that knowledge right away so that it really sticks in your head. And specifically, the Twilio part is cool and learning Twilio is amazing. It's going to give you so many super powers. You can do things, you know, like hook it up to automated processes to send yourself text messages and stuff. There's so many cool things that you can do with Twilio. But I think the real power of this course is less in teaching you the specifics of Twilio, and more in teaching you how to integrate something like Twilio into your Gatsby and React workflow.Taylor Bell: That's awesome. Well, I'm looking forward to taking the course and I appreciate you meeting with me today to tell me a little bit about it.Jason Lengstorf: Yeah, of course. Thanks for having me on.

To start a Gatsby site, we'll need a home page and a layout that the app will live in. 

In this lesson we will build out the Layout component that will wrap the wrest of the components that we build and start with a simple home page.

Build a Page Layout in Gatsby

Community notes for Build a Video Chat App with Twilio and Gatsby

Community Notes

Each video chat will happen in a "room". To do that, we need a way for people to identify themselves and choose which room they want to join.

In this lesson, we'll create a form with `useState` React hooks that accepts user input.

Create a React Form in Gatsby

The heart of the app is the actual rooms that users will visit to chat in. These routes need to be generated from the input that the user gives us so they're linkable via URL and easy for people to join manually.

To do this, we'll use route parameters and client-side routing that will let us take advantage of Gatsby's dynamic capabilities.

Generate Dynamic Routes in Gatsby with Reach Router

Our app is going to require sharing information across multiple components. To make this easier to reason about, we're going to use React Context and custom hooks.

In this lesson, we'll create a custom hook that will create a React Context we can use to share state across our application.

Manage Application State in Gatsby with React Hooks

To use Twilio's services, we'll need credentials. These will be used to authenticate requests to a serverless Twilio function that will generate an access token for each user that allows us to control who joins the chat.

Generate an Access Token for Users with Twilio Serverless Functions

Now that we have a serverless function to generate a Twilio token, we need to use it.

In this lesson, we'll use `axios` within our custom React hook to request and store a token from the serverless Twilio function. The generated token will be used to protect routes that require authentication within Gatsby.

Consume a Generated Twilio Token in Gatsby with React Hooks

To restrict access in rooms within our Gatsby application we'll need to modify the `VideoDisplay` component.

To authenticate a user, a `useEffect` will be run to check if there is a Twilio token stored in state. If not, the user will be redirected to the home page.

Restrict Access in Gatsby with Protected Routes

Now that we have the ability to get tokens and create rooms, we need to actually start hooking into rooms.

In this lesson, we'll create a function in our custom hook that will create a DOM node to display the video HTML element that Twilio returns. Because Twilio directly creates DOM nodes, we'll use refs to put those into React.

Connect Video to a Room with React Hooks in Gatsby

To show video of remote participants we'll need to add a little more to our custom hook.

In the `useTwilioVideo` hook, we'll build a function that will create elements for the remote participant video to be added to.

Show Video in Gatsby from Remote Participants with React Hooks

We need to handle disconnection to avoid frozen screens and black boxes when people leave the chat. This needs to be handled both for the local participant and for remote participants.

In this lesson, we'll create a `disconnect` action that will use Twilio's `disconnect` function that will properly disconnect all connections to their service as well as set the application state back to the default state.

Build a Video Chat App with Twilio and Gatsby

Jason Lengstorf

What you'll learn:

Prerequisites:

Credits

Course Content