Cloudflare Workers with Bun, Hono and D1, everything you need to know

hello welcome to the channel so recently after playing with Bon and JavaScript for a while I was finally at the point when I was ready to deploy the app and I was trying to figure out what will be the most efficient way of doing that so first of all I tried my standard approach how I do with closure code Java code Etc and it's like build a Docker image and go to um digital lotion for my hobby project spin up VM spin up Docker compose inside and then run your doer images so I tried that I tried the smallest VM it isn't what it it wasn't good because uh there's quite low resources for the docker to run itself and it wasn't too stable so I was trying to find something else and I ended up trying the cloud flare workers for the first time and I was I was quite impressed uh how easy it is to um start with Cloud flare workers and how good is the developer experience and in this video I'd like to share with you guys uh how to start with that and probably we'll end up with some small application that will be running on cloudflare workers and it we will use a cloudflare D1 database uh which is basically like a sqlite database so that's it for the intro let's create our application and we'll start from there so here we are in the terminal and and the only thing we need is Bon installed so I have bon uh minus V uh this is version I have and to uh run uh to create the project we'll use uh hono framework template uh and to do that we want to run Bon create hono and the name of our project so after that it will ask us what we want to use uh what runtime we want to use and um we going to pick uh Cloud 12 workers today uh we want to install dependencies and then I prefer Bon as the package manager so it will create a project for us and now we can go inside and open it in the editor so this is what we have from our hono uh template for cloud workers uh we have our index.ts file with uh a simple root um and it will say hello hono uh also we can uh check the package Json and for development command we will actually use this Wrangler uh which is a CLI tool to work with uh Cloud flare and uh rangler toml uh will contain configuration that we will need to deploy our application so for example we can uncommon this block and we'll have uh access to my variable in um in our code and we'll see that in a sec so if we open uh terminal we can now run uh Bon run Dev to execute um execute this command and as you can see our application is started on this port so if we go here in the browser and we refresh this we'll have our hello hor so for demonstration uh I'd like to build a couple more Roots uh so we'll have let's say get uh customers to list customers so we have a function here uh C is context and we want to return uh Json and let's say we have a list of objects something like ID one name something and now uh if we do if we refresh this page we can go to slash customers and we see our Json returned um yeah let's do row data like this so in the second route we'll have is uh customiz by ID let's say ID and then we want to get uh custom ID it will be uh context. request do prems and we'll get an ID from here and let's say we want our ID for now to be here and we can refresh this once again go here to one we go to two we have id2 so this is our uh skeleton of the app and um we can actually try deploy that straight away uh to uh Cloud flare uh if we go back to package Json we see that there is a predefined deploy command which is Rong deploy and then we specify um the script for our worker so if we stop this and we just run Bon um run deploy wait a sec so it says that we have uh we created and uploaded um This hono Cloud flare uh workers uh and it was was published and this is the URL of our deployment if we grab that and paste here we have our app running actually in the internet and we can do customers we have the same response and customers one we have correct response as well if we go now to uh Cloud flare console uh we should see our new worker right here and it will be some stats here uh settings for example our um n variable that we set in uh Wrangler toml file in this one uh we have access uh to that variable right here if we go to docs for um so first of all if we check an example of getting started example from from cloud flare workers so this is like a simplest example you can write you don't need any framework for that you can literally just type it in your editor and upload it manually to Cloud flare and it will work so the entire logic you will Implement inside this fetch function that has access to the request uh but you can imagine that if you trying to build something more uh complex than just simple couple lines of JavaScript you probably will need some some helper for that and this is why uh horo framework is really useful because it works on any uh any runtime and the routing is kind of optimized so it's fast enough to run inside these restricted environments like Cloud flare workers which are restricted by number of milliseconds that you can run in for example the uh free tier Etc so um hono can build uh application like this into the format that cloud flare worker understands so as the output we'll have something like this but a bit more complex but this is will be uh managed by uh hono application so okay uh the next thing we want is let's take a look how we access those ANS uh in uh in our home application and then we will uh work with the database we'll deploy a database and we'll connect our application to D1 database so uh to support types we can do something like this uh we can go right here um put it um inside our code and then uh we want to use this name and we go here change this uh we don't need an extra thing and also we want to add a database as well and the type for that is D1 database so if we want access to our VAR we can just do uh console.log and let's say we want to print um how it's called Uh my VAR is and to access that you do uh context from here that's like our request and Dot um my VAR actually uh I forgot to add the types right here so we want to add this annotation and after we do that uh we will have access here to autoc completion so we have our uh VAR uh let's run the app locally again B run Dev should be here if we go to customers we now should see the console log right here with with the value of the bar so in Cloud flare it's called Uh bindings uh I I believe and this is basically the vars that you can access in your application so you can set n base URLs Etc and also if you want a secret bar uh we can uh do it from the uh CLI or we can do it from the um UI so if we go to edit vars and we add a new one let's say uh my secret and let's say secret value and then you click on encrypt uh so once we save it uh it will uh show here as encrypted uh encrypted value encrypted encrypted VAR and but we can access that from our code uh because it will be it will be available for for our application so let's say uh we want to um just for to see if that works we we can do c dot NV dot my secret and we should Define the type here it will be my secret string now we want to deploy that so we do BN run deploy so now we can check it here and now we have this secret value that was from our secret binding cool now probably the most interesting part is to connect that to site database and uh in flare it's called D1 they're basically using site and building their own version of that uh that is really nicely integrated with uh Cloud flare workers so uh first of all we need to create the database uh let's do it like this so we have our Cloud Player workers D1 uh create so after that you want to get this block uh and put it into the toml file and this will help um help us to test this locally because when you run uh this Wrangler in development mode it will create a local sqi database and it will be will correctly connect it to our local uh worker or local GS code and we will be able to use same API uh for the database locally as we do it in uh our production deployment so first of all let's go back to our UI and here under the workers there is a D1 section uh and now we should see our new database created here um there's like a basic UI here you can do some queries and metrics and you see your tables so then we want to create a uh file with a schema so let's say schema SQL and let's create a simple table create table customers we want ID integer uh primary key then let's say uh name text uh and email text and let's do a CLE inserts insert into customers uh name email and then values name one email one sample.com maybe two of those say two and two now to run to fill that uh data in produ prodution database there is a command for that um you you can open an um interactive shell and just type commands there but you can also use um a command to apply all scripts all statements from the file and it is uh right here so we want this thing so we do uh execute on our database that we called workers and then you just provide a pass to your file that we have locally so this is done and also the same thing but to create uh database locally and uh the only difference is that we have this-- local it is created uh to find the database you go to this rangler uh folder and then State and D1 uh and then we have our uh mini flare D1 database object and if you in int J you can just double click on this database object run test connection it should work apply okay and then go to this um UI for that and we can do select from customers and we have our data from our local data database but also as we already applied that in our production deployment we can refresh this thing and uh we should see our customer table we should probably see uh rows here yeah so it works and finally we want to go back to our application and then we want to um query customers in this API call and query customer byid in this API call so it's it's quite easy to do so what we want is we want uh const uh results and we want c. EnV and then DB and it's called DB because we add it naming like this and also uh if we go to our uh toml file you see the name of binding is DB so if it was something like DB1 or um my DB uh this will be the name that you should use but we just have DB so after that we also have these binding type defined here and we can use it like this so API is simple you do call prepare to create a prepared statement and then we want select uh all from customers and there is also uh chain it with all function uh then we have then we should await and this is now sync and yeah that's um after that we should have results so let's do just console print log results or we probably can just add it here because we anyway return uh Json and that's the response of our uh query and there's there some metadata and status but basically we're just interested in these results so we can say like uh customers and we can do customers do results and that should work refresh we have our customers here and row data is just an array of maps and then um we can use the same thing in uh our single API what we want now is we want uh where statement where ID equals and then you just do bind and we pass custom ID right here now let's say customers and this should be changed to sync now we go back customer one uh like this and also if you expect a single value instead of all you can use first and in that case we don't have to get results so if we refresh it here we just have a nice uh response for a single customer and now if we go uh back to our terminal we can run B run deploy and as we already created this production database uh everything should work here as well so now we should see our customer one yes which is correct result and our customers endpoint is working as well so as you can see that's uh the entire application created it's really easy to update new version there are also um really cool features like you can create branches you can have your preview version you you can have production Branch where like uh your production deploy will be based on that Branch Etc so I really recommend if you haven't tried uh Cloud flare workus uh it's really nice thing to finish the video I like to show how to clean this up uh after you experimented so we can run just a couple commands first one will destroy a DB for us us um just this and we click yes and second one is to destroy our um worker and yeah that's it so that was Cloud Player workers uh really nice if you want to build some kind of API Etc um just uh carat if you're planning to build an application uh where you need your static sets like images CSS files Etc you should look into a different thing that's called Cloud flare pages that support these type of things and also a good thing is that Horna supports that as well um but it's slightly more complex than with cloudflow workers but it's pretty cool as well so I'll show that in the next video but for now that's all and hope you enjoyed the video have a nice nice St see you next video bye-bye

Channel: Andrey Fadeev

Views: 4,291

Keywords: #clojure #bun #htmx #software

Id: yPrQ7u3gWqk

Length: 22min 1sec (1321 seconds)

Published: Sun Mar 10 2024