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