Cloudflare Workers Crash Course | Deploy Your Website with Cloudflare
Summary
TLDRThis 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
đ 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.
đ 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.
đ 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.
đą 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.
Mindmap
Keywords
đĄCloudflare Workers
đĄWrangler 2 CLI
đĄLambda Functions
đĄFetch Event Listener
đĄResponse Object
đĄGeolocation
đĄProxy
đĄCompatibility Data
đĄServerless Computing
đĄDeployment
đĄ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
Voir Plus de Vidéos Connexes
â Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)
How to host your Webflow/Framer site with CMS for FREE on Cloudflare. No code required
Serverless Auth with Lucia Auth V3
Serverless API with Cloudflare Workers (Hono, D1 & Drizzle ORM)
How to deploy your websites to Cloudflare's Pages Platform for free
Como usar o Cloudflare na Turbo Cloud
5.0 / 5 (0 votes)