From 46a99514b0d5ae392f1424db7a72d0511e672d08 Mon Sep 17 00:00:00 2001 From: Jason Farber Date: Wed, 12 Mar 2025 12:32:18 +0000 Subject: [PATCH 1/2] migrating durable objects series into a videos folder and into learning paths --- public/_redirects | 9 ++++ .../get-started/video-series/app-frontend.mdx | 29 ----------- .../get-started/video-series/deploy-app.mdx | 32 ------------ .../video-series/durable-objects.mdx | 29 ----------- .../get-started/video-series/index.mdx | 15 ------ .../get-started/video-series/intro.mdx | 29 ----------- .../video-series/make-answer-webrtc-calls.mdx | 29 ----------- .../video-series/real-time-messaging.mdx | 29 ----------- .../video-series/serverless-websocket.mdx | 31 ----------- .../docs/durable-objects/video-tutorials.mdx | 18 +++++++ .../series/build-the-app-frontend-5.mdx | 32 ++++++++++++ .../series/deploy-your-video-call-app-7.mdx | 32 ++++++++++++ .../durable-objects-course/series/index.mdx | 9 ++++ .../series/introduction-to-series-1.mdx | 32 ++++++++++++ .../series/make-answer-webrtc-calls-6.mdx | 32 ++++++++++++ .../real-time-messaging-with-websockets-4.mdx | 32 ++++++++++++ .../series/serverless-websocket-backend-3.mdx | 32 ++++++++++++ .../series/what-are-durable-objects-2.mdx | 32 ++++++++++++ .../durable-objects-course.json | 9 ++++ ...le-objects-series-additional-resources.mdx | 15 ++++++ .../durable-objects-series-navigation.mdx | 51 +++++++++++++++++++ 21 files changed, 335 insertions(+), 223 deletions(-) delete mode 100644 src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/index.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/intro.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx delete mode 100644 src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx create mode 100644 src/content/docs/durable-objects/video-tutorials.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/build-the-app-frontend-5.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/index.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/introduction-to-series-1.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/serverless-websocket-backend-3.mdx create mode 100644 src/content/docs/learning-paths/durable-objects-course/series/what-are-durable-objects-2.mdx create mode 100644 src/content/learning-paths/durable-objects-course.json create mode 100644 src/content/partials/learning-paths/durable-objects-series-additional-resources.mdx create mode 100644 src/content/partials/learning-paths/durable-objects-series-navigation.mdx diff --git a/public/_redirects b/public/_redirects index ae98a86bf707904..bef5f9cf14947ff 100644 --- a/public/_redirects +++ b/public/_redirects @@ -394,6 +394,7 @@ /support/dns/troubleshooting/my-dns-doesnt-work/ /dns/troubleshooting/dns-issues/ 301 /support/dns/troubleshooting/why-was-my-domain-deleted-from-cloudflare/ /dns/zone-setups/troubleshooting/domain-deleted/ 301 +# Durable Objects /durable-objects/examples/durable-object-example/ /durable-objects/examples/durable-object-in-memory-state/ 301 /durable-objects/api/hibernatable-websockets-api/ /durable-objects/best-practices/websockets/ 301 /durable-objects/api/alarms-in-durable-objects/ /durable-objects/api/alarms/ 301 @@ -421,6 +422,14 @@ /durable-objects/changelog/ /durable-objects/release-notes/ 301 /durable-objects/glossary/ /durable-objects/reference/glossary/ 301 /durable-objects/get-started/walkthrough/ /durable-objects/get-started/tutorial/ 301 +/durable-objects/get-started/video-series/intro/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/app-frontend/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/deploy-app/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/durable-objects/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/index/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/make-answer-webrtc-calls/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/real-time-messaging/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/serverless-websocket/ /durable-objects/video-tutorials/ 301 # email-routing /email-routing/enable-email-routing/ /email-routing/get-started/enable-email-routing/ 301 diff --git a/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx b/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx deleted file mode 100644 index 0bd86835a4cffbd..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -pcx_content_type: video -title: Building the App Frontend and UI -sidebar: - order: 6 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -Now, we're moving to the frontend. In this video, we'll 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. - -Useful links: - -- [GitHub code](https://github.com/megaconfidence/veet) - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx b/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx deleted file mode 100644 index 9375723465c4a40..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -pcx_content_type: video -title: Deploy your Video Call app -sidebar: - order: 8 -prev: true -tableOfContents: false -next: - link: /durable-objects/examples/ - label: View more examples ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -We're almost done with the project, and in this video, we'll add the finishing touches. Learn how to handle call disconnections, wire up essential media controls like muting/unmuting and video toggling, and integrate a TURN server to ensure reliable connections even behind firewalls. By the end of this video, your app will be fully functional and ready for deployment. - -Useful links: - -- [GitHub code](https://github.com/megaconfidence/veet) -- [TURN service](/calls/turn/) - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx b/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx deleted file mode 100644 index e9a7af490a9e682..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -pcx_content_type: video -title: What are Durable Objects? -sidebar: - order: 3 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -In this video, we will show how Durable Objects work and start building a video call app together. - -Useful links: - -- [Sign up](https://dash.cloudflare.com/sign-up) for a Cloudflare account - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/index.mdx b/src/content/docs/durable-objects/get-started/video-series/index.mdx deleted file mode 100644 index 02e39e4204066db..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/index.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -pcx_content_type: navigation -title: Video series -sidebar: - order: 3 -next: true ---- - -import { DirectoryListing, Stream } from "~/components"; - -Building stateful apps on a serverless architecture has been difficult until Cloudflare's Durable Objects - a powerful API that enables you to easily build stateful serverless apps on Workers. In this series of videos, we will show how Durable Objects work and start building a video call app together. - -To get started, [create an account](https://dash.cloudflare.com/sign-up) on Cloudflare today for free. - - diff --git a/src/content/docs/durable-objects/get-started/video-series/intro.mdx b/src/content/docs/durable-objects/get-started/video-series/intro.mdx deleted file mode 100644 index d4089e1a0ee9a64..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/intro.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -pcx_content_type: navigation -title: Introduction -sidebar: - order: 2 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -In this episode, we will present an overview of the final project, discuss its underlying architecture, and access resources to set up the project locally. - -Useful links: - -- [GitHub code](https://github.com/megaconfidence/veet) - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx b/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx deleted file mode 100644 index 909825b5875d2cc..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -pcx_content_type: video -title: Make and Answer WebRTC calls -sidebar: - order: 7 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -In this video, we'll build on the frontend we set up earlier by adding functionality for making and answering WebRTC video calls. You'll learn how to create peer-to-peer connections, handle ICE candidates, and seamlessly send and receive video streams between users. - -Useful links: - -- [GitHub code](https://github.com/megaconfidence/veet) - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx b/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx deleted file mode 100644 index cb50380e563e0bb..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -pcx_content_type: video -title: Real-time messaging with WebSockets -sidebar: - order: 5 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -Now, we'll take it a step further by enabling our server to receive and broadcast messages. In this video, you'll learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections. By the end, you will have completed the backend for our video call app. - -Useful links: - -- [GitHub code](https://github.com/megaconfidence/veet) - -
- - - -
diff --git a/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx b/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx deleted file mode 100644 index 26ebbbaaf3c6b5b..000000000000000 --- a/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -pcx_content_type: video -title: Create a Serverless Websocket 'Backend' -sidebar: - order: 4 -prev: true -next: true -tableOfContents: false ---- - -import { Details, DirectoryListing, Stream } from "~/components"; - - - -In this video, we'll create a WebSocket backend using serverless technology, making the process simpler than ever before. You'll learn how to create your first Durable Object, set up a WebSocket server to coordinate connections, and keep track of connected clients. - -Useful links: - -- [CLI command](/pages/get-started/c3/) for creating new Workers and Pages projects -- [Hopscotch.io](https://hoppscotch.io/) for local WebSocket testing -- [GitHub code](https://github.com/megaconfidence/veet) - -
- - - -
diff --git a/src/content/docs/durable-objects/video-tutorials.mdx b/src/content/docs/durable-objects/video-tutorials.mdx new file mode 100644 index 000000000000000..58f47d42a908b54 --- /dev/null +++ b/src/content/docs/durable-objects/video-tutorials.mdx @@ -0,0 +1,18 @@ +--- +pcx_content_type: navigation +title: Videos +sidebar: + order: 11 +--- + +import { CardGrid, LinkCard } from "~/components"; + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/build-the-app-frontend-5.mdx b/src/content/docs/learning-paths/durable-objects-course/series/build-the-app-frontend-5.mdx new file mode 100644 index 000000000000000..80c8d37055277cd --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/build-the-app-frontend-5.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Build the app frontend and UI +sidebar: + order: 5 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + 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. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7.mdx b/src/content/docs/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7.mdx new file mode 100644 index 000000000000000..89f5ae60ac0498c --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Deploy your video call app +sidebar: + order: 7 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + We are almost done with the project, and in this final episode, we add the finishing touches, such as learning how to handle call disconnections, wiring up essential media controls like muting/unmuting and video toggling, and integrating a TURN server to ensure reliable connections even behind firewalls. By the end of this video, your app will be fully functional and ready for deployment. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/index.mdx b/src/content/docs/learning-paths/durable-objects-course/series/index.mdx new file mode 100644 index 000000000000000..0df7484bd14d087 --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/index.mdx @@ -0,0 +1,9 @@ +--- +pcx_content_type: navigation +title: Overview +sidebar: + order: 4 + group: + hideIndex: true +tableOfContents: false +--- diff --git a/src/content/docs/learning-paths/durable-objects-course/series/introduction-to-series-1.mdx b/src/content/docs/learning-paths/durable-objects-course/series/introduction-to-series-1.mdx new file mode 100644 index 000000000000000..f9c7b7c9d847947 --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/introduction-to-series-1.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Introduction to the series +sidebar: + order: 1 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + In this episode, we present an overview of the series, discuss its underlying architecture, and access resources to set up the project locally. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6.mdx b/src/content/docs/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6.mdx new file mode 100644 index 000000000000000..53cbdf44d7046f7 --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Make and answer WebRTC calls +sidebar: + order: 6 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + In this video, we build on the frontend we set up earlier by adding functionality for making and answering WebRTC video calls. You will learn how to create peer-to-peer connections, handle ICE candidates, and seamlessly send and receive video streams between users. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4.mdx b/src/content/docs/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4.mdx new file mode 100644 index 000000000000000..a26ccbb5bb1644b --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Real-time messaging with WebSockets +sidebar: + order: 4 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + Now, we'll take it a step further by enabling our server to receive and broadcast messages. In this video, you'll learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections. By the end, you will have completed the backend for our video call app. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/serverless-websocket-backend-3.mdx b/src/content/docs/learning-paths/durable-objects-course/series/serverless-websocket-backend-3.mdx new file mode 100644 index 000000000000000..258713f281a4f78 --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/serverless-websocket-backend-3.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: Create a serverless websocket 'backend' +sidebar: + order: 3 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + In this video, we'll create a WebSocket backend using serverless technology, making the process simpler than ever before. You'll learn how to create your first Durable Object, set up a WebSocket server to coordinate connections, and keep track of connected clients. + + + + + + + + + + + + + diff --git a/src/content/docs/learning-paths/durable-objects-course/series/what-are-durable-objects-2.mdx b/src/content/docs/learning-paths/durable-objects-course/series/what-are-durable-objects-2.mdx new file mode 100644 index 000000000000000..2d6e88748693dbe --- /dev/null +++ b/src/content/docs/learning-paths/durable-objects-course/series/what-are-durable-objects-2.mdx @@ -0,0 +1,32 @@ +--- +pcx_content_type: navigation +title: What are Durable Objects? +sidebar: + order: 2 +tableOfContents: false +--- + +import { Render, Tabs, TabItem, Stream, Card } from "~/components"; + + + + + In this video, we show how Durable Objects work and start building a video call app together. + + + + + + + + + + + + + diff --git a/src/content/learning-paths/durable-objects-course.json b/src/content/learning-paths/durable-objects-course.json new file mode 100644 index 000000000000000..3cdfb84153e3a4b --- /dev/null +++ b/src/content/learning-paths/durable-objects-course.json @@ -0,0 +1,9 @@ +{ + "title": "Introduction to Durable Objects", + "path": "/learning-paths/durable-objects-course/series/introduction-to-series-1/", + "priority": 1, + "description":"Dive into a hands-on Durable Objects project and learn how to build stateful apps using serverless architecture", + "products": ["Durable Objects"], + "product_group": "Developer platform", + "video": true +} diff --git a/src/content/partials/learning-paths/durable-objects-series-additional-resources.mdx b/src/content/partials/learning-paths/durable-objects-series-additional-resources.mdx new file mode 100644 index 000000000000000..68429e629704f2e --- /dev/null +++ b/src/content/partials/learning-paths/durable-objects-series-additional-resources.mdx @@ -0,0 +1,15 @@ +--- +{} + +--- + +**Related content** + +For additional resources on learning Durable Objects with Cloudflare, refer to the following resources: + + - [Veet Github repository code](https://github.com/megaconfidence/veet) + - [Cloudflare Durable Objects documentation](/durable-objects/) + - [Cloudflare TURN service documentation](/calls/turn/) + - [CLI command for creating new Workers and Pages projects](/pages/get-started/c3/) + - [Hopscotch.io for local WebSocket testing](https://hoppscotch.io/) + - [Sign up for a Cloudflare account](https://dash.cloudflare.com/sign-up) diff --git a/src/content/partials/learning-paths/durable-objects-series-navigation.mdx b/src/content/partials/learning-paths/durable-objects-series-navigation.mdx new file mode 100644 index 000000000000000..036a1f7590e9c2f --- /dev/null +++ b/src/content/partials/learning-paths/durable-objects-series-navigation.mdx @@ -0,0 +1,51 @@ +--- +{} + +--- + +import { CardGrid, LinkCard, Card } from "~/components"; + + + + + + + + + + + + + + + + + From b1064dec00ceaccd4f67049ccea30384e30a2b1f Mon Sep 17 00:00:00 2001 From: Jason Farber Date: Wed, 12 Mar 2025 12:38:13 +0000 Subject: [PATCH 2/2] adding missing redirect --- public/_redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/public/_redirects b/public/_redirects index bef5f9cf14947ff..0e8cfb95d737cf0 100644 --- a/public/_redirects +++ b/public/_redirects @@ -430,6 +430,7 @@ /durable-objects/get-started/video-series/make-answer-webrtc-calls/ /durable-objects/video-tutorials/ 301 /durable-objects/get-started/video-series/real-time-messaging/ /durable-objects/video-tutorials/ 301 /durable-objects/get-started/video-series/serverless-websocket/ /durable-objects/video-tutorials/ 301 +/durable-objects/get-started/video-series/ /durable-objects/video-tutorials/ 301 # email-routing /email-routing/enable-email-routing/ /email-routing/get-started/enable-email-routing/ 301