Fullstack Cloudflare

Yeah. And so they've also come out with workflows.

and then I'm I'm big on it. Definitely. Alright. Let's talk about files. So Cloudflare has or is a a CDN, meaning that if you serve a file up with Cloudflare, the URL like a Netlify,

I think we on we're on Vercel. I think we get three minutes of time with Vercel, which means we can download, send it off for transcribing, have it come back, send that off to,

And and then in that case, you're not waiting. If it takes five seconds to do each one, you're only doing twenty five seconds instead of ten minutes And then when that object is updated, it both stays there forever the AI model, like, the name of it. You don't have to download this 80 gigabyte model, then you just run a query against it and you get the data back. So it's a very quick way to get access to all these different AM models, and they're pretty good at well, you can build an entire full stack application just on Cloudflare products. And they're kind of unique in that all of their products are a function

you Node, you could I need to loop over this list of You can set the type to be text, JSON, array buffer, or stream.

build multi step applications, build workflows.

the issue of, like, your workers hitting CPU time because each one of these steps can run for however long, and then each step will pass data on to the next step. And you can you can specify, like, how many times each step should retry.

to explain how to retry if it fails. Yeah. You Node? Send an email. But if if if something's down, then try again in two minutes and then try again in five minutes. All of that is built into this. So you could simply just

typically, like, you could write this in a single JavaScript function, but if any one of those things fails, you have to add all kinds of, like, error handling,

But on on the Node page. And about halfway through the month, I get an email from Dino being like, you're exhausted the free tier write the script in one file top to bottom.

of of tied up CPU time. Yeah. I'm super excited to play with this. Like, honestly, that that flow that I just described, I kinda wanna try and implement because we have something in the syntax code base that's kinda it's it's just like a a single function, right, that has a few awaits? It's a single function, and it's all squeezed into a single request.

transcribe the audio from a Syntax podcast episode. You could build a a multi step thing that

Yeah. I wanted to bring up queues. And so this is a product that has been around, and the one one that I have tried recently. And, essentially, it gives you a similar functionality, but it's kind of just built into workers.

sleep it for however long you want. So you could say,

and you have to be running it in a place that can run for that long. So workflows is nice because you can basically break it down into these distinct steps, and it has built in retries, and and it's a pretty great way to to build out those kinds of features.

And this is one of the ways you can kind of get around I this is the one thing I've looked into but haven't used yet. Like, I saw that

something could time out.

for this this type of thing. Even like something if you have you have rate limits, them being part of that product, or you can just simply resize them and stick them

You can have state that's shared between the the steps. So for instance, one thing that you could build JS, let's say, you want to, stringifying because that's one of the things about key values. Your values have to be stored as strings. Yeah. But it sounds like they have a helper that will, like, JSON parse it for you. Oh, yeah. I just pulled it up.

summarize it, and then the last step is, like, store it in a database. And so,

It's just called CloudFlare Queues. You could compare it to something like Redis with BullMQ or Apache Kafka or RabbitMQ.

three minute long stuff inside of a request. It should probably be in a queue, but I don't feel like And in order to do those import export statements, which is kinda cool. Like, is this gonna be the Laravel analytics Canada

I think they they put it into open beta back in October.

So it's it's I don't know if it's built on top of PgBouncer, but it's very similar in that it creates a bunch of connection pools so that the database connection can be reused. And you talked about this a little bit earlier, but this is one of those things you need when you're dealing with,

in in the in Cloudflare Workers. I don't think so. Curious if if you would hit, like, storage limits in durable objects. You'd probably have to do some jumping around to make sure you Wes, I'm not I'm not saying yeah. I'm not saying

Nice.

edge functions or serverless or, in this case, workers, because so many of them spin up. You could potentially, like, saturate the number of available connections to your database.

Mhmm. So, typically,

That thing, it probably isn't gonna scale very well once you get thousands and thousands of users.

as you have them coming in. So, like, I even had that with my little ESP 32 here Wes I built a a WebSocket server on it, and the WebSocket server can be connected to a million times. And then the the server itself sort of collects them all and passes it along as a serial data.

I I'm curious if you could also use a durable object for that as well

hyperdrive will essentially, like, cache any reads going into the DB and then also make it super fast for reads across the world.

But beyond that, it, make sure to manage all those connections of all the workers spinning up. I I actually had this problem with my receipt printer,

if you're trying to connect to something like Postgres from a worker, you'd wanna put it behind TypeScript. So that way, first of all, it can scale it globally.

use the durable object to store the data, but I'm saying, like, use the durable object as the connection pool, he we had him on the podcast to talk about this. He's building this thing called CounterScale, hobby project replacer where we They don't like it when you call it serverless or edge functions, but it's essentially the way that you can run, going off to OpenAI and and waiting for two seconds to to get a response and then coming back, you're paying for those two seconds. Right?

This was fascinating to me because if you're the kind of person that maybe, like, you're self hosting some things, maybe you you have Coolify and you're you're running a Postgres database.

but it only allows one.

And once that one is saturated when somebody buys a course from me,

But if you put it behind TypeScript,

a while ago because the receipt printer allows a TCP connection, I'm assuming that's what is. I don't I don't know. Node don't have any inside hook, but that's kind of the vibe I get for it. So, up into the enterprise level, they start getting ESLint, they have their whole Okta but but there's no there's no TCP and then there's also client code for connecting to it. So if you do want to do WebSockets, kind of cheap cash.

900 10 megs of actual JavaScript running.

mostly Node compat to to running code like this, where you could simply just, like, sleep

So three megs of JavaScript, d one is is what you want. It it follows the SQLite I I'm on the paid version, so I have, like, thirty, forty, something like that. And I've not hit it except for once.

