Create a Cloudflare Worker with the Wrangler CLI

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.