Cloudflare Workers Crash Course | Deploy Your Website with Cloudflare

Summary

This video offers a crash course on Cloudflare Workers, explaining what they are and how to set up your first worker using the Wrangler 2 CLI tool. It covers the basics of Cloudflare Workers, which function like AWS Lambda but in a different environment, and demonstrates creating a simple worker that can be tested and published to the Cloudflare network. The tutorial also explores advanced features, such as using geolocation data and setting up a proxy for websites like Reddit, showcasing the power and flexibility of Cloudflare Workers for developers.

Takeaways

• 🌐 Cloudflare Workers are serverless functions that run on Cloudflare's global network, akin to AWS Lambda but in a different environment.
• 🛠️ The Wrangler 2 CLI tool is introduced for setting up and managing Cloudflare Workers, currently in beta and expected to be stable soon.
• 📚 The script requires Node.js version 16.7 or greater to work with Wrangler 2.0 CLI.
• 📝 Cloudflare Workers are created by writing JavaScript or TypeScript that responds to fetch events, mimicking browser-based APIs.
• 🔒 Compatibility data in the wrangler.toml file allows locking to a specific runtime version to avoid breaking changes in future updates.
• 📡 Workers can access geolocation data through the request.cf object, enabling location-based responses.
• 📝 The script demonstrates creating a simple HTML response and deploying it globally with Cloudflare Workers.
• 🚀 Wrangler 2 makes local testing easy with 'yarn wrangler dev', allowing for real-time updates during development.
• 🌍 Publishing a worker to the Cloudflare network provides a public URL that is instantly deployed worldwide.
• 🔄 Cloudflare Workers can be used as a proxy to redirect requests to other domains, such as redirecting to reddit.com with custom paths.
• 🛡️ Larger websites may have security measures in place to prevent simple proxying, but smaller sites can be proxied without issues.

Q & A

What is the main topic of the video?

The main topic of the video is a crash course on Cloudflare Workers, including how to set up the first worker, an introduction to the Wrangler 2 CLI tool, and various functionalities of Cloudflare Workers.

What does the speaker suggest about Cloudflare's recent activity?

The speaker suggests that Cloudflare has been very active in releasing new features, mentioning a 'full stack week' and the rapid release of features.

What is a Cloudflare Worker?

A Cloudflare Worker is essentially a serverless function that runs at the edge, similar to AWS Lambda functions, but in a different environment.

What is the Wrangler 2.0 CLI tool mentioned in the video?

The Wrangler 2.0 CLI tool is a command-line interface for developing, testing, and deploying Cloudflare Workers, which was in beta at the time of the video.

What is the minimum Node.js version required for using Wrangler 2.0 CLI as mentioned in the video?

The minimum Node.js version required for using Wrangler 2.0 CLI is 16.7 or greater.

How does the speaker describe the process of setting up the first Cloudflare Worker?

The speaker describes the process as starting with 'yarn wrangler init', followed by creating a project name, and then writing a simple script that responds to fetch events with a hardcoded HTML response.

What is the purpose of the 'compatibility date' in the wrangler.toml file as discussed in the video?

The 'compatibility date' in the wrangler.toml file is a feature that allows developers to lock their Cloudflare Worker to a specific version of the runtime, ensuring that older features that might break in newer releases are preserved.

How can one test their Cloudflare Worker locally as per the video?

One can test their Cloudflare Worker locally using the 'yarn wrangler dev' command followed by the script name, which will start a local development server for testing.

What command is used to publish a Cloudflare Worker to the Cloudflare network?

The command used to publish a Cloudflare Worker to the Cloudflare network is 'yarn wrangler publish', followed by the name of the file.

What is an example of a practical application of Cloudflare Workers mentioned in the video?

An example of a practical application mentioned in the video is using Cloudflare Workers to tap into the geolocation of a user and display it, which can be useful for creating location-specific content or services.

How does the video demonstrate the ability to proxy requests through a Cloudflare Worker?

The video demonstrates proxying by showing how to modify a Cloudflare Worker to redirect requests meant for the Worker to another domain, such as reddit.com, by changing the URL's hostname and using the original request object to fetch the data.

What is the speaker's opinion on Cloudflare Workers and Wrangler 2.0 CLI?

The speaker's opinion is that Cloudflare Workers are powerful and that the Wrangler 2.0 CLI is amazing, especially for developers, due to its focus on speed, performance, and ease of deployment.

