Render Cloudflare Region Data for a Request Using request.cf

Lecturer: [0:00] In the previous lesson, we updated our Worker to return an HTML response instead of a plain text, Hello Worker. Now, we can build on that to make something more interesting than this h1 that says, Hello World. In our worker, we've been passing in the request argument here into our handleRequest function.

[0:20] We haven't been using it, but there's a ton of things inside of this request that are super useful for developers. One of these that's unique to CloudFlare workers is what's called the request.cf object.

[0:32] The request.cf object has a bunch of interesting information, for instance, where the user is requesting from, what data center their request is being served from, and all sorts of interesting things that we can use to make something a little bit more interesting as a starter project.

[0:48] If I come into the docs, much like I did for the response page and look at runtime APIs request. Here, on the sidebar, if I click on IncomingRequestCfProperties, I can see that there's a bunch of stuff that each request that comes into your Worker has set by default on request.cf.

[1:07] Things like colo, which is the three-letter airport code of the data center, for instance, the Dallas-Fort Worth or things like country if we have it set, which would represent the two-letter country code in the request. You can also get things like city, continent, latitude, longitude. There's all kinds of interesting stuff in here.

[1:26] We can use this to make something that is a little bit more comprehensive than a simple Hello World. Instead of having request.cf here, I'm going to take it. I'm going to paste it inside of my template call here. I'm going to pass it as an argument into my template function.

[1:44] In template.js, I'll just pull this out and call it cf. This is going to be obviously the only argument that's passed into this function. Now, we can do something with all of that information that's coming from the request. For instance, what I might want to do here is show a country code.

[2:03] If I know that, for instance, the user is coming from the US, I could say something like, "Hello from the country," or I could say, "Hello there. You're connecting from the US flag or the German flag," or whatever they're coming from in no particular location.

[2:19] To do that, I'm going to do a few things. First, I'm going to add this npm package called country-code-emoji, so npm i country-code-emoji. That will just install it in my package.json. Inside of template.js, I'll say import flag from 'country-code-emoji', so I'll add that here.

[2:41] Then, I can use it inside of my function. I'm just going to turn this into a actual function with a return here. I'll just add this closing bracket, re-indent this real quick.

[2:54] Now inside of here I'll say const emoji = flag, which is this function that comes from here. Then I'm going to use the country code, which was set on the actual request.cf.country. It's one of the fields that we're looking at in the docs. I'll say flag.cfcountry.

[3:14] Then maybe what I'll do is I'll default here to a default value. I'll copy this emoji, and I'll say if there's no flag, I'll return this emoji instead. I'll put it in quotes so that my code works. Now I can say, like I said earlier, maybe something like, "Hello, there. You're connecting from cf.country." Just getting the name of the country and then the emoji.

[3:47] I'll say, "Hello, there. You're connecting from..." In my case, US. Then the US flag here. If it can't find a flag for that country, then it'll just return a wave emoji instead. One thing I might want to do real quick just to make this look a little bit nicer is include some CSS. Let me paste that in real quick and I'll show you how it works before we publish it.

[4:11] I'm just going to paste this in. You can see that there's going to be two new things here. First is a CSS stylesheet called modern-css-reset. I'm just pulling it straight from Unpkg. This is just going to set some nice defaults between browsers.

[4:26] I'll also set up some default styles here. Body is just going to have a gray background. It's going to use Flexbox. It's going to have a full screen height. Inside of that, I'm going to have this container that just has a white background, a rounded border, and some padding.

[4:44] To use that, I'm going to do, inside of the body, <div class= "container">. I'm just going to put this h1 inside of that. I've just added some CSS here to make this look a little bit nicer. With all of that done, I can come back here and publish my actual project. I'll run wrangler publish. You can see here, now I come back. I'll refresh this. It says, "Hello, there. You're connecting from US."

[5:16] Here's a funny thing. I'm running Windows. It doesn't look like Windows supports country flags. If you visit this on Mac -- and I'll give you a preview of what that looks like, I'll overlay it here -- you can see that it returns the correct flag here. If you come on iPhone or Android or basically anywhere else besides windows, it should look like you'd expect.

[5:37] Even more interesting is if we were to connect to this using a VPN. Maybe, you have a friend in a different country. You can ask them to check out your project, but for me, the easiest way to do this is to turn on a VPN, change to a different country, and then revisit this page to see the new country and new emoji, so I'll do that.

[5:57] You can see that it looks like, "Hello there. You're connecting from DE," and then shows the German flag because I connected from a VPN in Berlin. This is pulling now from the Cloudflare Workers server in Berlin. This will pretty much work all over the world, depending on where you're connecting from. It's a pretty cool proof of concept that you can pretty much only do in Workers.