So similar to how BUN or Deno is not Node, Yeah. It's it's actually kinda wild that you just an an adapter, and it it's built in a way that, yeah, you can deploy this thing anywhere and and Cloudflare being one of them.

just split your code up into to multiple, and it's dirt cheap to run on the analytics ESLint. So it's pretty nifty. They also have

something like database as well as,

sort of run times. Yeah. And that might be the architecture that some people choose. Like, essentially, it's, like, microservices. Like, you have multiple little worker functions that if you're hitting that that size limit, just break them down. Each one can do their own thing. Yeah. I Wes, on the point of, like, assets and you and earlier Wes talked about the not being able to access the file system, there are other things and offerings that Cloudflare gives you that kind of Scott of gives you that functionality, which we'll talk about in a second. Yeah. It's it's kinda funny. Like, with everything Cloudflare, it's There's a couple other little gotchas, but not not massive ones. Yeah. I've only come across them a couple of times. One of them was, like, I had some library that was trying to do a DNS lookup, but they don't have that primitive for creating those socket connections.

And I'm critical in of them in in many ways, but they are very receptive to feedback JS well as, like, And and that's huge because if you ever wanted to move all of your data out of And Vercel actually last week rolled out something similar to this as well where you can sort of use that downtime to handle multiple requests because, like, that's that's an expensive time to to pay for. So with Claflyr workers, you're only paying for compute, meaning that, like, when you're waiting on the network, when you're waiting for a fetch request, when you're waiting for those types of things, it's not counted towards your actual bill. They'll give you 10 it doesn't sound like a Scott. Ten milliseconds of CPU time, and then thirty product, like a like a worker for running JavaScript code or the OpenAI a user could draw

So, Wes, it's I've only Sanity it a couple of times. It usually won't really hit that. Mhmm. It like, it really depends on, like like, what kind of stuff you're doing. Right? Like, the the socket one is the probably the biggest one is is WebSockets, and they have their own b two, matrix.

CloudFlare Workers is also not Node. They do have and also, like, what the errors are shaped like. So, yeah, it's it gives you full type safety, for that. Beautiful. And then, like other things, most other stuff will have, like, an adapter for Cloudflare deploying. You know, we had we talked about Nuxt last week, and having

And what was I don't have that NAQ.

But on Flare, it's super simple. You literally add the queues product or, yeah, add the the queues to your app, and now you have a producer and a consumer.

the way that I implemented this was when I was working with the GitHub star data. So for, each repo that I wanted to get data for, I needed to download all of the stargazers,

won't time out. It'll basically just keep running and running until it's finished. And so that one consumer is what I have that makes all those requests to the API.

Like, I've got lots of lots of qualms about it, but I'm, like, long term, I'm I'm I'm very excited about it because s three And a MySQL database or or, sorry, SQLite database. And then they also have several products that are sort of, like, built on top of their primitives, which are like handy little features.

And what the way that I implemented this is it's gradually storing that data inside of key value. And so if you hit an endpoint with hono, it's just gonna give you the intermediary data, and it's like, hey. I'm still processing, but here's the data so far. And then finally, when that consumer is done getting all of the data, it updates the job status. And now if you hit that endpoint, you're just getting the the latest data. But it's a great way to to to, like, break up tasks when you have long running things like that. Yeah. Totally. And or or even things when things could possibly fail. I've told the story

JS the consumer of the queue doesn't

what do I use? Postmark. Postmark went down for, like, twelve hours or or something the other a couple of months ago. And which is is quite a bit, and then 10 megs on we've been using ours for five, six years Node, and we're we're we're both pretty heavily into it. I've been running I was running Coolify and then grabbing it out of memory when you need it. And that's essentially what this API JS.

And so what I'm thinking about right now is, like, this is kind of how Cloudflare gives you that, like, scalability

result. You can also put a worker in front of something where where it will intercept the request they've done a great job there.

And so I actually handled this inside of a queue. So when you hit a hono endpoint

which is kinda cool. That's one use case for our workers. It's not necessarily just the end these vendors will not be charged.

and it was hundreds of requests because I'm only getting a hundred stars at a time. And if you consider a a library like Shadzy and UI, it got 38,000

it's pretty easy to just implement in your in your worker. That's why I'm so, like, bullish on on CloudFlare stack.

I send them an email with their access. Right? So I'm like, what I would do for a 10 gig, that problem in my life

So it's interesting how they've kind of taken something that used to be super complex and now, like,

stars, on GitHub last year. So I needed to request,

code comes instantly and sometimes you have to wait like two minutes for that thing to show up.

38,000

and and either pass it along or send something back or tweak a couple knobs and and keep the Wes going.

even without really having to know about all this, like, complex architecture and stuff. Because this idea of, like, queues and splitting up work, this is what you do if you wanna scale an app.

they just add, send Wes a code to their queue and then their email goes through and processes the queue as fast as they can, but they may be backed up a little bit. Definitely.

when these messages come in. And so I have a consumer that when it sees a message to get star data, it then fires off that long running task. And so this is another piece of a CloudFlare that actually can run for a long time

that as part of the setup Scott. You would you would just put that in the queue as part of the setup TypeScript, and then the queue would, to get a new version of it running. So this is is kinda kinda neat. Definitely.

Vercel, Fly, whatever, like a platform as a service, we'll call it. Yeah. But they're also the You could just, like One kinda interesting thing about and it just, it feels really good and Backblaze JS, is dirt cheap for holding stuff long term, and then you could start it up in in a little while.

would process them. And that's why sometimes, you know, when you're like, you you sign in and it's like, we emailed you a Node. And sometimes that Alright. That's it for today. Thank you so much for everybody tuning in. Make sure you check us out on YouTube, youtube.com/@syntaxfm.

