Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Serverless Applications with Cloudflare Pages

Gift Egwuenu
October 18, 2022
7

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.

Gift Egwuenu

October 18, 2022
Tweet

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_

  12. None
  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