Create a Cloudflare Worker with the Wrangler CLI
Cloudflare Workers are serverless functions that run at the Edge! 🔪
The Wrangler CLI is a tool for interfacing with your Cloudflare account, and creating or publishing your Workers.
In this video, we use the Wrangler CLI to log in to our Cloudflare account and authorize the wrangler command to make changes on our behalf.
Additionally, we create a worker and host it locally with the npx wrangler dev command. We then demonstrate making a GET request to our Cloudflare Worker from the browser, and confirm it is sending the correct response.
By modifying the response locally, we can see that changes are reflected any time we refresh the browser.
Code Snippets
Login to Cloudflare with Wrangler CLI
npx wrangler login
Create Cloudflare Worker
npx wrangler init supabase-at-the-edge
Run wrangler development server
npx wrangler dev
Resources
Instructor: [0:00] Type npx wrangler login to use the Cloudflare CLI to log into our Cloudflare account. We'll need to install the following packages, so we're going to say Yes. This will automatically open up the Cloudflare dashboard login screen, where we can either sign up or log in. I've already got an account, so I'm going to log in. [0:16] Now, we can allow our Angular CLI to make changes to our Cloudflare account by clicking Allow. We can close this browser window, and back in our CLI, we have now successfully logged in.
[0:27] Type npx wrangler init to create a new Wrangler project. I'm going to name mine Supabase at the Edge. This will step us through a few questions. We would like to use Git to manage this worker. We would like to create a package.json. For this example, we're not going to use TypeScript, but if you're familiar with the syntax, adding types to each lesson would be an excellent extension to the course.
[0:51] We would like to create a fetch handler worker. Now, we can change into that new directory and open it up in VS Code.
[0:58] If we open up that worker under src and then index.JS, we can get rid of these comments at the top here and see that this is exporting out an object with a function called Fetch and that's returning a new response of Hello World. We can run this locally by typing npx wrangler dev and we'll see that's now listening at localhost over port 8787.
[1:18] If we navigate to this URL in our browser, we'll see the text "Hello World." We can change this text to anything that we would like such as Hello Eggies with an egg emoji. When we save and refresh our browser window, we'll see that new message.