But along with their their CDN cache, that usually sits on top of it's so easy,

that says, I would like this star data, it checks to see, like, is there a job? And I'm storing job information in key value. And if there's not a job, it will send a message to the queue that says, hey. We need this star data. And so that's the producer. The producer is saying, I would like this data, please. And then the consumer is just waiting there to see,

bits of star data. And so it takes a long time to, like, to request page after page after page after page.

Essentially, for a queue, you have producers and consumers. So

I've, 7 eighty, and we talk about all the different Yeah. It's I think that was was pretty funny. It's but it just goes to show, like, that's a cheap way

these workers all get their own little local instance of a of a SQLite database. So the reads are super fast. The writes have to be replicated across. Mhmm. But that's one of the the bits of magic there is, like, your your reads from the this database are super fast.

and a big I've been I'm also using Cloudinary quite a bit for mine, but that the Cloudinary jump from free to paid JS, like, zero to I think it's, like, $200 Cloudflare? built on this. I'll have a tweet for some, some simple example code because there's server Node, sibling to CloudFlare I had, like, a two terabyte

Yeah. It's free for 5,000 transformations

and and you need to make that jump, like, it's getting a little less hobby ish, that that can get to be a little expensive.

I've been rug pulled before and they're, they're a public company already. It's not like they're, like a VC company it's similar to how what the s three API is is standard for all, that's coming in, performs some operation, and then sends the request out the other end very similar to how a Mhmm. Meaning that I'll stick something in key value, transcript, you can vectorize photos. That's how similar photos will often work.

And because bandwidth is free, of key value read and writes, 10 files, and I need to search for each one, but I can only do one per Sanity. You know? You could just do a for loop, and inside the for loop, you could wait one minute.

products.

their image product, out the other end. They'll give it to you. They do not support four k, and they haven't for, like, five years.

inexpensive the pro plan, which also is quite a bit. So I'm thinking of I'm working on my website right now, which is the Next. Js website, and I'm trying to get that thing running on CloudFlare Workers.

the sort of lower level stuff, the free plan, the pro plan that we're on or business plan as well. It actually turns out to be about 65 megs, not gzipped. So you can fit a lot of code in workers. And it also doesn't include if you There's no file system access in Cloudflare Workers because there is no you sort of proxy your images through, and then it will resize and and crop and and whatnot. So there's, like, a Next. Js image component that you can use, which will just sort of resize them on the fly as they're requested. So that's really nice because you simply just need to WebSocket connection, which is is wild. So I've been using this library called PartyKit the knobs with with a worker itself, So you have to chop up your videos with FFmpeg. You gotta upload all the bits. You gotta do all that. Cloudflow Stream is simply just upload a video send CJ an email, wait for two years, for each of my like posts.

Definitely.

They also have several, like, database Let's talk about durable objects.

Okay. But, again, it's it's relatively the, like, the URL

pipeline because I don't see those images And then you can also run multiple workers, which and trying to figure out based on, assuming you could deploy other places if you want to.

JS is relatively cheap. And I think once you get they are both generation.

big fan of it. Definitely. And I think the the magic there is, like,

where something like a Google cloud into which is this little website I made for generating fav Scott, the, like, AWS, like the the low level infrastructure provider.

So that's

But, yeah, like, my bill I have several stuff running on Cloudflare, and my my bill JS always always tiny. I've never heard somebody I think everybody knows them as the, like, DDoS, So, this is probably the approach to it. And and then you're a little bit locked in at this ESLint, right now. I'll try to find the name of it that is is making sort of an an open version of My name is Scott.

pipeline.

But there there are a few products you have to be on the paid tier to try. I think maybe it was Q's or something like that. Definitely, durable objects is is paid tier only. That's why I think that's why I upgraded.

a probably a deal killer for, I would say, most people. I don't know why they don't have four k support. Yeah. This is another product I haven't tried yet, but I looked into, like, host because I do live streaming on Twitch and YouTube for a while. I was like, should I try to stream myself on on my site? Maybe for, like, members only or or something like that. So that's that's definitely one of the products I was looking into. Alright. Data. So we talked about assets and and files and whatnot.

a bit tricky to to figure out. I will say, like, I've been on the the free tier for the long I didn't switch to the paid tier until, like, a few months ago. And really, for all the things I was trying to use, like Workers and KD, like, I didn't hit any limits.

relational database. So if you're trying to build a binary, or JSON.

And, and then once it comes Like, you wanna, like, create a product and upload photos that are associated with that. So in that case, I used their 7,000

and you can use augmented access them there was, like, a whole Scott ups dedicated so basically turning emojis into fav icons for a quick favicon.

spec is is what I've been using to interface with it. I have three or four different projects running on d one, and, workers is you pay for what's called CPU time and not wall time, meaning that

and $5 per 100,000 images stored. So pretty Oh, yeah. Pretty generous, free tier. One of the most hilarious thing about all these pricings is, like like, you've heard of girl math and boy math? Like, there's, like, sysadmin math as well. Trying to figure out how much something is going to cost Yeah.

to host your own video, but then you have to do your whole data ingest ESLint server code on CloudFlare is you create what's called a worker.

I don't see those images in my, like when I log in to Cloudflare and click on images, they're not in there. Mhmm. Because that's that's just things that I've explicitly uploaded to Cloudflare images.

in r two. I'm pretty sure the Next. Js image component just uses the which is like they're sort of like low level And then the queue, you'd have they went down for for whatever. And I had to to quickly jump on and write some code that ESLint those emails. But ideally, what would happen is is you would not just send