What is the final note the speaker gives to the audience at the end of the video?

The final note is an invitation for the audience to share their thoughts on Cloudflare Workers, express interest in more content related to Cloudflare, and join the Code Dam's Discord community for weekly coding events.

Outlines

00:00

🌐 Introduction to Cloudflare Workers

The video begins with an introduction to Cloudflare Workers, emphasizing their significance and comparing them to AWS Lambda functions. The speaker discusses the recent surge in new features released by Cloudflare and encourages viewers to subscribe and engage with the channel. The focus then shifts to setting up the first Cloudflare Worker using the Wrangler 2 CLI tool, which is still in beta. The speaker guides viewers through the installation process and highlights the requirement of a Node.js version greater than 16.7. The video also touches on the concept of compatibility data, which allows the use of older features in newer runtime versions.

05:02

🛠 Setting Up and Testing Cloudflare Workers

This paragraph delves into the process of setting up a Cloudflare Worker. The speaker demonstrates how to create a simple worker by adding a global fetch event listener and constructing a response object. The response object is hardcoded with an HTML string, mimicking an API response. The speaker then explains how to test the worker using the Wrangler 2 CLI tool by running 'yarn wrangler dev' and authorizing Cloudflare to access the user's account. The video also covers the steps to publish the worker on the Cloudflare network, resulting in a globally distributed, live URL. The speaker further explores the potential of Cloudflare Workers by accessing geolocation data through 'request.cf' and demonstrating how to use this information in the worker's response.

10:05

🌐 Advanced Cloudflare Workers Techniques

The speaker continues by showcasing advanced techniques for Cloudflare Workers, such as creating a proxy for websites like Reddit. The process involves modifying the URL's hostname to redirect requests through the worker, effectively acting as a proxy. The speaker demonstrates how to fetch data from the original request and pass it along with the headers and body to the new URL. The video also discusses the limitations of this approach, noting that larger websites like Reddit and Google have security measures in place to prevent such proxying. The speaker concludes by encouraging viewers to explore the capabilities of Cloudflare Workers and the Wrangler 2.0 CLI, highlighting the ease and speed of deploying workers globally.

15:06

📢 Wrapping Up and Engaging with the Audience

In the final paragraph, the speaker wraps up the video by inviting feedback on the content and Cloudflare Workers in general. They express interest in creating more content or even a short course on YouTube based on audience response. The speaker also encourages viewers to join Codedam's Discord community for weekly coding events and reminds them to like, subscribe, and comment on the video. The video concludes with a call to action for viewers to share their thoughts on what they would like to see next in terms of Cloudflare content.

Keywords

💡Cloudflare Workers

Cloudflare Workers are serverless functions that run on Cloudflare's global network. They allow developers to write JavaScript code that executes close to the user, improving performance and reducing latency. In the video, the speaker discusses setting up the first Cloudflare Worker and highlights its capabilities, such as running on the edge and accessing geolocation data.

💡Wrangler 2 CLI

Wrangler is a command-line tool for developing and deploying Cloudflare Workers. The video mentions Wrangler 2.0, which is in beta, and is used to initialize, test, and publish Cloudflare Workers. The script shows how to install and use Wrangler 2.0 to create a project and test a worker locally.

💡Lambda Functions

Lambda functions are a concept introduced by AWS, where small, stateless functions are executed in response to events. The video compares Cloudflare Workers to AWS Lambda, emphasizing that they are similar in nature but operate in a different environment. This comparison helps viewers understand the serverless computing model.

💡Fetch Event Listener

In the video, the speaker demonstrates how Cloudflare Workers use a fetch event listener to handle incoming requests. This is similar to how browsers handle fetch events, making it a familiar pattern for web developers. The script shows how to add a fetch event listener and respond with a hardcoded response.

💡Response Object

A response object in the context of Cloudflare Workers is used to send data back to the client. The video explains how to construct a response object with content and headers, which is crucial for creating APIs or handling web requests. The example in the script shows a simple HTML response object.

💡Geolocation

Geolocation in the video refers to the ability of Cloudflare Workers to access the geographical location of the user. This is achieved through the `request.cf` property, which provides details like the user's city and country. The speaker uses this feature to demonstrate a worker that responds with the user's geolocation.

💡Proxy

The video discusses the ability of Cloudflare Workers to act as proxies, redirecting requests to different servers. The speaker shows how to modify a worker to proxy requests to Reddit, demonstrating the flexibility and power of Cloudflare Workers in routing and handling web traffic.

