Building Serverless Applications with Cloudflare Pages

With the advent of serverless, we don't have to worry about managing our own servers. Thanks to the introduction of serverless applications, you can now write a function and deploy it to the cloud.

In this talk, we'll build a serverless application using Cloudflare's stack. We’ll use Pages to host our static content, Functions for managing the dynamic part of our app, Workers KV to persist data, and Wrangler to do local development together with Cloudflare Pages offerings like unlimited preview environments, fast builds, and integration with a Git client.

Transcript

1. Serverless Days Paris 2022 Building Serverless Applications With Cloudflare Pages
2. Gift Egwuenu Developer Advocate @Cloud fl are GitHub Star Microsoft MVP @lauragift_ | @thegiftcode_
3. Agenda @lauragift_
4. Agenda • Introduction to Serverless & Edge Functions. @lauragift_
5. Agenda • Introduction to Serverless & Edge Functions. • A glance at Cloudflare’s Network. @lauragift_
6. Agenda • Introduction to Serverless & Edge Functions. • A glance at Cloudflare’s Network. • The Developer Ecosystem at Cloudflare - Workers, Pages, KV. @lauragift_
7. Agenda • Introduction to Serverless & Edge Functions. • A glance at Cloudflare’s Network. • The Developer Ecosystem at Cloudflare - Workers, Pages, KV. • Demo: Let’s build a serverless app on the Edge. @lauragift_
8. Agenda • Introduction to Serverless & Edge Functions. • A glance at Cloudflare’s Network. • The Developer Ecosystem at Cloudflare - Workers, Pages, KV. • Demo: Let’s build a serverless app on the Edge. • Learning Resources. @lauragift_
9. Slides bit.ly/3QB8YCw @lauragift_
10. Serverless doesn't mean no servers! There's still a server, you just don't manage it.
11. What about the Edge? @lauragift_
13. The edge is a server geographically located closest to your end-users. @lauragift_
14. Serverless on the Edge! @lauragift_
15. Note: map data as of Jan 15, 2020 Cloud fl are’s network operates at massive scale ~25M Internet properties 67 Tbps Of Network Capacity 200+ cities and 100+ countries 70B cyber threats blocked each day in Q1’21 99% of the Internet-connected population in the developed world is located within 100 milliseconds of our network Cloud fl are City Approximate area inside which Cloud fl are’s network is reachable within 100ms via the Internet @lauragift_
16. @lauragift_ Developer Ecosystem keeps growing.
17. @lauragift_ Deploy serverless code instantly across the globe.
18. export default { fetch() { return new Response('Hello Worker!'); }, }; Hello Worker Example! @lauragift_
19. Cloudflare Pages An end-to-end deployment platform for building your full stack applications! @lauragift_
20. Features @lauragift_
21. • Git integration: Push code to build and deploy Features @lauragift_
22. • Git integration: Push code to build and deploy • Automated CI/CD: Choose your build command Features @lauragift_
23. • Git integration: Push code to build and deploy • Automated CI/CD: Choose your build command • Automatic preview links: Generate URLs for every commit Features @lauragift_
24. • Git integration: Push code to build and deploy • Automated CI/CD: Choose your build command • Automatic preview links: Generate URLs for every commit • Unlimited staging: Test and preview your changes first Features @lauragift_
25. • Git integration: Push code to build and deploy • Automated CI/CD: Choose your build command • Automatic preview links: Generate URLs for every commit • Unlimited staging: Test and preview your changes first • Integration with Cloudflare products: Access, Web Analytics, SSL etc. Features @lauragift_
26. • Git integration: Push code to build and deploy • Automated CI/CD: Choose your build command • Automatic preview links: Generate URLs for every commit • Unlimited staging: Test and preview your changes first • Integration with Cloudflare products: Access, Web Analytics, SSL etc. • Add dynamic content with help from Cloudflare Workers Features @lauragift_
27. Functions @lauragift_
28. Functions Beta @lauragift_
29. export async function onRequest(context) { const { request, // same as existing Worker API env, // same as existing Worker API params, // if filename includes [id] or [[path]] waitUntil, // same as ctx.waitUntil in existing Worker API next, // used for middleware or to fetch assets data, // arbitrary space for passing data between middlewares } = context; return new Response('Hello, Worker!'); } Hello Worker Example with Pages Functions! /functions/api/hello.js @lauragift_
30. @lauragift_ Functions
31. @lauragift_ Functions
32. • Easily create dynamic functionality for your site. @lauragift_ Functions
33. • Easily create dynamic functionality for your site. • Store data, connect to 3rd party services, perform authentication. @lauragift_ Functions
34. • Easily create dynamic functionality for your site. • Store data, connect to 3rd party services, perform authentication. • Use a functions directory in your project repository and deploy. @lauragift_ Functions
35. • Easily create dynamic functionality for your site. • Store data, connect to 3rd party services, perform authentication. • Use a functions directory in your project repository and deploy. • Plugins for Functions running in non Pages environments. @lauragift_ Functions
36. • Easily create dynamic functionality for your site. • Store data, connect to 3rd party services, perform authentication. • Use a functions directory in your project repository and deploy. • Plugins for Functions running in non Pages environments. @lauragift_ Functions
37. • Easily create dynamic functionality for your site. • Store data, connect to 3rd party services, perform authentication. • Use a functions directory in your project repository and deploy. • Plugins for Functions running in non Pages environments. @lauragift_ Functions
38. Pages Plugins @lauragift_
39. Pages Plugins @lauragift_ A Pages Plugin is a library that developers can use to augment their existing Pages project with a deep integration to Functions.
40. @lauragift_ Pages Plugins
41. @lauragift_ • Intercept HTML pages and inject in a third-party script. Pages Plugins
42. @lauragift_ • Intercept HTML pages and inject in a third-party script. • Validate authorisation headers. Pages Plugins
43. @lauragift_ • Intercept HTML pages and inject in a third-party script. • Validate authorisation headers. • Store data in KV or Durable Objects. Pages Plugins
44. @lauragift_ • Intercept HTML pages and inject in a third-party script. • Validate authorisation headers. • Store data in KV or Durable Objects. • Server-side render (SSR) webpages with data from a CMS. Pages Plugins
45. @lauragift_ • Intercept HTML pages and inject in a third-party script. • Validate authorisation headers. • Store data in KV or Durable Objects. • Server-side render (SSR) webpages with data from a CMS. • Report errors and track performance. Pages Plugins
46. @lauragift_ • Intercept HTML pages and inject in a third-party script. • Validate authorisation headers. • Store data in KV or Durable Objects. • Server-side render (SSR) webpages with data from a CMS. • Report errors and track performance. Pages Plugins
47. Data on the Edge @lauragift_
48. KV Durable Objects R2 D1 Data on the Edge Cache API @lauragift_
49. KV Durable Objects R2 D1 Data on the Edge Cache API @lauragift_
50. KV ( Key-Value Store) @lauragift_ Workers KV is a global, low-latency, key-value data store.
51. KV ( Key-Value Store) @lauragift_ Workers KV is a global, low-latency, key-value data store. It supports exceptionally high read volumes with low latency, making it possible to build highly dynamic APIs and websites that respond as quickly as a cached static fi le would.
52. Demo @lauragift_ Let’s build a serverless application on the edge!
53. Demo @lauragift_ Let’s build a serverless application on the edge! & hopefully the demo gods are on my side today!
54. Learning Resources ✅ Cloud fl are Developer Documentation ✅ blog.cloud fl are.com ✅ Workers Discord Community ✅ Cloud fl are Workers Youtube @lauragift_
55. Questions? Twitter: @lauragift_ Thank you! bit.ly/3QB8YCw