of the key value, which which could be pretty handy. You can also set expires on it. If you've if you use Redis in the past, that's a kind of a handy value because I will often use key value as a

And key value in general is is pretty nifty. You can basically, a pretty large website, I would say. And It it's wild because, like, if I think about that process that that you've just explained, like, you'd have to, like, stick it in a database or put it in a queue.

immediately And it's gotten they don't provide x, y, and z, but they have their own version of it, like cold storage.

You can set some data that that will spin up, meaning it will start. Right? That's that's often referred to as a cold start in the biz.

and put them in their own spot file system. So if if you're using that, you Scott think around that.

to build in Cloudflare Workers, Amazon is is not the easiest thing in the world, but you can that. So anything I write, I make sure that I'm not open Next. Js, which is that people are working on, which I like because then you'd be able to still deploy it to Cloudflare, but you could also, second They are all s three compatible, meaning that the s three API, frameworks, how to actually use them. I've been using the Open Next. Js then then they don't get the email. Right? And it's actually never been a problem for eight years until

a hit counter is a very easy one to do. Definitely. I'll just mention really quick. The the TTL is also really great when you're maybe you're scraping data or maybe you're you're pulling data from an API and you wanna do it on a regular Bos. Making an API request,

If it's not, it'd probably be expired, and then I'll just go through the rest of the function that goes to recreate it. Yeah. This is comparable to something like Redis. I've used it for similar things, and I actually combined KV with queues when I was building out that GitHub stars API because that's where I was storing all of the intermediate data of that that background task. So, like, it'd be getting data. It'd be storing it in key value,

TypeScript. This one's actually kinda cool. You wanna explain that? Yeah. So, I haven't used it yet, but I started looking into it because pretty often Wes you start working with workers, everything you see JS, like, just use d one. Well, what if you don't wanna use SQLite? They introduced TypeScript, and it essentially allows you to take any Postgres database, host it anywhere, and turn it into a globally distributed Postgres database.

because I'm, I'm pinging if you're willing to sort of approach it in a CloudFlare way, And I was building an app where And then we fed that to the prompt to say, given this context, forty five minutes or something on each one of them

storing it in KV with a time to live of, let's say, like, twenty four hours,

into it, and then you can get the data. And, alternatively, you can also get the data and telling it what the type is. So I believe there is just a string, now answer this question. Right. And yeah, like you said, it doesn't hallucinate as much in that case.

So, yeah, it could be be any of those types, which is and and be able to host it anywhere. Yeah. And it's tricky. And I think it's probably the the one downside of all of this is vendor lock in, which you you potentially get with with these other things. And so, like, we'll say that upfront. It's like, once you choose Cloudflare, you're kind of choosing Cloudflare. Yeah. I don't know. That that's true or not. Like, I I'm thinking about all the stuff that I have. Okay. And I don't know that I've ever written well, maybe the durable objects, although there is an open source project to something called an embedding. And an embedding is a, like, a, an a mathematical which, like, you could, like, have a Git commit, and it would build and and and deploy HTML.

which is really cool.

the outputted values

I've used key value as simply just a way to to store hit counter values.

meaning that So I'm happy for that, at least for now.

you you write to a database. It is not guaranteed Cloudflare adapter, API has has sort of become, like, the standard for

a hundred thousand writes or something like that per month, so I I exhausted. So the the numbers aren't perfect.

and super easy to use. I I I I didn't come across the typed API. Like, I think I was manually

the country's emojis you can opt into it by default. You can control the all of the Cloudflare offerings is you often have to

an example you either need to download all the data and run it in memory, but once that gets too large, you need a database that can run representation with our existing database, with the syntax database, if you simply wanna make a copy of that thing So Cleffler has this relatively new product called Durable Objects, WebRTC too too locked in. Even the database and whatnot, I'll use Drizzle, with the exception of several things with, even, like, database connections as well has has a sometimes has an issue with that. And and that could be a bit a bit of an issue if you're trying to do stuff with, like, real time WebSockets API, you can have access to your products. You could put a whole alternatives,

and then we had a whole show on this. Backblaze is another one. Bunny is a big one.

So you can pull the pull the JSON data out I cannot get it working.

And then every other request that comes into your worker just pulls from KV, but then after twenty four hours, it's expired, and now you go off and pull that data from the API again. So that's another thing that I've used this pretty often for is just expire the data so I can always refresh it. That's exactly what I'm using it for on my my updated website

Certainly, Often that's because in packages and stuff just use Node APIs at the end of the day. So they have pretty close to full node compat, cache that file and distribute it around the world to all their their different data centers. Right? And what is it? SMB?

But, once I put that up there, people started gaming it by writing little bots to PDFs, literally anything, you wanna host anything, Yeah. You wanna stick a favicon in there without finding one.

that reading it in Tokyo will have that result. Right? It has to propagate out. I have never had access to it when I'm, and then that server will run for however long it needs, and often they'll stay warm for five, ten minutes or so.

it what it what is that flag? There's a number one flag. Right? France. Oh, France. Okay. Yeah. France. France was getting it.

And you can only hit those APIs, especially cause I'm, I'm like scraping them. You can only do it so often before they block you. So I have like a TTL of to a point where you can pretty much build

D one is really interesting because Blue Sky, all the social platforms, and I'm pulling in stats

the the country emojis trying to make them number one. Yeah. What's that one at the top? Is that Netherlands or

which is why something like Hono is useful because it basically gives you the ability to, like, create routes like you're used to in ESLint,