💡Compatibility Data

Compatibility data in the video is mentioned in the context of Wrangler's configuration file. It allows developers to specify the version of the Cloudflare runtime that a worker should use, ensuring compatibility with older features. This is important for maintaining stability as the platform evolves.

💡Serverless Computing

Serverless computing is a model where developers can build and run applications without having to manage servers. The video introduces Cloudflare Workers as an example of serverless computing, highlighting their ability to run code in a distributed manner without the need for dedicated server infrastructure.

💡Deployment

Deployment in the video refers to the process of publishing a Cloudflare Worker to the Cloudflare network. The speaker demonstrates how to use the Wrangler CLI to deploy a worker, making it accessible via a URL. This is a key step in making a worker live and accessible to users worldwide.

💡Performance

Performance is a central theme in the video, emphasizing the speed and efficiency of Cloudflare Workers. The speaker discusses how workers are globally distributed and run close to the user, reducing latency. This is showcased through the quick deployment and execution of workers, highlighting Cloudflare's focus on developer and end-user performance.

Highlights

Introduction to Cloudflare Workers and the significance of their recent feature releases.

Explanation of Cloudflare Workers as lambda functions in a different environment compared to AWS Lambda.

Recommendation to check out previous videos on Node.js and different runtimes for context.

Installation instructions for the Wrangler 2.0 CLI tool, which is still in beta.

Requirement for Node.js version 16.7 or greater for Wrangler 2.0 CLI.

Initial setup of a Cloudflare Worker project using `yarn wrangler init`.

Description of the `wrangler.toml` file and its role in project configuration.

Building a simple Cloudflare Worker to respond with a hardcoded HTML response.

Explanation of how Cloudflare Workers mimic browser-based APIs, especially the fetch event listener.

Demonstration of testing a Cloudflare Worker locally using `yarn wrangler dev`.

Instructions on how to publish a Cloudflare Worker to the Cloudflare network.

Example of using geolocation data (`request.cf`) in a Cloudflare Worker to customize responses.

Discussion on the potential use of Cloudflare Workers for dynamic content based on user location.

Exploring the possibility of using Cloudflare Workers as a proxy for web content.

Demonstration of proxying a request to Reddit through a Cloudflare Worker.

Note on potential limitations and restrictions when using Cloudflare Workers as a proxy for larger websites.

Final thoughts on the capabilities and performance focus of Cloudflare Workers and Wrangler 2.0 CLI.

Invitation for feedback and suggestions for future content on Cloudflare.

Transcripts

hey everyone welcome back and in this

video i want to discuss a bit about

cloudflare workers so this will be a

crash course on cloudflare workers what

they are how you can set up your first

worker on cloudflare and a little bit

about this wrangler 2 cli tool as well

so cloudflare has been on fire i mean in

releasing a lot of new features there

has been a full stack week going on on

cloudflare and these guys are releasing

features like crazy so i believe it

it makes a lot of sense that we

pay them some respect by actually

covering a few of their tooling over

here as well on coda if you're new here

make sure you leave a like subscribe to

the channel and hit the bell icon this

is free of cost and helps the channel

grow so in this video the purpose of

this video is to showcase you how

powerful workers are and workers are

essentially lambda functions like aws

has lambda functions concept but in a

different environment i have done a

video on node.js different runtimes

available javascript different runtimes

available where we cover about workers

and aws lambda and dino and a couple of

more so feel free to check that out you

could see it probably linked here in the

youtube other videos but yeah that's

that's where we are okay so let's start

this video the first thing i'm going to

do is because this wrangler 2.0 cli is

still in beta so we would have to

install it in a way yan had

wrangler i guess that's what they call

it but we can just go to their github

repository or you know just see here

here wrangler beta

and we can just access it

from

the node modules instead of installing

it globally although it would make sense

to install it globally once it's out of

beta but for the most part the clr

things usually don't change a lot so

whatever syntax you're expecting with

angular beta will probably work with the

stable release as well but if anything

changes i'll let you know in the

description all right so right off the

box we can see that wrangler 2.0 cli

actually expects a 16.7 or greater node

so we can have a node.js version which

is greater than that there we go

node 17 for the win and let's go ahead

and try installing

the cli now

okay so the first thing i'm going to do

is say yarn wrangler init and the name

of my project let's say first worker it

is so i'm just going to install

it like this and it's going to create

this pretty much a

wrangler.normal file which includes the

