Introduction to Cloudflare Workers and Cloudflare Pages

hey welcome back i'm sure you've heard the term serverless and jam stack in the past if not today you'll get a primer on these technologies and if you already are an expert i want to introduce you to one of my favorite platforms for building serverless and jam stack applications cloudflare my name is otto and let's get to it alright let's talk about cloudflare as a developer you might have used their services in the past to provide a cdn ddos protection or other features to your web application but did you know they also have a serverless offering they call it cloudflare workers and if we look at the homepage for cloudflare workers we see that kind of their marketing speak is you write the code and we handle the rest which is pretty typical of serverless providers you know whether you're looking at aws lambda or google cloud functions they all promise that you can just write the code and they'll handle all the servers the deployment and all that good stuff cloudflare workers is similar in this regard but i think their developer experience and the experience of deploying serverless functions is much much better before we get into creating a serverless worker let's kind of see what cloudflare workers promises so if we look at their marketing page you know we have automatic scaling we have a high performance global network and if you've used cloudflare as a cdn in the past you'll know that this is really true they also allow you to write the serverless functions in javascript rust c and c plus plus which a lot of the other providers do not but i think one of the coolest features of cloudflare workers is their support for zero millisecond cold starts and if you're a serverless developer i'm sure you've run into this in the past where certain functions take quite a bit of time to load the first time with cloudflare you don't have to worry about that and another reason that i really like cloudflare workers is they're exceptionally affordable with very transparent pricing like if we go to their pricing page you have a very generous free tier but you also have this bundled tier that starts at five dollars a month and then it's just 50 cents per million requests with no additional fees if you've ever tried to figure out aws lambda pricing on top of all of the other things that needed to make it work this bundled approach really is a breath of fresh air but how do these functions work let's uh let's go ahead and create one and take a look all right so i'll navigate to the cloudflare workers dashboard in my cloudflare ui and here i see on the homepage all of the different cloudflare workers that i currently have at the moment i only have one which is my fiancee's website and we'll get to that in just a little bit but to create a new cloudflare workers function all i need to do is hit the create a worker button and i'm taken to the ui to create my function in the web browser experience and all i need to do is write my code and here by default what we have is a handle request which simply just returns a hello world message so if we were to call this serverless function all we need to do is hit send and we get our response we get a 200 okay and the message hello world but let's say we wanted to add some real functionality to our cloudflare worker and in this case let's go ahead and call to an external api to get some data and return it in our worker so in our case here we can use the fetch api to go ahead and make an external call so i'll say const data equals fetch and let's go ahead and fetch from the cat facts api and get some facts about cats uh since this is since this returns a promise we will await and then once we get that data we'll turn it into json so we'll say cons facts equals data.json and then finally in our response since we need to send a string response back all we'll do is jason dodge stringify our response which is going to be the facts and we are good to go so we'll hit send and it looks like we didn't get any facts let's do that again um and the reason we didn't get that either is because this also returns a promise so we need to await and there we go so we just wrote a serverless function or a cloudflare worker that goes and gets a bunch of cat facts and sends it to us at this particular url now at this point the worker isn't deployed but we can do that very easily by just hitting save and deploy so i will do that let's hit save and deploy and our cloudflare worker will be live to the world for anybody to consume right away so we have our url i will copy it or actually just go to it and we have a number of cat facts so i think by default we get five of them back every time we refresh we might no we don't get different ones back but that's okay and then if we go back into the cloudflare workers dashboard back here we'll see our new worker created i think that just takes a second for everything to catch up yep last deployed a minute ago now while you can do all of your development in the cloudflare ui it's kind of limiting right we as developers we love having control over our environments and you know writing in our favorite code editor and you can absolutely do that with the wrangler cli so if we look on the cloudflare workers homepage we'll see that you know it tells us how to install cloudflare wrangler and and how to deploy functions there now i want to show you that as well we're not going to go through the process of creating an entire application or function using the wrangler cli but i do have this other worker megangrand.net that is deployed using the wrangler cli and what this is it's actually a whole jam stack website it's built with hugo that i deployed to a cloudflare worker so let's take a look at what that code looks like i'll open up my visual studio code and most of these directories and files they are from the hugo framework so we don't have to look at those and you know might create some videos on how to work with hugo later but what i want to focus on is this wrangler.tamil file which tells us how to deploy this serverless function on cloudflare workers all we do is specify the route the zone and what the entry point for our application is and then we also create this workers site directory which manages additional settings for the for the wrangler cli tool and what i have in here in this index is just a bunch of redirects so megan's website used to be hosted on wordpress and when we moved it over to hugo and to cloudflare workers we had a bunch of redirects and just cleaned up some urls so you know we have those written in here and then the rest of this stuff is uh automatically generated by the wrangler cli so you know i've never looked into it but there's more settings that we can change and essentially what happens here is every time uh you know we create new content she publishes a new blog post all we do is push our code to a github repo which calls the wrangler cli and publishes a new version of her site so if we go into github here on meganggrant.net we can see that we have a github workflow created and if we look at the file we see that you know we are building the application using hugo and then deploying using a wrangler action so that same you know wrangler publish command that we could do locally we have it set up as a github action and if we go to her site we could see that it loads very very quickly and you know this is partly due to everything being static and another part due to it being hosted on cloudflare's global you know edge cdn so wherever you're accessing the website anywhere in the world it's going to load super super quickly now this used to be the preferred way of deploying serverless functions using the cloudflare platform but recently the folks over at cloudflare actually formalized the process with a new product called cloudflare pages now this is similar to netlify for example or the versail platform where you build your jamstack website on your preferred platform so it could be nexjs it could be hugo jekyll whatever platform you're using doesn't matter all that matters is you point your github repo to the platform and it's going to pull in the code build the application and deploy it globally so cloudflare pages is in a public beta right now i just got access to it a few weeks ago and i've been playing with it and it works really really well in the past my personal website auto xyz used to be hosted on cloudflare workers but as of about a week ago i moved everything over to cloudflare pages and i couldn't be happier to show you what that looks like let's go into the pages ui and here you know to deploy a new jam stack website and again your platform really doesn't matter all that matters is that your app is a jam stack app that gets built into a static application and you're good to go so it could even be a uh you know it doesn't even have to use a frame framework if you just have a static html website that you want to deploy you can do so as well and all you would do is hit the create a project button point to your github repo that you want to deploy in this case i'm using my blog and cloudflare does the rest if we click in here to see what's going on we see that our master branch is set to production so anytime we merge our code into the master branch there's a change in the master branch it's going to get rebuilt and it's going to deploy our application but if we have any additional branches created what cloudflare is going to do is it's going to build and deploy kind of preview bridges for us and i'll show you what that looks like so let's go back into visual studio code here and here i am in the master branch i'm going to change it out and let's create a new branch called cloudflare test and we'll just create a new blog post so let's go down here i'll copy this one paste it and let's just create a new new blog post we'll say test blog published today and you know we'll update that the publication date is 3 7 and the title will change to this is a test blog we'll set the slug to test blog as well hit save and let's push this to our newly created branch so we'll say writing test blog and this is really great for collaboration you know where you might want to create some content and you want it to be previewed by your boss or a team member before pushing it to production and you know with these preview builds you can absolutely have that and kind of have the best of both worlds where your application where your static website loads super fast is globally distributed but you still have that flexibility of having multiple previews um and you know have other people review the content before it gets published so i just pushed this branch let's go into uh the cloudflare pages ui and you can automatically see that we have this preview environment saying that you know our cloudflare test received a new uh push with the message of writing the test blog and it is in progress so we are building this application now as a preview so it's going to take about you know a minute or so for this to build and we'll be able to see it and while it does this i can also show you that you know you absolutely can't have custom domains and the settings right now since it's in kind of this beta form it's limited so it's not as full-fledged as netlify or versailles offerings but i still think it's really really good i mean you have full control over your uh builds so you know what are we building from the master branch are we going to build all the previews yes we are what the build command looks like so in my example i'm also building my personal site with hugo so my build command is hugo uh and then i pass the minify the output directory is going to be public so you can edit all of this stuff and it just works really well any environment variables you have you can add them as well so when your application is built you can pass the correct information in so let's go back and see if the application is built looks like it's still building so awesome so it looks like our application has successfully built we got the check mark our deployment was successful and we can view our build we have a custom url based on what the kind of hash of the pull request was so if we go to this url we'll see our application as deployed we're seeing this is a test blog and if we click into it we'll see that content and the reason we're seeing a404 is it's redirecting to my auto xyz live home page which does not have this blog so uh this is something that that i could fix with the environment variables uh i i guess this is a pretty poor job on on my part um but that's um cloudflare pages for you and like i said this is still a product that's in beta that's you know they just went a public beta so you could try it with your jam stack applications as well and i think that's pretty much all i had for this video i just wanted to introduce you to cloudflare workers and cloudflare pages because these products work really really well allow you to build really cool serverless functions that are much much easier in my opinion than setting up an entire workflow with aws lambda or google cloud functions so you know if nothing else i hope this video introduced you to these two new technologies and i hope you have a blast playing with them i'll be creating a lot more content about serverless and jamstack technologies in the future so stick around if you like the content please like and subscribe and i will see you next time foreign

Channel: Ado Kukic

Views: 7,407

Keywords: Cloudflare, cloudflare workers, cloudflare pages, cloudflare serverless, serverless, JAMStack, JAM, Hugo, Static Generated Websites, Serverless Functions, SSG, Cloudflare Static

Id: 8W3X2hNULq0

Length: 14min 45sec (885 seconds)

Published: Sun Mar 07 2021