Slide 1

Slide 1 text

Serverless Days Paris 2022 Building Serverless Applications With Cloudflare Pages

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda @lauragift_

Slide 4

Slide 4 text

Agenda • Introduction to Serverless & Edge Functions. @lauragift_

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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_

Slide 8

Slide 8 text

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_

Slide 9

Slide 9 text

Slides bit.ly/3QB8YCw @lauragift_

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What about the Edge? @lauragift_

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Serverless on the Edge! @lauragift_

Slide 15

Slide 15 text

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_

Slide 16

Slide 16 text

@lauragift_ Developer Ecosystem keeps growing.

Slide 17

Slide 17 text

@lauragift_ Deploy serverless code instantly across the globe.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Features @lauragift_

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

• 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_

Slide 24

Slide 24 text

• 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_

Slide 25

Slide 25 text

• 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_

Slide 26

Slide 26 text

• 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_

Slide 27

Slide 27 text

Functions @lauragift_

Slide 28

Slide 28 text

Functions Beta @lauragift_

Slide 29

Slide 29 text

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_

Slide 30

Slide 30 text

@lauragift_ Functions

Slide 31

Slide 31 text

@lauragift_ Functions

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

• 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

Slide 35

Slide 35 text

• 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

Slide 36

Slide 36 text

• 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

Slide 37

Slide 37 text

• 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

Slide 38

Slide 38 text

Pages Plugins @lauragift_

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

@lauragift_ Pages Plugins

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

@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

Slide 47

Slide 47 text

Data on the Edge @lauragift_

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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