name and the compatibility date and

compatibility data is also something

which is like a new feature with

cloudflare um we can discuss it maybe in

some other crash course but for now you

can think about this as a way that

cloudflare would allow you to use even

older features which might break in the

newer release as in older features of

the runtime and lock it to a specific

version right but you don't need to

worry a lot about this all right so

let's go ahead and build a very simple

example just to get started and then

we're gonna build on top of that so

first thing first what i'm gonna do is

actually go ahead and start writing with

add event listener because the way

cloudflare works cloudflare workers work

is that it tries to stay very close to

how the browser-based apis work right

and what they say over here is that we

are adding a global listener of fetch

and the way the syntax works is you say

even dot respond with and of course you

can work here with javascript as well

with typescript as well and then you

have to send a response object over here

right i'm gonna say my response object

let's say is a hard-coded response and

this is like again an api in javascript

if you have never really used this

that's fine because in most cases you

don't really need to construct a

response yourself but you would always

have used something like data is fetch

something right this is like

window.which that that thing where you

specify the method post and so on so the

thing which this returns after awaiting

obviously is when you say data.json or

data.text that's that's effectively you

are doing that on a response object

right so this data over here is a

response object

similarly we already have the request

coming from the client

all we need to do is actually construct

a response object and the way we do that

is we can just specify the content which

needs to go and then in the headers part

we'll just say that because this is an

html document i'm going to specify the

content type of

text html

right and over here you can just say

html string

something like this and this html string

could be a simple you know a simple

document.html you can even skip

the doctype and stuff nothing works just

fine but i mean

that's fine if you just want to keep

that as well i'm just going to quickly

say hello from codedam to cloudflare

workers this is like a very simple

document we have the response object and

all we need to do

is just say

this response

object over here this is like all it

takes to create a very simple worker

page this worker would be globally

distributed and would be running across

the world now the next question is how

do you test this out and it is extremely

easy with the version 2 of wrangler all

you have to do is say yarn wrangler dev

and then the name of the script in this

case it's index.js so you write that you

might need to

authorize cloudflare to use your account

if you are doing it for the first time

with the cli but once you do that you're

going to see it just says your listening

ad this port number and over here you

can see that it starts working all right

so you can see you can now make some

changes and start working and testing it

eventually you're gonna have to give it

a couple of refreshes i guess to

just make it work but it should be

working just fine okay once we have this

figured out let's also see how you can

publish this on cloudflare network so

i'm going to close this and start

writing the command to publish this on

the cloudflare network so that we get an

actual url deployed here so i'm going to

go ahead and say yarn wrangler

publish and the index.js name of the

file right now we are just going to

publish only one single file you can

configure that with the stormwell file

if you are working on a more

sophisticated project and the name for

this is let's say first worker on

cloudflare

and hit enter and of course this will

also ask you for your

account and if it is already linked it

will just check if the sub domain is

registered it publishes it to

workers.dev which is like a cloud for

your own domain and you can see in my

case i already have a username and that

particular you know this is the name

which we specified and this username is

already available to my my cloudflare

account you would have to authorize

yours

but it's as simple as just writing a

single command in the cli

and basically just visiting this url

once that is available so you can see it

is instantly deployed on a live url and

you can share this but obviously this

script is not very useful so let's try

to make some changes to the script to

see another example of what can be done

with cloudfare workers so we know that

cloudflare actually runs on the edge

these workers are actually running on

the edge so we have the ability to tap

into the geolocation of the person who's

browsing the domain right so what we can

do is build something on those lines and

the information about the geolocation is

in the location is request dot cf so

what is this request variable this

request variable is pretty much what

what you get out of the event so this

request is event.request or rather you

can just do something like

this and then the location information

is in request.cf

right just for fun if you just try to

respond with and let's say this response

this html string is a function an order

just a string i can just pass in my

location and if i'm able to somehow just

json or let me just go ahead and make

this a three

just json.stringify

what we have in data

and of course this is a template literal

okay so if we try to do this with this

work over here and if i try to publish

this again all right within a few

seconds this goes public and i can go

ahead and refresh this on the main

public domain and you can pretty much

see all the information about where i am

situated right now so of course this all

this information is blood but we can

kind of like look at this data down here

so you can see i'm india based i'm from

new delhi you get all that information

and this this could be like really

helpful in terms of for example if you

have a cloudflare worker deployed as a

page for your purchasing power parity

pricing page then this is like really

useful because you don't have to make

