Rapid Side Projects with Cloudflare Workers and Workers Sites

Hello. Welcome to Cloudflare TV. My name's Steve Pack. I'll be your host today. We're going to talk about how to understand worker sites. This is going to be fun. It's going to include some live setup, some live coding, or at least some live copying and pasting. And I'm suitably terrified. So I hope you can come along with me in the right spirit. I never expected to be a mega TV star growing up in my hometown in Battle Bay. Look Ma, maybe nerds will inherit the earth after all. This is a good sign. All right. So I'm going to be sharing my screen for most of this because we've got a lot to do. So let me do that now. Quick public service announcement. We will be taking I'll be taking questions live studio at Cloudflare .tv. As I said, there's a lot to do. So I'll do my best to look at the question feed as they come in. And if not, here are some other ways to get in contact with me. So Cloudflare Workers, it's Cloudflare's serverless platform, our edge compute platform. I love it. It allows you to be really productive. And I'm going to talk a bit more about that. But because there's a few things we're going to do today that are sort of long running. I'm going to kick them off now so you can see the whole end to end flow, but they'll just be running in the background. So basically, we're going to make a side project in Vue .js like a little, little byte converter app. We're going to deploy it to Cloudflare Workers, we're going to see if we can put it behind a domain name and just sort of you'll see how simple it is to get get projects up on the web using these technologies. Okay, so For folks following along. I just want to show you my environment. I'm on Mac OS. Mojave I use NPM. I'm using version four of Vue.js. And so I'm going to create a little startup project called converter. I'll tell you how I came to do this in a moment. We're also going to try put this behind a domain name. It's We're a little bit at the mercy here of DNS propagation. Sometimes you can register a domain name and you know the whole process goes through within a half hour segment, but not always. So we'll do it just so that we can at least sort of see what the whole process looks like. And it'll eventually show up behind this. Let's Show up behind this domain. So we're going to be using the domain converter 10 I'm using something here called freedom. It's a just a free DNS provider. So it's sort of, you know, really helpful for the side projects, you know, if you're going to submit this side project you've been working on on On how can use can't You can't do it with a like a test domain name. Well, you can, but you know what I mean. So we're going to see if we can put it behind a real Domain name. Oops. This was meant to get that going. So I can log in here. And we'll see if we can get this registered while that's going a little bit about myself. I was a software engineers software engineer for about 15 years did a lot of.net development, particularly in high frequency trading. Also did some Java some JavaScript. After that, I founded a startup also spent time in products at Cloudflare Okay, that didn't actually register. And then most recently I lead the solution engineering team for the strategic projects section of Cloudflare And what that means is like I don't I don't write code sort of day to day. You know, like for long period, but I still really enjoy coding actually find it relaxing something that I enjoy doing. And so sometimes I'll use some of my, you know, free time to to go and write some code. One thing that's happened over the last few years besides sort of those role changes. Just trying to get freedom to go here is I've also become a family man. And while that's amazing. It also means I don't get as much time to work on side projects as maybe I once did. And so I really value platforms where I can just focus on the code. Like if I'm going to do something. I just want to Bash it out deploy it. I don't want to worry about infrastructure. I don't want to be provisioning virtual machines. Ideally, I don't want to be dealing with databases, even like I just want to get my thing out there. And that's like really a promise that Cloudflare Workers delivers on and it does a lot more than that. And you'll hear much about that and and lots of different sessions, you know, it's a Truly like high performance high volume, you know, serverless platform suitable for really large use cases, but I'm just going to focus on side projects, just because, you know, that's, that's just one, you know, one area where it really shines and where I use it. Okay, um, so I've just registered this domain converted 10.cf and I'm going to add this to my Cloudflare account. Again, I'm at the sort of whim of the DNS propagation overlords here as to whether this will Get through by the end of the demo. But I still want to do it just to show you the flow. And either way, we'll, we'll get a side project up online, even on a test domain, just so you can see that and it all works out. We'll, we'll do this part as well. Okay. So we're going to be using Vue.js No reason for Vue.js compared to say a static site or a You know, or angular react. I used a bit of angular my career really liked it found Vue.js to be sort of even simpler never used react. So can't really comment there, although I know it's, you know, it's also very, very popular. Cool. So we're almost done here with setting up our Vue.js app. The little project we're going to do today is a byte converter. It's just going to take bytes and tell you how many kilobytes megabytes gigabytes etc that converts to very simple. You know, someone who works at a company that deals a lot in bandwidth comes up a lot. And I'll tell you the story. There's a little bit of a background as to why chose this Sort of amusing. I was helping my boss price, a large deal. And, you know, checking his work on sort of a calculator and it had terabytes and had Gigabytes in it and there was a column with with terabytes and I remember I said to him, I just sort of clicked on the cell. And I was like, Okay, how do you how you working this out. Okay, 10 to 15. Is that right, just saying to myself, you know, not having exactly in my mind is one petabyte 10 to the 15 and he helpfully said, Yeah, Steve, because you've got bytes and you've got kilobytes. That's 1000 and then times by, you know, another thousand and that's megabytes and went all the way through to us. I was like, Thank you, boss. Um, yeah, working in the industry for 10 years I am aware of The relationship between these things. So I thought it'd be amusing to Come along and use this Cloudflare TV segment to create a little black converter so that you know both he and I can Where am I can always can refer to it. Okay, so this is actual Code. That's what I created. Those are the ones were Practice. Cool. So I'm going to use VS code today. Um, that's my sort of preferred Environment can use whatever you want. And so this is running locally. This was the site we just created. So let's just make sure we've got a Like a sort of a working environment here locally. That's how I tend to roll. Welcome to Cloudflare TV. See if that updates. Yep. And that's all locally. And I'm just going to get rid of The sort of Hello World stuff. Cool. So let's say this is like the first iteration of my brand new side project. That's, of course, going to take over the world and I want to I want to get out there. I want to get out to the web. I might not be ready to share it with Hacker News yet. You know, without having a real domain name, but at least sort of show some friends or ideally some customers. If it was going to be a commercial thing. So I want to get this onto a worker site. So to do that, I'm going to use Okay, cool. So cloud flare has seen the domain. That's a good start. So just going to Let Keep this going in the background. Again, still some DNS propagation to happen. So I'll keep referring back to that. So to create a worker site. It's literally check this one command. Wrangler in it. Dash dash site. Okay, so basically all that's done is created a wrangler.com file. Why don't I see that. I really don't see it in the right. Let's just check this Job in the right Yeah, I am. Wrangler.com Upper level. Okay, so this is Feeling something's off here. Okay, going Super simple config file. And to make this into a worker site. All we need is our account ID, which is up here in the cloud for dashboard can also get it on the overview page. And it's asking for, like, where is the site. Like, where do I deploy the site from and so You know that view website. I just created it comes sort of pre built with web pack and all that sort of stuff. Um, so we're going to build it for production now. And Okay. And it's going to, you know, have a bundle for us to to deploy. Okay, so while that's going. As I said, we're going to try this, get this behind a real domain. If we're able to get that done in time where you do that is you change the name servers at your DNS. So, you know, again, I'm using freedom. If you are on like name sheet or go daddy or, you know, whoever your Registrar is you can do it there. And what we're hoping is that these name servers will propagate around the Internet in time. So good tool. If you've never seen it for this is DNS check. I can try It allows you to sort of see if your domain name is propagating around the web. So you can see here it's still pointing to freedom. I hope is we'll get that updated and pointing at Cloudflare Before the end. And if that happens, we'll be able to put it behind a real domain. But for the meantime, okay, so we've built built a bundle. You know, so you can see sort of this looks like a typical web bundle. We've got it's at this district directory. So I'm just going to say here in workers site. I want you to deploy to Deploy from the dist folder. Okay, so wrangler dot publish Quick check. Any questions. No, it must mean everything is amazingly clear so far to the no doubt millions of viewers all with me today. Actually, I don't know. I don't have live analytics. So I don't know how many of you with me. Okay, so this is cool to see behind the scenes here workers is actually created a namespace in the KV storage. So KV is workers. It's an eventual eventually consistent KV store and it's really amazing because what it means is you can Write applications in on our serverless platform that is stateful, you can actually store state. And so workers sites is really like a little mini web server written as a worker that uses KV as the storage of the files. And in that way, we're able to, you know, have an easy way to deploy sites to the web. So it's just a good example of, you know, using workers itself to, you know, to deploy So this is it. Um, you know, this is at our test domain. What I got set up locally where 15 minutes in and we've already got something deployed. One really nice thing about workers. Also, is, you know, you start off from a good sort of putting your foot forward security security. Well, yes, security, but performance wise. I'm just going to show you this an example like without having done anything other than create a skeleton app. You know, with VJS build it, push it. These are the sort of performance numbers we're getting I think under the hood here. It's just that it's fast. Right. And, you know, as we add more as the psych. It's more complex as we have more packages, you know, like we'll have to do more work to keep up that performance, but I just Really like that. This is where we start from, you know, from a fast application. And it's also that it's also worth remembering. That where I just deployed to deployed all over the world to these 200 cities. So I'm sitting in California. I'm looking at that site being served from San Jose or San Francisco, but anywhere around the world, you know, you'll be seeing that site served from a pop close to you. And that's like, you know, that's an amazing reliability and performance story, you know, for side projects like you don't I'm not thinking about availability zones. I'm not worried if A whole lot of people come and see this site, you know, you start off from a position of strength, really. So I really like that about about Cloudflare workers. So I'm going to Hope that again the DNS propagation. Overlords are with us. Yeah, they're starting to come around. So we might get time at the end to connect that. It's good. But we need to build something. All right, let's build on quickly. So what did I say I said we were going to do a converter app. Now I think I described this as live coding. I hope I am not violating a live code. Sort of code of conduct here when I come and copy and paste some code. I think to try get this whole thing done in What do we have half an hour. We need a little bit of help from a little bit of copy pasta, as they say. So, I'm going to take I'm going to take an input. And when I click convert or if there's any change. We're going to run a method convert and this is going to be bound to a data model. That has a variable called whites. Okay, so Shout out to the VGS team. I find it really, really simple to get started with you. I'm not going to like ideally I'd be doing this as components, you know, that's sort of the VGS way but, you know, interest of expediency just adding it to the main page. Okay, so This is my data model. This is what this is bound to when we do convert. We're going to pass that to an integer. And then we're going to raise the by Going to raise 10 to the power of 36912 so back to that initial thing I was talking to you about how many You know the power to raise to get to certain things. Always good to have the reminder here for these discussions with my boss and I Shout out, boss. Okay, and I want to display these display the results somewhere. So I'm going to add a table. To display these results. Gonna pull one I created earlier. Okay, convert So sanity check thousand bytes is a kilobyte. Million is a megabyte. Okay, that looks good. So here we are. Nice little easy by converter. I know it's using thousands. I should probably have an option to use 1024 Anyway, Boston, I will be able to quickly go to the site, except still on my machine. We want to do more than that. We want to actually get it out there. Okay, I'm looking at open editors. I really want to see everything. I'm totally being a noob. Yeah. Why am I limited to only the open things Doesn't work it out. So because I'm going to be sort of iterating and that's one of the things I love about, you know, workers like you can quickly iterate. We're going to actually create a deployment command here and Just going to do two things. It's going to run the build And publish to workers. Deploy. Now there is there is sort of a step that I did earlier. He didn't say about actually creating an API token in order to do this. I thought I'd created it in time to so it expire before this and we'd go through that that process. Actually, it's still valid such as working So if you get prompted to create an API token. Just be aware that's expected. I think you will probably see that in a future demo either from myself or someone else. But we'll skip it for now. Also, in the interest of time quick check. We've got nine minutes to go. Okay, so this rebuilt local app here redeployed So we go to our thing here and to refresh. There you go. Live by converter. And send to my boss right now say Yes, this is what we can use when we're checking our work. So, you know, that's the that's the core. I wanted to show that like where are we at 2021 minutes, you know, with a bit of chat as well. Like I was able to create an app from scratch using the JS quickly convert it to a worker's site using Wrangler Publish that to the Internet. Look at it here live, you should be able to, you know, be typing this into your browser at home, see it to the load super fast and you know I can iterate as well. One thing I'll mention, like, you know, as you as you go further and you know you really start to like build up on a project, you know, you want to do things like set up CI You know, commit to get have that automatically be built and workers works really well for that as well Wrangler and workers, they support secrets environment variables, all that stuff. And when I've done bigger side projects. That's definitely something that I've done. Cool. All right, let me check in with our DNS propagators. See if my name servers are making their way around the world. Looks like they are. So let's see if we can get this connected Let's recheck So what Cloudflare is doing here is checking that yes, your, you know, your domain name is the name serves our point at Cloudflare, which means we can resolve to our IPs and therefore we can handle the traffic and, you know, provide all of our services. Okay, so it looks like it's up and running. There are a couple of ways to to basically like get this worker to execute on my website. One way is within The Tomo file. So we can literally sort of just fill out these two details. And that in a way would be better. That's sort of, you know, more infrastructure as code. But when I practiced this I did it in the dashboard. So I'm going to do that. And also, I think it's also good just to see right there are two ways to do it. You can do it using config or you can also do it. In the dash. So the route is Basically a like a wildcard of when we want this worker to execute. I'm going to say any request. I want the converter Worker to run in future iterations will also add like an API and I'm going to show you how to structure. So you can have a UI and API. Okay, now I'm gonna going to intentionally fail here for a moment because I've done this many times. Of you think everything's done you go to your site and it doesn't resolve or you don't get get a result. Um, there's a trick. If I think if we created this this whole zone, a different way, rather than sort of manually. The way I have this Actually gets done automatically. But it's just good to know if I don't following along. You need to have at least one DNS record set up to proxy traffic and, you know, typically if you have a website, you probably will have some DNS record already set up that cloud flow will pick up, you know, automatically. You know, the way I set this up. It didn't. So just to shout out. Yeah, you do need to have at least one DNS records at orange clouded But with that, here we go. I've got my cool URL created for free. What are we at 25 minutes, um, you know, This is going through Cloudflare. So we're also getting the benefits of Cloudflare's cache, Cloudflare security DDoS protection where we're hitting our worker, you know, serving this VJS site and, you know, we're doing nothing. I just, I love the productivity of Cloudflare Workers like I think you're going to see a lot of sessions about it. You know, in terms of like enterprise use cases and like, you know, all the other benefits, but just in terms of productivity. You can't beat it. And this is all over the world. No VMs. The infrastructure, you know, that's that's how I like to go. Cool. We've got a few minutes left, which is which is nice. So check on the questions. No questions so far. What I'm going to show you then. Well, actually, first I'll mention. So if I do a follow up segment, I would like to base it on some feedback. So Please do feel free to reach out To me on Twitter. Or to live studio. I'm thinking something like a foreign exchange converter, something like that, that are, you know, where we can have sort of Like a, you know, an API calls other APIs or stores data caches, etc. But what I am going to show you just the last few minutes is just how far you can go like with workers before even needing to say, think about, you know, a relational data store or traditional cloud infrastructure. Now, this isn't to say that cloud flow workers, you know, will work for every app and every use case like it certainly doesn't. There are like, you know, plenty of plenty of times you're going to need to go to a legacy cloud to, you know, get some of those traditional store and compute. But you can get a long way. And so this is a side project that I worked on sort of over the Christmas break. Which will send you a page of a book every day or five minutes of a book every day. And it was just an idea I had that like, hey, like, what if it was You know what it was really easy to just get a page a day delivered to my inbox because I get all these emails like I'm always in my inbox. Um, you know, wouldn't that be an interesting way to read Classic books. So I was like, I want to answer that question and be a cool thing to try out with workers and, you know, see if other folks Find it useful as as I do. And so I built this site and I was going to show you a few things. So this like the The style and all that. This is a template to Vue.js template I downloaded from a site called creative Tim and there's a there's a an API behind this too. So I could search for something like maybe dick. You can see here I'm live querying an API. This is all driven from workers like yep that's that's my guy dick. Just pop up, you know, Vue.js Is my email address. And if I click Start, you know, I'm posting to another Worker that's running on Cloudflare You know, all of it driven by Cloudflare Workers and I want to say here is that you can really go a long way with this platform and I'm happy to go through this in more detail later. Right. That's it for me. My name is Steve. Welcome to Cloudflare TV. Hope you're enjoying it as much as we are and I hope to see you again. You.