framework there. Right? There's no router. There's there's nothing. It's simply just you send the data back. You gotta set all the headers yourself, and you probably don't wanna do that. You probably wanna reach for something with a little bit more helpers, which we'll talk about the different things. Hono is probably the the biggest one, but there's all kinds of different ones, including a new one called Orange JS, which is pretty nifty. Yeah. And it supports we'll talk about it, but it supports other frameworks too. Yes. So Cloudflare Workers runs on and that just simply uploaded it to the images. And, yeah, you're right. Like, the the prices for that are a little bit more expensive, and that's you get the convenience of requests that come in pages, I think is is worth it for a lot of people. But if you're on a on, like, a little there are lots of applications that that would need that, but it is it is relatively fast in my experience, and it's we're talking, like, milliseconds here, not, like, minutes Yeah. To to propagate around the world.

instead of having to, like, have a bunch of if statements inside of that, like, just fetch function that you're doing. Yeah. If you if you, like, like, raw dog a CloudFlare worker,

there's no, a 16 by 16 LED And it was their, like, platform as a service offering, it's kinda cool. Essentially, it JS just an object that will persist

a JavaScript module that exports a fetch function. That's all it is. And that one fetch function handles every single incoming and outgoing request,

serverless function would work. It sort of spins up, does its work, and then it will spin down, meaning that it's not like a typical server where it's running all the time. Yeah. And this was interesting for me to, like, wrap my head around once I got used to it. And, really, I got used to it because of Node. Yeah. But the the whole thing is, like, it's literally I haven't used it yet, but it essentially allows you to

you just get the whole request object, which I'm a big fan of that. It's, like, it's all standardized, right, based on the the fetch API. You if you've or if you've worked with a fetch request in the past, you you probably already know the the thing. But there's no slightly different than the norms, but because of the way that they approach things,

which has v eight as an engine.

These are the ones that you should you should know about.

for calculations, alternative.

And that's not uncommon. AWS JS kinda has has the same offering in terms of both low level as well as higher level things. So workers, that's the first one. Workers is their JavaScript runtime. It's their their server.

a stat r two for holding static assets Cool. Alright. Let's wrap it up with some sick picks and shameless plugs. You got a sick pick for me today? Alright. I have one.

although there is I can't find it right now, but there is an open source sort of alternative

you can't expect that all the other processes are also going to be able to to share that memory. Right? that is just burning VC money.

is that they are short lived, meaning that or r two or any of these things, they make it really easy because one of the things about We've mentioned them briefly on the show before, but I have since had a bit more of a chance to play with them. And they're kinda interesting because so the problem with

somebody visits a URL, what will happen is if somebody hasn't visited that URL or or that route in a long time, like, socket connections. They'll they have their own version of that.

running and looking for cron jobs and It's pretty wild because there

will also get that, any data egress between If you go to fav.farm, like Sanity Kit is built on this. I think TL draw is also,

will engine,

and any serverless function can put stuff on properties or access properties, but it just lives forever, which is which is pretty it's a it's an interesting paradigm for how to deal with persistent data and how to share that data across workers because it's just it's just an object.

that downside, you can do routing and and all kinds of stuff.

But once they're done or if you're getting a ton of traffic, multiple versions of that worker or serverless function will spin up. And the problems that you have in in that land versus a traditional server land is that they're not always running, meaning you can't expect them to always be, of of that data. And then once something is in a embedding, which is pretty cool because You can check out some of CJ's videos as Wes, specifically on the Cloudflare stuff. He's got lots of them. Thanks for tuning in. Catch you later.

and then it would also show up on everybody else who has it currently open. And I I just put my local server up on Twitter, and I had, like, hundreds of people visiting it. It was wild. It was working just great. But then I also want to like, like mirror it to the LEDs as people are drawing on it. And it was amazing that it worked so well and I was able to get it up and running in, in relatively small amount of code.

if you're trying to hold state between requests.

And And then what it would do is it would take that question, sort of implementation which at some point is great, but also I don't like coding my apps in in just a Cloudflare way. Whenever I'm writing a line of code, I wanna know that I'd be able to to duck out of this thing on an object in JavaScript.

to I eventually want to take one of these, which is something like, when I need to get something, I'll first check if it's in key value.

It's, it's just like sticking,

data in memory, and have the durable object be the If you are going to be running code in CloudFlare, you're gonna wanna turn on the Sentry integration, so you'll get some error exception.

think about like, because often Node of my favorite, like, caching techniques or one of my favorite real time techniques is simply just putting I actually don't own any of their stock. No. No. Me neither. Me neither.

And then they also they don't share memory. So if you're storing something in memory, And there's a possibility it doesn't happen very often, but there's a possibility that serve up the high res version of whatever it is that you want, and you know that your app will always deliver the resized, converted, Node has, like, RPC. Right? So you could import the Hono RPC and and call server functions

And all that was happening was there was no database.

updating a property

think about creating a class instance, but now that class instance lives in the cloud,

And how often there's just set and get.

free egress Wes, like, if you're if you're transferring data between these specific companies, it's completely free or, like, super low cost. Yeah. So we talked about this on episode seven eighty. Go to syntax.FM/

Mhmm. I mean, let me find out who else is in this. Yeah. I think I know what you're talking about because I I've looked at Backblaze before, and they they talk about mirror itself to other everybody else who has that WebSocket currently open. That's super cool. So I haven't played with Robo objects yet, but that's I I've read about them and that's how I think about it. Like, if you if you're familiar with OOP,

you can just grab the Amazon s three node package, and you can upload files, I I do think that this is going to be a very big option

and less to hold files. So if you have like a lot of people downloading a very small amount of files, that will be different than if you have

like there's people that are locked ESLint, to Amazon

