⛅ Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)

Summary

This 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

00:00

🛠️ 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.

05:01

📚 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.

10:03

🎉 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.

Keywords

💡Cloudflare Worker

Cloudflare Worker is a serverless computing platform that allows developers to run JavaScript code directly at Cloudflare's edge network. In the video, the host is configuring a Cloudflare Worker to function as a web server, demonstrating how it can be used to serve web content. This is a key concept as it underpins the entire project being discussed.

💡Wrangler

Wrangler is the command-line interface (CLI) tool used to build and deploy Cloudflare Workers. The script mentions installing Wrangler globally, which is essential for setting up the project. Wrangler is used to generate a new site, manage dependencies, and preview the worker locally, making it a central tool in the development process.

💡Webpack

Webpack is a module bundler that is used in the video to compile and bundle the project's assets, such as JavaScript and HTML files. The script includes configuring Webpack to target a web worker and setting the entry point to the index file. This is crucial for defining how the application's resources are managed and served.

💡HTML Loader

HTML Loader is a Webpack loader that enables the loading of HTML files as templates. In the script, the host installs HTML Loader to include HTML files in the Webpack configuration, which is necessary for serving HTML content through the Cloudflare Worker.

💡wrangler.toml

wrangler.toml is the configuration file for a Cloudflare Worker project. The video script mentions modifying this file to change the project type from 'javascript' to 'webpack' and to specify the Webpack configuration file. This file is essential for defining project settings and build configurations.

💡Routing

Routing in the context of web development refers to how an application handles different URLs and requests. In the video, the host sets up routing to direct requests to the appropriate HTML content, such as serving 'index.html' for the root path and a '404.html' for not found errors. This is a fundamental aspect of web server functionality.

💡HTML5 Template

An HTML5 template is a starting point for creating HTML documents that adhere to the HTML5 standard. The script mentions using an HTML5 template for the 'index.html' and '404.html' files, which provides a basic structure for the web pages served by the Cloudflare Worker.

💡Content-Type

The Content-Type header in HTTP responses specifies the type of content that the server returns. In the video, the host changes the Content-Type to 'text/html' to ensure that the HTML content is served with the correct MIME type, which is crucial for browsers to correctly interpret and display the content.

💡Router.js

Router.js is a utility in the Cloudflare Workers template that provides a simple way to handle routing. The script mentions copying from Router.js to implement custom routing in the project, which helps in managing different routes and responses more efficiently.

💡Refactoring

Refactoring in software development is the process of restructuring existing code without changing its external behavior to improve its internal structure. In the video, the host refactors the code by moving routes and responses into separate files, which enhances readability and maintainability of the code.

💡Pages

In the context of web development, pages refer to individual HTML documents or components that make up a website. The script discusses creating a 'pages' directory to organize the HTML content, such as 'index.js' and '404.js', which represent different pages served by the Cloudflare Worker.

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