Preview and Publish Your Cloudflare Workers Project

Christian Freeman: [0:00] With our code generated using wrangler generate, we can already deploy and publish our first Workers project. To do that, we're going to do two things. First, we're going to run wrangler whoami. As you might remember from a past lesson, this just shows you that you're logged in with your email. It also gives you an account ID.

[0:19] I'm going to take that account ID, I'm going to copy it, then I'm going to open up wrangler.toml. Wrangler.toml is our configuration file for our Workers project. Wrangler uses it to know, for instance, where to deploy your project, what your project is called, and what kind of type your project is.

[0:38] For now, you can see that our name defaulted to the name of the project that we gave when we first generated it. In this case, that's just My Worker. Type has defaulted to JavaScript. Account ID is blank here. I'm going to come in here and I'm going to paste in that account ID.

[0:56] An important thing for you to know, account IDs are totally OK to have in your source code. You can't do anything with an account ID without having the API token that we got by using wrangler login in the previous lesson.

[1:09] You don't need to worry about, for instance, git ignoring your wrangler.toml or something like that. You're totally fine to publish it up on GitHub. You could very easily go find my account ID, for instance, if you just went looking on my GitHub profile.

[1:22] The last three fields are particular to actually deploying your project. As you might remember, we picked a workers.dev subdomain minus just Christian Freeman, my name. This workers_dev field here tells Wrangler that I want to deploy this myWorker function to myworkers.dev subdomain.

[1:44] If I wanted to deploy this to an actual domain, say for instance christianfreeman.com, route and zone ID would let you do that. In a future lesson, I'll show how that works. For now, we'll just leave them blank, but keep an eye out for that. In the future, we'll come back and we'll add this information, and it will allow us to deploy something to a custom domain.

[2:05] Now that we've added account ID, that was the only thing that we changed here. We can start to look at how to deploy this project. The first thing you need to know is that, for instance, we haven't seen this worker what it actually looks like when it's running. We haven't actually run it. We've just looked at the code and wrapped our head around how it works.

[2:26] Wrangler has a built-in tool for understanding how your project will look in production. It's called Wrangler Dev. I'm going to get that running here. You'll see that what it's going to do is it's going to set up this watching thing here, so it's going to look at my local folder here. Then, it's going to set up http://127...1 port 887. If you're familiar with doing any sort of Web dev on your own computer, you know this is a local URL.

[2:59] I'm going to open this. You can see I'm running it in my browser, and I get this "Hello Worker!" response back. It's plain text, and it looks exactly like we would expect. If I come and do inspect here, I'll open up my Network tab. I'll refresh. You can see if I look at the information for this request, I'm getting this Content-Type: text/plain.

[3:24] In addition, I could see this actually coming through Cloudflare's Network. It's already uploaded into Workers. It's using what we call our preview instance to serve an instance of this worker so that you can test it locally. I have cf-ray which is a unique ID for this request. I have cf-request-id, which is another internal ID that we use to say, "This is a Cloudflare-based request."

[3:49] In the same way, I have this other header here called Cloudflare, just in case you weren't sure. Yes, the server is Cloudflare. Now that everything looks like we would expect running locally, we can come back here. I'll just type Control-C to quit wrangler dev.

[4:06] We can prepare publishing our actual worker for the first time, so I'll run wrangler publish. It's going to do a little bit of building if it needs to, though, in this case, since it's plain JavaScript, there's no packages or anything like that. It'll skip any sort of build, and it will upload it and publish it to workers.dev.

[4:26] Our project name is called My Worker. My workers.dev subdomain is Christian Freeman, and so my URL here is myworker.christianfreeman.workers.dev. I'll open this up. You can see that it looks exactly the same as it did locally, so myworker.christianfreeman.workers.dev. I'm getting the same response back here.

[4:51] With that, just one command, we've taken our worker and we've published it directly to a workers.dev subdomain in 10 seconds, 15 seconds pretty quick.