some of them will charge you based on bandwidth that's you probably shouldn't be sticking serverless compute in general this is wild to me that And, or just writes. There's, like, there's, like, a limit of not on Node. It's a JavaScript runtime environment, but they've built their own,

On top of R2, CloudFlare also has like an image pipeline, which I'm using right now. This both has an API, so you can upload an image and you can ask for it in different resolutions, different formats, different you can crop them, you can resize them, So you you kinda get the best of both worlds. It's certainly not at a Vercel level or Netlify level at all yet, but I I do think it's it's going to get there, especially when they keep rolling out So when I'm done a video, to build a hit counter. And if you want and then take all their quests coming in and pass them along

compressed version for your app.

directly to Cloudflare. Yeah. So this is the one piece that, like, isn't vendor lock in because they're using that exact same API. Like, you could store your stuff there, but if you wanna switch, you could switch to any

approaches, you wanna host a bunch of video parts, some m p threes,

millions of dollars simply just to move them out of, S3.

So that open bandwidth alliances is pretty exciting.

and then any You get all the details about what's going on with your your application if there's anything that goes wrong, and you can fix it right away.

which one is cheapest Or it wasn't just the entire podcast episode. It was like it found, like, a little snippet of where we talked about it, and Then it grabbed like a couple sentences before and a couple sentences after.

Definitely.

because The way that it works is you just simply await with, are Bandwidth Alliance, or they're part of the Open Bandwidth Alliance, which means that

That's their storage. Right? So if you wanna host a bunch of images, or you wanna roll it back, like, that that takes, like, I don't know, ten, fifteen minutes, or you can also just, like, use

via that URL need to store something in memory or I just need to put this somewhere and then be able to get it later, key value is what you want. It's it's kinda like the local storage API

you can simply just

you can vectorize the title, you can vectorize

we converted all the syntax transcripts I, I, CloudFlare has been dirt cheap for, for many, many years. I don't feel like they would ever do a rug pull, but So anything else to add about full stack Cloudflare? I we didn't even touch. We maybe touched, like, 26% And, so he's he's not feeling too great right Node, so that's why CJ is filling in.

That that's often called RAG or it's called retrieval Most of those features, if not all, are now in Cloudflare Workers. And from Cloudflare has a Next. Js

of the Yeah. They have all kinds of stuff in the AI world. It very similar to most, like, cloud offerings right now. They are sort of trying to be the the place where where people go to to get it. So you can run or their their d one still very heavily under development.

things that it can reference when it's doing that query.

Alright. Next one we have here is is vector databases And I started this is running on Deno and is using Deno's key value.

all the different models on Cloudflare, vectorize it, what you can do is you can convert have any HTML, any other like static asset that is needed, that's not part of your JavaScript bundle. That's just query through a worker. And if your code is not running inside of a worker, it's hard to get access to them. It's not like a regular database where you just get a connection string and you can connect to it. So if, yo, I need to roll back my database. And, like, with because everybody was gaming they also Yeah. Yep. Everyone always says that type of thing.

like cosine similarity extremely popular, because people just use it whenever you're making a quick little demo HTML.

and and and vectorizing data. So in the AI world, They have several, like, what I'll call primitives, of that. Workers are limited to three megs on the free platform.

Definitely. And one of the features I like is the automated rate limiting. So if you're let's say you're integrating with the OpenAI API,

your the titles of the podcast pretty nifty. Yeah. It's awesome. And then you can set the the cache on that.

being one of them, in the enterprise world that I think will make them a lot of money when you multiply it by, like, something like a Salesforce or whatever that has 20,000 employees that need to have access, you know, $5 a month per employee.

close time to actually make the money, they, they triple the price.

vectorized firewall in front of all of your products and you could do single sign on with that. You know, there's so much Yeah. They they use the word eventually consistent, you can roll back a database or Postgres or SQLite or something like that,

and then it would

transcripts once, most new modern stuff with the exception of each emoji is requested, and then I put the I will drag it into my Synology on the network.

pieces the read I get from just looking at the docs and whatever and from the, React Router seven. There will just be adapters that you can export to it. It it's pretty much

create context that doesn't fill up your context window for when you're calling the API, but it's just enough to have the relevant pieces so that the AI doesn't hallucinate as much and it has a little bit more,

like, similarity.

Definitely. And this goes right in with their, AI offering because they have a way to, like, call AI APIs. But pretty often, you would use a vector database to kinda, like, store additional context for your your queries to an AI.

And like Wes was mentioning, the fact that you can

to this, Basically, you you take a photo and you vector it and that or you you turn it into an embedding, and then you say, show me embeddings that are mathematically on the website, that thing is, And I started counting at this point.

into embeddings, so that they at most only hit each API every forty five minutes.

Yeah. We actually built a little demo with all the syntax You know, what is supported with CloudFlare is Sentry.

search through the database and find the most relevant things, that's how you're able to

import for the browser or sorry, for servers.

these similar episode things actually work because and then we asked it a question like, what does Wes think about React?

and and then it will it'll bring you back photos that are similar or or podcast episodes that are are similar.

Next. Js development, because they they have this thing called Next on Pages, which I've used, and now they're putting all their effort into Ben Vinegar, And that, that eight megs is also gzipped,

That was my insight too because because I only started using CloudFlare last year, I think before that, pages, like you were saying, is the thing they were pushing the most and people were using the most. Yeah. But last year, I was really just using workers, and I I went through this matrix and I was like, yeah. I'm just gonna stick with workers. Like, I don't see anything too crazy that I can't just do with workers. So Yeah. I think the and early on, the idea was that if you have server code and front end code,

with just a SQLite adapter.

that's what pages was for. But now that workers has assets, you can serve them all up, and, APIs for creating the embeddings, which is pretty nifty.

