💻 Introducing Cloudflare Workers Templates

Hello, everyone. good evening, João, good afternoon. Good morning. Wherever you're tuning in from. My name is Gift Egwuenu. I am a developer advocate here at Cloudflare, working on the developer platform. Today I'm excited to bring to you Cloudflare Workers templates as we are introducing new and exciting news this developer week. I hope you've been keeping up to date with everything we've announced today from our two super slow party templates. In this segment I'm going to be talking you through what Cloudflare Workers templates are and how you can get started with this today. This is a blog post we released explaining what Cloudflare Workers templates are. Cloudflare Workers, as you all know, is our platform for building serverless application on Cloudflare's Edge network. We are excited to announce that we have a collection of Cloudflare Workers templates that would enable you get started with Workers easily. Now the great thing here is we are moving. We have moved away from the typical teleworker templates to having use cases templates that you could actually start using the. We have a website listing all of the templates which is available at Workers dot new slash templates. Here you find a listing of different Workers application that you can actually start using today. I'm going to show you how to get started with it and also highlight some of the templates that I'm currently loving and show you how they work. But first I will also show you the GitHub repo in case you're interested in seeing the code behind this website as well as seeing the code behind each of these templates. To find that we have a Cloudflare github dot com slash Cloudflare templates repo where we have listed all of the collection of starter templates and examples. And the interesting thing here is these are using several products on the Cloudflare developer platform from Cloudflare Workers pages to stream R2 and even V1. Some of these examples are ready for you to get started with. So if you're thinking of getting started with Cloudflare Workers for example, or spinning up a website with Workers and D1, there are different templates available for you to get started with. Part of the integration for the Workers templates is that we've also added integration with a platform called Stack Blitz. Now Stack Blitz is an online IDE that allows you to spin up your application or projects that you're working on and you can have everything running on the browser. You can have your application deployed directly from the browser. Now with the Cloudflare Workers Templates websites collection. If you're interested in using any of these templates and spinning it up with tag blitz, all you have to do is find the templates you're interested in using and click on the open. We start spots and I have a couple of examples I would like to show you. One of them is the Workers modules. Example Workers wordle for example. I know a couple of people are big fans of Wordle. We have an example showing how you can actually build the word game using Workers Durable Objects. I would like to play this for you actually need to play us to have this game running. I can show you like a quick demo of how it works. So typical word game involves you like trying to get the correct word of the day so you can. For example, guess specific words if they match and answer that I'm not I'm not a good Wordle player, but I could do a few things. I could input a few words and make you work. I don't think this works. Oh, okay. But to get the phone part of this game, you need multiple players to play it. But the essential thing that I'm highlighting here with templates is if you are thinking of building what you can, for example, you can use this template as a building block for your game. Another example I like to share is also the Cloudflare streaming integration with video JS. Now Cloudflare Stream is our video platform that allows you to upload. Now, allows you to stream live video using either our Cloudflare Stream Dashboard or Cloudflare Stream API. And this is another example of a template that uses Cloudflare Stream. Already we have uploaded the video to stream dashboard and where display needs on the page. Here you see that this is a live video that has been uploaded to stream dashboard. One more example I'd like to show you of a template is the pages functions cause templates. And I find that this is a template that would enable you, if you're working with pages functions and you need to integrate cores into your application instead of having to start off like writing the entire code from scratch. You can use this template as a boilerplate for your application. Now everything is already set up for you. Like I said, all you need to do if you need, if you want to use the pages functions, templates is either use the open stack blitz. Either use the open established option or I would also share another. We can get started with any of the templates listed in this collection. The second way to get started is with the deploy with Workers button. Now this is integrated with GitHub actions and it allows you to spin up a copy of the templates on our GitHub repo. For the sake of this demo I won't go through because I'll require to add like a specific token and authenticate with my GitHub accounts, which include, which involves me adding some keys on this stream. So I won't go further with that. But just to give you like a rundown of what this involves. After clicking the bot scene, you are asked to authorize your account with GitHub and also authorize which your Cloudflare accounts. And then after that GitHub action rules. That creates a copy of the template and also deploys it to your Cloudflare accounts. And then you have a copy you can work with and or, and it's already deployed to Cloudflare Workers. So yeah, that does attempt. Those are the templates you currently have. We have an image websites, image sharing websites using pages functions as well. All of this is listed on the GitHub repo. I liked that earlier. Apart from the stability integration and also the deploy to Workers integration, we are also happy to share that we added a. That's driving development into some of these templates. So they also have integrated testing for, for example, we have the Workers router templates that already has test written in for that specific template. So if you're looking at how to actually write tests for your workers and you're not sure how to get started with that, we already have templates that have testing integrated, so you can either work from this or use this as an example for how you write tests in your application. Currently, to write integration test. In your worker's application, you will be using the unstable dev API from Wrangler. And in this example, I'm testing the different routes that is added to the worker route templates, including the. Example route and there is also a post route for sending data gets specific users co-location or ID. So where do you go from here? Having said that, these templates are available for you to use. we have. Several different examples for you to try out today. If you're interested in working with either Pages Stream, D1 or Cloudflare Workers. Of course, you can get started by either using the open VIS tablet option, deploy Workers option, or if you're interested in adding your own templates to our collection, we are also open to having you send a pair if you scroll all the way to the end of this page. We have a link for you to send us a pair and share the templates that you're using currently for your Workers projects as well as. All these templates. The idea is to get you started with Cloudflare Workers as quickly as possible. We have examples also listed in the Cloudflare templates repos that are not actual templates but are examples of different ways you can actually build on the Workers platform. Some of them are full on tutorials on the Cloudflare documentation websites where if you're looking at examples of how to use, for example Cloudflare Images and Workers, we have a detailed blog post that shows you how to generate and YouTube thumbnail using Cloudflare Workers and images. And this is the example of that. Also included in the template pool. So if you want to get started with Workers today might best recommendation is first the documentation. Secondly, the templates repo so that you can see examples of different applications that are being built on Workers today. So that's pretty much what I wanted to share. If you have any questions. Be sure to find either me or any of the developer advocates on our Discord Channel. At the end of the blog post, we've also included a link to sign up for Discord. So you can also do that and ask you questions. And finally, I would definitely love to see what you all are building with templates today. If you've built any applications using some of the examples that are listed on the collection, be sure to share it in the Build Switch channel on our Discord. Excited to see what you do with these templates and also the examples or contributions you add to the collection. Thank you so much. Hi. We're Cloudflare. We're building one of the world's largest global cloud networks to help make the Internet faster, more secure, and more reliable. Meet our customer Bookmyshow. They've become India's largest ticketing platform, thanks to its commitment to the customer experience and technological innovation. We are primarily a ticketing company. The numbers are really big. We have more than 60 million customers who are registered with us. We are around 5 billion screen views every month, 200 million tickets. Over the year, we think about what is the best for the customer. We do not handle customers experience well, then they are not going to come back again. And Bookmyshow is all about providing that experience. As Bookmyshow grew, so did the security threats it faced. That's when it turned to Cloudflare. From a security point of view, Wwe use more or less all the products and features that Cloudflare has. Cloudflare really plays the first level of defense for us. One of the most interesting aha moments was when we actually got the dose and we were seeing traffic posts to up to 50 gigabits per second, 50 GB per second. Usually we would go into panic mode and get downtime, but then all you got was an alert and then we just checked it out and then we didn't have do anything. We just sat there and looked at the traffic peak and then be in control. It just took less than a minute for Cloudflare to kind of start blocking that traffic. Without Cloudflare, we wouldn't have been able to easily manage this because even our data center level, that's the kind of pipe, you know, is not easily available. We started for Cloudflare Security, and I think that was the moment we actually get more sleep now, because a lot of a lot of the operational overhead is reduced. With the attack safely mitigated. Bookmyshow found more ways to harness Cloudflare for better security performance and operational efficiency. Once we came on board on the platform, we started seeing the advantage of the other functionalities and features. It was really, really easy to implement a strategy too, when we decided to move towards that Cloudflare Workers, which is the computing at the edge, we can move that business logic that we have written custom for our applications at the Cloudflare Edge level. One of the most interesting things we liked about Cloudflare was everything can be done by the API, which makes almost zero manual work. That helped my team a lot because they don't really have to worry about what they're running because they can see they can run the test and then they know they're not going to break anything. Our teams have been able to manage Cloudflare on their own for more or less anything and everything. Cloudflare also empowers Bookmyshow to manage its traffic across a complex, highly performant global infrastructure. We are running on not only hybrid, we are running on hybrid and multi cloud strategy. Cloudflare is the entry point for our customers. Whether it is a cloud in the back end or it is our own data center in the back end, Cloudflare is always the first point of contact. We do load balancing as well as we have multiple data centers running. Data center selection happens on Cloudflare. It also gives us fine grained control on how much traffic we can push to each data center depending upon what is happening in that data center and what is the capacity of the data center. We believe that our applications and our data centers should be closest to the customers. Cloudflare just provides us the right tools to do that. With Cloudflare, Bookmyshow has been able to improve its security performance, reliability and operational efficiency with customers like Bookmyshow and over 20 million other domains that trust Cloudflare with their security and performance we're making the Internet fast, secure and reliable for everyone. Cloudflare. Helping Build a Better Internet. Hi. We're Cloudflare. We're building one of the world's largest global cloud networks to help make the Internet faster, more secure and more reliable. Meet our customer, HubSpot. They're building software products that transform the way businesses market and sell online. My name is Kerry Muntz, and I'm the director of engineering for the Platform Infrastructure Teams here at HubSpot. Our customers are sales and marketing professionals. They just need to know that we've got this. We knew that the way that the HubSpot was growing and scaling, we needed to be able to do this without having to hire an army of people to manage this. That's why HubSpot turned to Cloudflare. Our job was to make sure that HubSpot and all of HubSpot customers could get the latest encryption quickly and easily. We were trying to optimize SSL issuance and onboarding for tens of thousands of customer domains previously because of the difficulties we were having with our old process, we had about 5% of customers SSL enabled and with the release of version 68 of Chrome, it became quickly apparent that we needed to get more customers onto HTTPS very quickly to avoid insecure browsing warnings with Cloudflare. We just did it and it was easier than we expected. Performance is also crucial to HubSpot, which leverages the deep customization and technical capabilities enabled by Cloudflare. What Cloudflare gives us is a lot of knobs and dials to configure exactly how we want to cache content at the edge and that results in a better experience, faster experience for customers. Cloudflare actually understands the Internet. We are able to turn on TLS one three with zero round trip time with a click of a button. That's a there's a lot of technology behind that. Another pillar of HubSpot experience with Cloudflare has been customer support. The support with Cloudflare is great. It feels like we're working with another HubSpot team. They really seem to care. They take things seriously. I filed cases and gotten responses back in under a minute. The quality of the responses is just night and day difference. Cloudflare has been fantastic. It was really an exciting, amazing time to see when you have teams working very closely together, HubSpot on one side and Cloudflare on the other side on this mission to solve for your customers problems, which is their businesses. It really was magic. With customers like HubSpot and over 10 million other domains that trust Cloudflare with their security and performance, we're making the Internet fast, secure and reliable for everyone. Cloudflare. Helping Build a Better Internet. The release of worker sites makes it super easy to deploy static applications to Cloudflare Workers. In this example, I'll use Create React App to quickly deploy a React application to Cloudflare Workers. To start, I'll run NPCs create React app passing in the name of my project. Here, I'll call it my React app. Once create React app has finished setting up my project, we can go in the folder and run wrangler init dash dash site. This will set up some sane defaults that we can use to get started deploying our React app. Wrangler dot toml, which we'll get to in a second, represents the configuration for my project and Workers site Is the default code needed to run it on the Workers platform. If you're interested, you can look in the Workers site folder to understand how it works, but for now we'll just use the default configuration. For now I'll open up wrangler dot toml and paste in a couple configuration keys. I'll need my Cloudflare account ID to indicate to Wrangler where I actually want to deploy my application. So in the Cloudflare UI, I'll go to my account, go to Workers and on the sidebar I'll scroll down and find my account ID here and copy it to my clipboard. Back in my wrangler dot toml, I'll paste in my account ID and bucket is the location that my project will be built out to with Create React app. This is the build folder. Once I've set those up I'll save the file and run. Npm, build, create React app will build my project in just a couple of seconds and once it's done, I'm ready to deploy my project to Cloudflare Workers. Arun run Wrangler publish which will take my project, build it and upload all of the static assets to Workers KV as well as the necessary script to serve those assets from KV to my users. Opening up my new project in the browser, you can see that my React app is available at my Workers dev domain and with a couple of minutes and just a brief amount of config, we've deployed an application that's automatically cached on Cloudflare servers so it stays super fast. If you're interested in learning more about worker sites, make sure to check out our docs where we've added a new tutorial to go along with this video as well as an entire new Workers site section to help you learn how to deploy other applications to Cloudflare Workers. Q2 customers love our ability to innovate quickly and deliver what was traditionally very static old school banking applications into more modern technologies and integrations in the marketplace. Our customers are banks, credit unions and fintech clients. We really focus on providing end to end solutions for the account holders throughout the course of their financial lives. Our availability is super important to our customers here at Q2. Even one minute of downtime can have an economic impact. So we specifically chose Cloudflare for their Magic Transit Solution because it offered a way for us to displace legacy vendors and the layer three and layer fource space, but also extend layer seven services to some of our cloud native products and more traditional infrastructure. I think one of the things that separates Metro Transit from some of the legacy solutions that we had leveraged in the past is the ability to manage policy from a single place. What I love about Cloudflare for Q2 is it allows us to get ten times the coverage as we previously could with legacy technologies. I think one of the many benefits of Cloudflare is just how quickly the solution allows us to scale and deliver solutions across multiple platforms. My favorite thing about Cloudflare is that they keep development solutions in progress. They keep providing solutions. They keep investing in technology. They keep making the Internet safe. Security has always been looked at as a friction point, but I feel like with Cloudflare it doesn't need to be. You can deliver innovation quickly, but also have those innovative solutions be secure. The real privilege of working at Mozilla is that we're a mission driven organization. And what that means is that before we do things, we ask what's good for the users as opposed to what's going to make the most money. Mozilla's values are similar to cloud players. They care about enabling the web for everybody in a way that is secure, in a way that is private and in a way that is trustworthy. We've been collaborating on improving the protocols that help secure connections between browsers and websites. Mozilla and Cloudflare collaborate on a wide range of technologies. The first place we really collaborated with the new TLS 1.3 protocol and then we followed it up with quick and DNS server HTTPS and most recently the new Firefox private network. Dns is core to the way that everything on the internet works. It's a very old protocol and it's also in plain text, meaning that it's not encrypted. And this is something that a lot of people don't realize. You can be using SSL and connecting securely to websites, but your DNS traffic may still be unencrypted. When Mozilla was looking for a partner for providing encrypted DNS, Cloudflare was a natural fit. The idea was that Cloudflare would run the server piece of it and Mozilla won the client piece of it. And the consequence would be that we'd protect DNS traffic for anybody who used Firefox. Cloudflare was a great partner with this because they were really willing early on to implement the protocol, stand up a trusted recursive resolver and create this experience for users. They were strong supporters of it. One of the great things about working with Cloudflare is their engineers are crazy fast, so the time between we decide to do something and we write down the barest protocol sketch and they have it running in their infrastructure is a matter of days to weeks, not a matter of months to years. There's a difference between standing up a service that one person can use or ten people can use, and a service that everybody on the Internet can use. When we talk about bringing new protocols to the Web, we're talking about bringing it not to millions, not to tens of millions. We're talking about hundreds of millions to billions of people. Cloudflare has been an amazing partner in the privacy front. They've been willing to be extremely transparent about the data that they are collecting and why they're using it. And they've also been willing to throw those logs away. Really, users are getting two classes of benefits out of our partnership with Cloudflare. The first is direct benefits. That is, we're offering services to the user that make them more secure and we're offering them via Cloudflare. So that's like an immediate benefit that users are getting. The indirect benefit that users are getting is that we're developing the next generation of security and privacy technology and Cloudflare is helping us do it, and that will ultimately benefit every user, both Firefox users and every user. The Internet. We're really excited to work with an organization like Mozilla that is aligned with the user's interests and in taking the Internet and moving it in a direction that is more private, more secure, and is aligned with what we think the Internet should be. Zendesk is one of the world's premier customer service companies, providing its software suite to over 125,000 businesses around the globe. My name is Jason Smale. I'm the vice president of Engineering at Zendesk. My name is Andrei Balcanasu. I'm a technical lead in the Foundation Edge team at Zendesk. Zendesk is a customer support platform that builds beautifully simple software for companies to have a better relationship with, with their own customers. We have over 125,000 businesses around the world all using Zendesk, and then within those businesses there's hundreds of people whose day job is to sit in front of Zendesk and use Zendesk. For Zendesk, Security is paramount, and when it came to safeguarding its network, Zendesk turned to Cloudflare, Which security is very important to our business. Our customers trust us with their information and their customers information. So we need to make sure that their information is safe, secure. The initial need for Cloudflare came back a couple of years ago when we suddenly started to see a lot of attacks coming towards us and all of a sudden we'd get thousands of requests, hundreds of thousands, you know, like millions of requests coming at us from all over the place. So we needed a way to be able to control what came into our infrastructure. And Cloudflare were the only ones that could meet our requirements. It's been really impressive to see how Cloudflare's data mitigation continues to evolve and morph, and it's definitely the best deed of mitigation we've ever had. I think Cloudflare just gets you that and so much more and you don't have to pick and choose or and layer on all these different providers because it's just one and they're great at all of those things. It's easy. It's a no brainer. By tapping into Cloudflare's unique integrated security protection and performance acceleration, Zendesk has been able to leverage Cloudflare's global platform to enhance its experience for all of its customers. Cloudflare is providing an incredible service to the world right now because there's no other competitors who are close. Cloudflare is our ultra edge. It makes our application faster, more reliable and it allows us to respond with confidence to traffic spikes and make our customers happier. Zendesk is all about building the best customer experiences, and Cloudflare helps us do that. With customers like Zendesk and over 10 million other domains that trust Cloudflare with their security and performance, we're making the Internet fast, secure and reliable for everyone. Cloudflare. Helping Build a Better Internet.