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
   

   View Slide

2. Gift Egwuenu
   Developer Advocate @Cloud
   fl
   are
   
   GitHub Star
   
   Microsoft MVP
   
   @lauragift_ | @thegiftcode_
   

   View Slide

3. Agenda
   @lauragift_
   

   View Slide

4. Agenda
   • Introduction to Serverless & Edge Functions.
   @lauragift_
   

   View Slide

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

   View Slide

6. Agenda
   • Introduction to Serverless & Edge Functions.
   • A glance at Cloudflare’s Network.
   • The Developer Ecosystem at Cloudflare - Workers, Pages, KV.
   @lauragift_
   

   View Slide

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_
   

   View Slide

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_
   

   View Slide

9. Slides
   bit.ly/3QB8YCw
   @lauragift_
   

   View Slide

10. Serverless doesn't mean no servers!
    There's still a server, you just don't
    manage it.
    

    View Slide

11. What about the Edge?
    @lauragift_
    

    View Slide

12. View Slide

13. The edge is a server geographically
    located closest to your end-users.
    @lauragift_
    

    View Slide

14. Serverless on the Edge!
    @lauragift_
    

    View Slide

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_
    

    View Slide

16. @lauragift_
    Developer Ecosystem keeps growing.
    

    View Slide

17. @lauragift_
    Deploy serverless code instantly across the globe.
    

    View Slide

18. export default {
    
    
    fetch() {
    
    
    return new Response('Hello Worker!');
    
    
    },
    
    
    };
    
    
    Hello Worker Example!
    @lauragift_
    

    View Slide

19. Cloudflare Pages
    An end-to-end deployment platform for building
    your full stack applications!
    @lauragift_
    

    View Slide

20. Features
    @lauragift_
    

    View Slide

21. • Git integration: Push code to
    build and deploy
    Features
    @lauragift_
    

    View Slide

22. • Git integration: Push code to
    build and deploy
    • Automated CI/CD: Choose
    your build command
    Features
    @lauragift_
    

    View Slide

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_
    

    View Slide

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_
    

    View Slide

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_
    

    View Slide

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_
    

    View Slide

27. Functions
    @lauragift_
    

    View Slide

28. Functions
    Beta
    @lauragift_
    

    View Slide

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_
    

    View Slide

30. @lauragift_
    Functions
    

    View Slide

31. @lauragift_
    Functions
    

    View Slide

32. • Easily create dynamic functionality for your site.
    @lauragift_
    Functions
    

    View Slide

33. • Easily create dynamic functionality for your site.
    • Store data, connect to 3rd party services, perform authentication.
    @lauragift_
    Functions
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Pages Plugins
    @lauragift_
    

    View Slide

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.
    

    View Slide

40. @lauragift_
    Pages Plugins
    

    View Slide

41. @lauragift_
    • Intercept HTML pages and inject in a third-party script.
    Pages Plugins
    

    View Slide

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

    View Slide

43. @lauragift_
    • Intercept HTML pages and inject in a third-party script.
    • Validate authorisation headers.
    • Store data in KV or Durable Objects.
    Pages Plugins
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. Data on the Edge
    @lauragift_
    

    View Slide

48. KV Durable Objects R2 D1
    Data on the Edge
    Cache API
    @lauragift_
    

    View Slide

49. KV Durable Objects R2 D1
    Data on the Edge
    Cache API
    @lauragift_
    

    View Slide

50. KV ( Key-Value Store)
    @lauragift_
    Workers KV is a global, low-latency, key-value data store.
    

    View Slide

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.
    

    View Slide

52. Demo
    @lauragift_
    Let’s build a serverless application on the edge!
    

    View Slide

53. Demo
    @lauragift_
    Let’s build a serverless application on the edge!
    & hopefully the demo gods are on my side today!
    

    View Slide

54. Learning Resources
    ✅ Cloud
    fl
    are Developer Documentation
    
    ✅ blog.cloud
    fl
    are.com
    
    ✅ Workers Discord Community
    
    ✅ Cloud
    fl
    are Workers Youtube
    
    @lauragift_
    

    View Slide

55. Questions?
    Twitter: @lauragift_
    
    Thank you!
    bit.ly/3QB8YCw
    

    View Slide