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

Building Serverless Applications with Cloudflare Pages

Gift Egwuenu
October 18, 2022
17

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. Agenda • Introduction to Serverless & Edge Functions. • A

    glance at Cloudflare’s Network. @lauragift_
  2. Agenda • Introduction to Serverless & Edge Functions. • A

    glance at Cloudflare’s Network. • The Developer Ecosystem at Cloudflare - Workers, Pages, KV. @lauragift_
  3. 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_
  4. 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_
  5. 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_
  6. • Git integration: Push code to build and deploy •

    Automated CI/CD: Choose your build command Features @lauragift_
  7. • 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_
  8. • 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_
  9. • 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_
  10. • 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_
  11. 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_
  12. • Easily create dynamic functionality for your site. • Store

    data, connect to 3rd party services, perform authentication. @lauragift_ Functions
  13. • 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
  14. • 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
  15. • 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
  16. • 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
  17. 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.
  18. @lauragift_ • Intercept HTML pages and inject in a third-party

    script. • Validate authorisation headers. Pages Plugins
  19. @lauragift_ • Intercept HTML pages and inject in a third-party

    script. • Validate authorisation headers. • Store data in KV or Durable Objects. Pages Plugins
  20. @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
  21. @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
  22. @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
  23. 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.
  24. Demo @lauragift_ Let’s build a serverless application on the edge!

    & hopefully the demo gods are on my side today!
  25. Learning Resources ✅ Cloud fl are Developer Documentation ✅ blog.cloud

    fl are.com ✅ Workers Discord Community ✅ Cloud fl are Workers Youtube @lauragift_