Build the app frontend and UI

Watch this episode

In this video, we set up the frontend starter code (the starter code is located in the Veet GitHub repository), connect to Durable Objects using a call room ID, and display a local video preview.

Related content

For additional resources on learning Durable Objects with Cloudflare, refer to the following resources:

• Veet Github repository code ↗
• Cloudflare Durable Objects documentation
• Cloudflare TURN service documentation
• CLI command for creating new Workers and Pages projects
• Hopscotch.io for local WebSocket testing ↗
• Sign up for a Cloudflare account ↗

Series overview

Watch Episode 1: Introduction to the series We present an overview of the series, discuss its underlying architecture, and access resources to set up the project locally.

Watch Episode 2: What are Durable Objects? We show how Durable Objects work and start building a video call app together.

Watch Episode 3: Create a serverless websocket 'backend' We create a WebSocket backend using serverless technology, making the process simpler than ever before.

Watch Episode 4: Real-time messaging with WebSockets We learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections.

Watch Episode 5: Build the app frontend and UI We configure the frontend starter code, connect to Durable Objects using a call room ID, and display a local video preview.

Watch Episode 6: Make and answer WebRTC calls We expand the frontend functionality by adding functionality for making and answering WebRTC video calls.

Watch Episode 7: Deploy your video call app In this final episode, we configure the remaining functionalities. By the end, your app will be fully functional and ready for deployment.