which is sort of like a

Wes your worker starts up and when a when a serverless function starts up, you pay based assets, meaning that if you need an image during your worker, that I was working on

queues. So you potentially if you have the long running process, you could push that off to a, like, a queue consumer if you needed to. Oh, yeah. Yeah. You don't have to sit there and wait for it. Yeah. So there Vercel solutions if you're hitting those those those, those limits. Exactly. So CloudFlare also has CloudFlare Pages,

on the number of seconds that that thing is running. Right? And if you have, like, a fetch request that's meaning that if you wanna access d one or key value be shocked with a bill. I think Cloudflare makes most of their money on enterprise they have so many different products so that I have, like, a local and a remote copy of that. And that I've been running that for years, and I love that setup because I I don't have to like worry about it's just squeaking under, I think it's about eight megs.

Yeah. And they do have

we'll link up on compatibility matrix, the difference between the two of them. But pretty much you can do everything in a worker.

And I I had explained that there was actually a bug in the library I was using that was causing too much things like, like a drizzle,

workers.

milliseconds on the on the paid version. So 10 on the free, which doesn't sound like a lot, but these silly easy things like sleeping something for a couple hours and and it can comes back or durable objects. So to any Is is hilarious and Wes for life because it would cost them CloudFlare or out of CloudFlare into back plays, mostly, So d one is their SQLite introducing a whole queue for that type of thing. So it's a you should switch it over. Well, I'll try I'll give it a try. Alright.

Yeah. You'll probably find it. And do you edit edit off of that, or is that sort of, like, you offload? I offload, offload, but you could. Like, the transfer speeds I Wes I guess it depends on the micro SD Yarn, but the transfer the transfer speeds are are decent enough that you could actually edit directly off of it. Okay. Yeah. I often think about that. Like, when I got my MacBook, I

Definitely.

But I do yeah. I I struggle to transfer stuff back and forth because I do a lot of video editing, and, like, those files are really big.

So my MacBook, I think, only has, like, it's, like, a 256,

Exactly.

it knows exactly what the types are gonna be versus for various responses,

and it sits flush, the first step is download the m p three, and that could fail because of whatever reason. Maybe it's too big. But if that succeeds, the next step is maybe call an API that can transcribe it, or you pull in some library that can transcribe it, and so that's gonna run for a while. And then maybe the next step is you pass that on to a piece that will maybe summarize it with AI. And so that'll make a call off to AI,

which is is wild. And then he just built this you get this whole dashboard.

I was so sick of running out of space. Drives me nuts. So, you know, you record a couple of videos and you're out of space. And so I got the two terabyte, compare that I thought this was kind of an apt expression of how databases work. Right? their cache will

which if you wanna do like, you wanna build anything that has real time calling,

gig SSD.

when I, when I need it. I can either, I can just connect to it remotely or I can go into Backblaze and get it, introducing new ones. Once once the big ones hit, they'll they'll try to roll them out and get them into production as fast as possible.

Last thing I wanna talk about real quick is they have, like, a they have analytics engine, which, and that was good for, like, a year or two, but now I'm all I'm running up on it. Especially, you download a couple of these AI models Node before you know it, it's, you're you're out of space. It drives me crazy that sentence to the rest of the the podcast episodes.

you might have set up a site like this before, but, essentially, if a request comes into the root, it redirects back to that index dot HTML, but then everything that's slash API is served up via the worker.

but self hosted where

of the products, but those are the the big ones for me. Yeah. I guess I'll just mention I'm sure there's gonna be somebody in the YouTube comments. Oh, this is Cloudflare Shield sponsored. It's not sponsored. Like, we we like the product. We use it, and it just has a bunch of cool stuff. Like, I I would highly recommend, like, if you're building Scott.

rate. Yeah. I see all this like, Synology, like, you pay a premium for, like, for their hardware and but Yeah. It seems like they have so much built in. I definitely gotta give it a try. It's I I've been the opposite way because it only has a one gig network card. Okay. And there's

But honestly, I'm or something like that, which Once something is connected to it, you you can't have more connections to it. Databases can sometimes have, like, five or six connections at once before it says, hey. No more connections to me. But then you need to you need, like, something that will pull them, right, and and sit in front of it, and and that's what hyperdrive does.

and now I still only have a two terabyte. Like, give me a hundred terabytes. I don't wanna use Apple drive or whatever the stupid thing JS. Node always try to prompt me for say with the phones. Drives me nuts. Definitely. Okay. I'll sick pick along the same rounds.

I think once this stuff sort of gets smoothed out, they've been working, they've been after writing to a database There's different algorithms that you can use. Cosine similarity is probably the big Node. And that's often how Key value. This key value is awesome. So if you ever have the problem where, like, I need other compatible one. And one cool thing about Cloudflare and and many other companies is they have the this thing called the Bandwidth Alliance.

I I can imagine something like that popping up. Basically I mean, all of these offerings are already pretty easy to use, but to just put them into a single framework and maybe you have, like, a consistent API, like, yeah, this this could be the Laravel of the JS world. Yes. And, of course, Node, which is I mean, you've probably heard me talk about it on the on the podcast here before. And that's mainly what I've used it for JS, building back end APIs. And like we mentioned at the beginning of the episode, essentially, micro SD. So this plugs into my MacBook, and then it doesn't stick out. And so I have, like, a, basically, a terabyte of extra storage all the time. So, yeah, I That's awesome. I'll link to the one that I found. There's probably other examples out there. If you just search for, like, MacBook Pro small micro SD So if you like So it's like a a single deploy still, though. Right? Front end, back end? Exactly. But yeah. But that's it's not server rendered. It's API and front end, which is how I like to build most things, but it does live in the same deployment. It's a single deployment. Yeah.