another http call your worker is the one

which is running the closest to the user

and it all automatically has all that

information this would also be used as a

kind of a proxy i guess because what

cloudflare does allow you to do is fetch

request or fetch the resources within

your own request right so cloudflare

sits in the middle this worker and this

connects to the internet on your behalf

and then redirects you back let's say i

mean this is probably not a replacement

for a proxy or anything but maybe for

simple static pages it might be fine

let's say you want to have

a redirection or a proxy event set for

let's say reddit reddit.com right

so what you can do is in terms of this

response the response which you're

constructing

instead of doing it like this

we actually construct the url

so that we pretty much get everything in

place so i say the url

is new url request which is

event.request.url over here this is the

url which pretty much the person is

writing in the browser itself like the

full url my worker or cloudflare.dev

slash abc and whatever so from this url

what we need to do is we need to extract

out this particular

path right and what we need to do is

actually append that path to reddit.com

so one way to do that is of course that

we take out this path like i said and

append it but a faster way for that is

actually when you change the hostname of

this url itself because like i said this

url would be constructed from this

particular thing right my worker in our

case it's basically this particular

thing over here right so this would be

constructed from this

and then what we need to do is in our

worker we need to replace this with

reddit.com so all we have to do is just

say url.hostname

is reddit.com

right and

the next thing is we need to fetch the

data so i'm going to say fetch

my url dot to string but it's not as

simple as that because requests contain

a lot of metadata as well right like

headers and cookies and stuff like that

so what you want to do ideally is you

also want to pass the original request

object which contains all the headers

and all the post data and the body and

stuff directly to the fetch right and

this fetch is literally like

very close to how the browser api works

so this is this will work out just fine

as well so you have the url converted

you have the request converted this is

going to return you a promise

and i mean you cannot wait over here if

you would like

but you can specify a promise over here

as well that will just work fine so this

is all you need to do

to proxy all the data on reddit.com

through your cloudflare worker let's see

if this works out i'm going to deploy

this again

and i guess reddit already has some

protection measures so that this this

kind of proxing doesn't happen

so what we can do is probably try some

other website like goddamn.com because

that's one website i'm sure that does

not has this prediction at least for now

and i had to go to incognito because

reddit somehow set some cache in the

browser but you can see that it pretty

much works just the way you would expect

it to work with all the functionalities

and everything working but on a

cloudflare proxy domain right the

original domain is codedam.com obviously

but over here you can see this also

works just beautifully fine right and

i'm hoping that this also works you know

in single page application navigation

and you can see like literally this is

the main website but the funny thing

about this is if you're trying to build

something like this you can build your

own codedam.com maybe set up a domain

and make some changes over here which is

like now it feels like we are heading

into a phishing attack direction but i

mean you can have some fun over here

right if i replace this with google.com

hopefully this should also work with

google or maybe not like just like

reddit google might have these

restrictions in place that if the

subdomain does not match the domain does

not match the original one then it

should probably just

redirect on the main website and yeah it

does so if you visit this domain it just

redirects you to google.com but yeah i

mean proxing like this obviously would

not work for a lot of websites

especially the larger ones because they

already have those security measures in

place but for smaller ones like godam

this will work just fine so if your

university or college has blocked

goddamn for some reason i hope not but

if it is then this is like one naughty

way to get around that so yeah that's

pretty much it for a crash course on

cloudflare workers that's how you build

something with workers deploy them very

quickly with the cli and

you know just do tons of amazing stuff

with proxing and responding and creating

apis with just workers and having a live

public domain which is deployed

worldwide within seconds i mean i love

this fact about cloudflare that they

focus a lot on you know just speed and

performance and not only in terms of the

end user but also in terms of the

developer which is equally important but

yeah that's my

opinion on cloudflare workers especially

the wrangler 2.0 cli which is also

amazing in a lot of ways especially when

we dive more into the developer side of

things let me know what you think about

cloudfare workers in general what do you

feel about this video do you want to see

more content around cloudflare let me

know what you think and we can

build something more probably a small

course short course on youtube as well

but that's all for this video i'm gonna

see you in the next one really soon so

make sure you comment down below what

you're gonna see next on cloudfare if

you're still watching this video make

sure you comment down in the comment

section i watched this video till the

end also if you're not part of code

dam's discord community you are missing

out a lot on events which we organize on

a weekly basis to code you already know

the drill make sure you like the video

subscribe to the channel if you haven't

already and thank you so much for

watching