⛅ Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)
Summary
TLDRThis tutorial video guides viewers on setting up a Cloudflare worker as a web server, highlighting the possibility of following along without a Cloudflare account and the availability of free hosting on their platform. The presenter covers installing the 'wrangler' CLI, configuring Webpack, creating HTML files, setting up routing, and utilizing Cloudflare's worker router for efficient request handling. The video also includes refactoring the application for better structure and organization, with a focus on importing HTML, creating pages, and custom routing. Viewers are encouraged to subscribe for more Cloudflare worker content and to check out the provided links for full source code and articles.
Takeaways
- 🚀 Configuring a Cloudflare worker to run as a web server.
- 🔗 You can follow along without signing up for Cloudflare, and you can use the free plan for hosting.
- 📹 This is the second video in a series on Cloudflare workers, with the first being a getting started video.
- 🛠️ Install Wrangler globally as the CLI tool for building the website.
- 🔧 Create a `webpack.config.js` file with the target set to web worker and set the entry point to the index file.
- 📁 Move the index file into the source directory and include HTML loader in the webpack configuration.
- 📝 Create `index.html` and `404.html` files in the HTML directory.
- 📜 Use a router from the Cloudflare worker template to handle routing.
- 🔄 Refactor the application by moving response code into separate files and organizing pages in a source directory.
- 💻 The final setup includes importing the necessary responses and pages and ensuring correct routing.
- 📢 Subscribe and click the bell icon for notifications about future videos and check the description for article links and source code.
Q & A
What is the main topic of the video?
-The video is about configuring a Cloudflare Worker to run as a web server.
What are the two fun things mentioned about using Cloudflare Worker?
-The two fun things mentioned are that viewers can follow along without signing up for Cloudflare, and when they decide to publish on Cloudflare, they can use the free plan for free hosting.
What is the prerequisite video recommended by the speaker?
-The speaker recommends the 'Getting Started' video on Cloudflare Workers as a prerequisite.
What is the first step in setting up the project?
-The first step is to install Wrangler globally, which is the CLI used to build the website.
What does the speaker do after installing Wrangler?
-The speaker runs 'wrangler generate' to create a site called 'my website', then navigates into the project directory and reloads VS Code.
Why is Webpack configured in the project?
-Webpack is configured to set the target to a web worker and to set the entry point to the index file, allowing for the loading of HTML files as templates.
What loader is installed to handle HTML files in the project?
-The HTML loader is installed to handle HTML files in the project.
What is the purpose of creating an 'html' directory and what files are created there?
-The 'html' directory is created to store HTML files. The speaker creates 'index.html' and '404.html' files there.
How does the speaker handle routing in the initial setup?
-The speaker uses a simple routing mechanism by extracting the pathname from the request URL and returning the appropriate HTML file based on the pathname.
What changes are made to improve the routing system?
-The speaker introduces a more sophisticated routing system by copying the 'router.js' from the Cloudflare Worker template and using it to handle routing.
What is the purpose of creating a 'lib' directory and what is added there?
-The 'lib' directory is created to store utility functions and the speaker adds a 'router.js' file there for routing purposes.
How does the speaker refactor the application to improve its structure?
-The speaker refactors the application by creating a 'pages' directory for page-specific functions and a 'responses' file in the 'lib' directory for response handling functions.
What is the final step the speaker suggests for viewers who want to deploy their project?
-The speaker suggests checking out the 'Getting Started' video for more details on deploying the project onto the Cloudflare Workers platform.
Outlines
🛠️ Setting Up Cloudflare Worker as a Web Server
This paragraph introduces the video's objective to configure a Cloudflare worker as a web server. It highlights the ease of following along without a Cloudflare account and the availability of a free hosting plan. The video is the second in a series on Cloudflare workers, and while the first video is recommended, it's not mandatory. The speaker briefly mentions their background before moving on to the technical setup, which includes installing Wrangler, a CLI tool for building the website. The focus then shifts to configuring Webpack, setting up the project structure, and implementing routing with HTML file handling.
📚 Implementing Advanced Routing with Cloudflare Worker
The speaker discusses the process of enhancing the Cloudflare worker's routing capabilities by adopting a smarter routing approach from the Cloudflare worker template. They demonstrate how to integrate a router into the project, refactor the code to handle GET requests and unmatched routes, and ensure the router is properly utilized. The paragraph also covers the refactoring of responses into a separate file for better organization and the creation of a 'pages' directory to modularize the routing logic. The speaker ensures that the refactoring maintains the functionality of serving HTML files and custom routing.
🎉 Wrapping Up and Encouraging Further Engagement
In the concluding paragraph, the speaker expresses satisfaction with the progress made in setting up the Cloudflare worker, which now includes HTML importing, page creation, and custom routing. They provide guidance on deploying the project onto the Cloudflare workers platform and encourage viewers to watch the 'getting started' video for more details. The speaker also prompts viewers to subscribe for updates, engage with notifications, and follow along with an article and source code provided in the video description. They invite questions and suggestions for future videos in the comments or on Twitter, and thank the viewers for watching, signaling the end of the video.
Mindmap
Keywords
💡Cloudflare Worker
💡Wrangler
💡Webpack
💡HTML Loader
💡wrangler.toml
💡Routing
💡HTML5 Template
💡Content-Type
💡Router.js
💡Refactoring
💡Pages
Highlights
Learn how to configure a Cloudflare Worker to run as a web server.
Follow along without having to sign up for Cloudflare initially.
Use Cloudflare's free plan to publish your web server.
Introduction to Wrangler CLI, the tool used to build the website.
Step-by-step guide on setting up a new site called 'my website' using Wrangler.
Configuring Webpack for Cloudflare Workers with a specific webpack.config.js file.
Installation and configuration of the HTML loader for Webpack.
Creating HTML files for the web server, including index.html and 404.html.
Setting up routing for the web server to serve different HTML files.
Using the Cloudflare Worker template router to handle routing efficiently.
Refactoring code by moving routes and responses into separate files.
Creating reusable response functions such as htmlResponse and notFoundResponse.
Organizing HTML pages into a 'pages' directory for better structure.
Importing and using these organized pages and response functions in the main index file.
Testing and ensuring the Cloudflare Worker is serving the correct HTML files.
Final demonstration of the working Cloudflare Worker with custom routing.
Encouragement to watch the first video in the series for additional context.
Information on deploying the Cloudflare Worker onto Cloudflare's platform.
Invitation to subscribe for more videos on Cloudflare Workers.
Links to the full source code and additional resources provided in the video description.
Transcripts
hello friends in today's video i'll be
configuring a cloudflare worker to run
as a web server
and two fun things about this is that
you can follow along without even having
to sign up for cloudflare and when you
do want to publish it on their service
you can use the free plan and who
doesn't like free hosting as a reminder
this is the second video in a series i'm
doing on cloudflare workers
if you haven't seen the first one i
recommend checking it out it's the
getting started video
it's not a prerequisite and you can
follow along without having seen that
video first but i'd still recommend
checking it out afterwards
but first a little bit about myself
let's just move on and if you skip the
first video
you'll need to install wrangler globally
this is the cli we'll be using to build
our website
now i already have wrangler installed so
i'm not going to run this command
what i'm going to do is i'm going to run
wrangler with generate and i'm going to
tell it
i'm going to create a site called my
website
so i'm going to run that now and i'm
going to cd into
my website and then i'm just going to
reload vs code
the first thing i need to do is
configure webpack so i'm going to create
a
webpack.config.js file and paste this
in now the key takeaways here are that
the target is set to a web worker
and i've set my entry point to my index
file
so what i'm going to do here is i'm
going to create that source directory
and move the index file into that source
because i'm planning on loading html
files as templates
i'm going to have to include that in my
webpack so i'm going to go ahead and
install the html loader
and i'll add the appropriate settings
for html loader here
and i'll be sure to include links to all
of these files in the description below
okay now that webpack has been
configured i'm going to open up the
wrangler tomml file
and i'm going to change the type of the
project from javascript
to webpack and make sure that i have the
webpack config set to
webpack.config.js okay let's
clean this up a bit i think i can make
this a little bit larger for you guys
there we go next i'm going to create
those html files
so i'm just going to create an html
directory
and the first one i'm going to create is
called
index.html and i'm going to use the
html5
template and i'm just going to put a
hello index just so that we know that
we're on the index page
and the next file i like to create is
going to be a 404.html and i'm going to
do the same thing here
except for this title i'm going to say
404
not found okay i'm going to head back to
index so first i'm going to go ahead and
close
these open up index
and import my new files at the top so
i'm going to
import index from
and i'm going to go into the html
directory and i'm going to load
index.html and i'm going to say
the same thing for my 404 page
and now that these are loaded all i have
to do is set up my routing so i'm going
to say
const path name equals
new url from request.url
and all this is doing is it's just
pulling the path name out of the request
url
now i can use this to test the path name
so if it equals forward slash which is
my index
route what i'm going to do is return
my index
so i'm going to take the index from here
and instead of returning
hello worker i'll just return index and
otherwise i'm going to return my not
found
and i also want to change this to have a
status
of 404 and if this all works i should be
able to open up my terminal
and run wrangler preview watch
and if everything works you should get a
window that looks like this
and i can see here it looks like it's
returning my html as text
so all i have to do to change that is
change the content type to
text html and i'm going to do that for
the 404 also
and now when i go back hello index
let's test my not found
404 not found and we could stop here but
i don't like the way that we're doing
the routing
i think that there's some much smarter
ways to do routing out there
and what i'm actually going to do is
copy from
the cloudflare worker worker template
router
they have a router.js here that i'm
going to copy from
so i'm going to copy this and go back
into my project
and i'm going to create a lib directory
where i'm going to create the
router and i'm just going to paste
everything into there going to import
router at the top
and then inside of my handle request i
can just type in
const router equals new router
and we won't be using the path name
anymore because the router is going to
handle that
and now all i have to do is say
router.get because this is going to be
a get request it's going to handle the
slash
and then the handler is going to return
my response
so i can get rid of this
the next piece i'm going to do is say
router.all
which will handle any requests not
matched by a previous router
and that also has a handler
which is going to return my 404
and the last piece is we have to tell
the router to actually route
so i will say the response equals await
router dot route and
i'm going to pass the request into this
and then i have to return
the response now let's head back here
just to make sure everything's still
working so i'm going to hit refresh
and it refreshed with index and my 404
is working too so that's it really our
cloudflare worker is now working and it
serves our html files
but i feel like this application does
deserve a little bit of refactoring so
that's what i'm going to do right now
and i'm going to start by these
responses i don't like having all of the
code in this page here
so i'm going to copy these routes out
and i'm going to create
a new file in lib called responses
and what i'm going to do is i'm going to
create two new functions one of them
is going to be called html response
and the other one will be not found
response
and i have to go back in here and get my
imports and these both have to be
exported
and actually here i don't want to have
index passed in
i would like that to be passed in here
as html
and then i can get rid of the index here
now i can head over to my
index and import the responses from here
so i'm going to say lib responses
and i'm going to import the html
response as well as my
not found response then i can head down
into the
handle request into my routers and
delete this and replace it with my html
response with
index and i'll do the same thing for the
not found
so i'll say not found a response
and i don't need to pass it anything
and now my routes look like this i also
like the concept of
pages so what i'm going to do also is
inside of source i'm going to create a
directory called pages
and i'm going to create my index page
here
and what that is going to be is this
route here
so i'm just going to paste that in here
so i'm going to say const
index equals
and i'm going to export default index
and then i still have to import index
from the top
and because of the naming conflict i'll
just call this index.html
and next i'll do the same with the 404
page
so i'm going to create a new page called
404.js
and i'm just going to copy the same
thing from index
except here it's going to be 404
i'm going to call this not found
html
and rename this to not found
then i have to go into index and copy my
not found response
that doesn't take anything and i have to
import
those functions at the top too so
i'm going to import the not found
and then in index i need to import my
html response
and now that i have my pages set up i
can go back into index
so i'm going to close these out
and i won't need these
or the responses and i'm going to import
index from pages index
and down here in the get route for slash
i'm just going to say index
and for not found
i'm going to do the same thing
and let me just check one thing so
because i move these into another level
deep
i'm going to have to change this to go a
little bit
deeper out
and i probably have to do the same to
responses
and let's just double check that
everything's still working so
here it looks like the index is coming
up correctly and
my 404 is too so i think this is
probably a good place to wrap up the
video
i really like what we have going on here
we were able to import the html we have
some pages
and we have some custom routing as well
and if you're curious how to deploy this
onto the cloudflare workers platform be
sure to check out my getting started
video
which i mentioned at the beginning of
this as that goes into a little bit more
detail
and there's going to be more videos to
come on cloudflare workers so be sure to
subscribe
and just as a reminder you got to click
that bell icon if you want to receive
notifications
and everything we've covered in this
video is going to be in an article that
i'm going to
link in the description below this will
make it easier for you to follow along
and copy and paste into your own project
also check the description for links to
the full source code
if you've got questions about cloudflare
workers or want to see something in an
upcoming video
be sure to post that in the comments
below or hit me up on twitter
and of course thanks for watching and
i'll see you in the next video
[Music]
oh
[Music]
you
Посмотреть больше похожих видео
Cloudflare Workers Crash Course | Deploy Your Website with Cloudflare
How to deploy your websites to Cloudflare's Pages Platform for free
How to host your Webflow/Framer site with CMS for FREE on Cloudflare. No code required
Serverless API with Cloudflare Workers (Hono, D1 & Drizzle ORM)
Belajar Laravel 11 | 3. Struktur Folder
Server Side Rendering with Vue.js 3
5.0 / 5 (0 votes)