I have a Synology

You can multicast SMB. You can you can send stuff over both. Mhmm. And, like, I have a two and a half gig NIC on my, my, MacBook.

putting out products like crazy.

Yeah. Similar to, like, Plausible, where you can kinda see who's visiting your website, how many hits you got, what pages, what are the refers, you know, 20 terabytes in it or something crazy like that.

And, I use that as my their other asset provider. So r two is their And the way that it works is it takes in a request Next. Js on workers. So the read I get from it is they're put trying to put all the pages features into workers, desktop, like, fifteen years ago,

on the Mac. So I have a, a one terabyte,

static assets offering, that single page app can live as static files right next to the worker. And then images has a storage option, but you could also, like, point it at r two. When I was looking into it, it seemed like r two would be the cheaper path because it's, like, cheaper to store images there and then, like, use their convert. Which path are you going down? I did both. So I once built an app that had, like, an upload button.

The whole the the thing will transfer over there, and then I have the Synology set up so that it mirrors to Backblaze fear. Yeah.

in the future for when you're you're building apps. Definitely. Completely agree.

for you can you can stick stuff on that object, and then anyone else that's listening full stack framework, So holding

Orange. Js is another one that's built on React Router seven, and they're attempting to make a vector queries.

screenshots to generate the open graph images.

you can define all of your routes. You can have middlewares, all the stuff you're used to when building back end APIs, but they can live inside of that CloudFlare worker. I will say that the other thing that I've done is I've combined that with a single page application built with React. And because of their

But I I came across an SD card reader

where you're not accessing it frequently. So big fan of that. That's awesome. I I'm Synology curious. Like, I started building my own

that's smaller than usual,

it's potential your OpenAI bill is gonna go up and up and up because you're getting all those queries to their API. But they have an offering, and because they already do all of this DNS and preventing bots and stuff like that, they have rate limiting. And so they give you a URL. You just replace the OpenAI URL with their URL,

I probably they recommend don't use it for production just yet, but, So if that fails,

and now you can configure your rate limiting settings. Yeah. So you don't even have to use use their AI stuff. You just it's basically like a little AI proxy that Oh, so you can still hit your own oh, that's I didn't realize they had that. Yeah. That isn't it funny how

image uploads or Scott? Just what's it called?

and all of a sudden you you get an influx of traffic on your website, from the client? Exactly. So I did a video on monorepos, and this is one of those monorepos that I showed Wes you have the React app and the Hono app living in the same monorepo that share those RPC types. So all the endpoints you define with Hono are fully typed, and then Mhmm. Wes you use that client, in your React app,

File uploads, file storage, object storage? Yeah. File uploads. There we go.

it is very close to supporting you can store in a vector database, and that allows you to

Oh, man. We're we're running up on an hour here. Let's go through and and jack the numbers up, and it's it's really I had to eventually take after two years, like, you're you're literally awaiting two years, and then you could come back after the next line will run-in two years from now. All of your memory will be reinstated. All of your variables.

which is really cool. And being able to access all of your bindings, I'm they've got that primitive. And then they have a Puppeteer API, which is something I've been using because I do, tons of files, which are are very infrequently NAS. And that's the path I'm down is just custom build. Yeah. Be kinda fun to do that, but then also, like, I'll just wait an extra three minutes for the thing to transfer, and it'll be okay. Definitely. So that's that's good. But, yep, we should do another show on Synology, me and Scott, because we, which handling incoming requests.

all the Next JS features that you would expect, step dot do, between Wes, and you can stick stuff on that object. And the next time you come back, you'll know that that object will have that data. And then there's a WebSocket API for it, meaning that and then eventually, they probably just get rid of pages entirely because on mine for a long time, but I had to stop it because I was it was eating too much RAM. Sure. Only have, like, 16 gigs on there or something.

DNS protector, but they're really a bit of, like, an AWS competitor, you Node? And will have scooping, meaning that, like, you you set up a special URL on your domain Node, They went for many years trying to be like same thing with Deno as well. Many years being like, use the standards, and I'm I'm very much about using the standards, but I'm not too concerned there. The Cloudflare Stream, this is for video. We did an episode a couple months ago on how you can do your own streaming simply by using Cloudflare r two.

Alright. So I thought, like, Cloudflare has bazillions of products, but, like, we're gonna sort of tackle explaining the ones that are, you're a web developer, you wanna build a full stack application.

you can get huge benefits in terms of of cost. It's it's relatively cheap when you have something like, like, let's say, the title of of our podcast, Twitter, LinkedIn, processing.

Yeah.

performance as Wes, where you can sometimes just get gestation product that you would typically reach for MySQL that's where you would stick your data into to Cloudflare r two. And like all r two it literally costs pennies anthropic and come back with with the data, and then save it to the database. And that's all squeezed inside of a single cron job.

and, hit the favicons

crazy things up and running with just a couple couple lines of code. I did just get a message from Scott. Scott bumped his head when he was snowboarding, which JS my greatest

setup. But then last year, I started working with Node and then learned about all the stuff they have, like, key value workers and d one. Yeah. It's crazy. It's kinda crazy. Like, for those who don't know, CloudFlare is a

filling in. And turns out CJ also is a, a big Cloudflare fan. Right, CJ? It's true. Yeah. I mean, I actually didn't use Cloudflare much until last year. Before that, I kind of only knew them as, like, DNS

Welcome to Syntax. Today, we have an episode on, we're gonna call it Fullstack CloudFlare, which is big fan of CloudFlare. We've got CJ on today. Scott's not feeling greatest. So CJ's and you can Wes things need to be so instant.