Protect Your API With Rate Limiting | Full Guide (2024)

hey rate limiting your API Endo is got to be one of the best decisions you can make to prevent abuse and trust me man apis get abused for the stupidest reasons sometimes there are no reasons sometimes people just like to spam your API and to not go bankrupt because of it especially if you do AI right cuz AI is super expensive to run as well as for any other public facing API that you don't want abused rate limiting is the way to go is that right you want to you want to join us in rate limiting yes okay so we're going to rate limit together with my cat today can you see her she's oh god oh no in this video two things are going to happen first off we're going to rebuild one of the most popular apis in the world a Jason placeholder API handling like 3 billion requests per month we're going to rebuild the basics of that as an API to demonstrate rate limiting on sounds complicated it's not it's just ajacent API and then we're going to implement rate limiting together okay so before we get to the inner workings of rate limiting and why it works let's quick see why would you even want to rate limit in the first place just why and well the basic idea is to prevent prevent API abuse right if people completely spam your API endpoint um depending on what logic it handles under the hood that might get expensive right if the platform where you host the API is going to build you a lot for all those requests especially in serverless environments well then it's in your best interest to rate limit your end points at least the sensitive ones that you never want spammed so here's the basic idea behind rate limiting okay we're going to start here first off we're going to check the IP so a user made a request to your endpoint first thing we're going to do is check their IP address and then check how many requests has that IP made by the way all of this is going to happen in our own database in this video it's going to be pretty neat you're going to see that later and then we're going to do a check depending on how many requests they did are they still allowed to make more requests so for example we could allow maximum 500 API requests per like 1 minute for example per minute right if we say that's our maximum then we can enforce that maximum right here and if the user already has made too many requests well then we're going to block the request we're not going to let it through in this case we're going to send back a 429 HTTP error you're making too many requests bro stop it stop making so many requests and in the other case we're going to say yep everything is fine with your request you're still under the limit of what you allowed to do so we are going to increment your um request count so we can keep track of how many requests you make um but we are going to let the request through and everything is okay so the basic idea is we can enforce a limit per time on or API a maximum request amount per time interval like seconds minutes hours and this is totally up to you as well as the actual amount that you allow everything here is totally up to you it's really just about enforcing those limits and making sure that um you never get build more um from your API because somebody is dsing you because somebody is abusing your API manually spamming it root a SC script to spam it and so on because even if you don't think it can happen it can right people are sometimes just it just happens sometimes even if you write like good software if it's a fun project it has happened so many times where I saw that people um got their API spammed for no good re I mean there's never really good reason but for no reason whatsoever just some random dude spamed their API and it just resulted in some horror bill on netaly on versel and so on and it's just it just sucks right it's just preventable so what we're going to do just learn how to rate limit to prevent this and as a example we're going to use a Json or we're going to write a Json placeholder API together that is serving three billion requests each month and we're going to write this together and then rate limit it um to learn how that works right and everything we'll do right here in or CMD this is where we're going to start this is going to be pretty simple you're going to learn hey rate limiting is actually pretty simple and it's also fun to learn um so let's zoom in here and get started in rate limiting or API I'm going to navigate over to my desktop because that's where I want the file to be and I'm going to make a new directory and let's call this rate limited D API if you want you can call it the same thing by following along here and hit enter and then let's CD into the rate limited D API and say code Dot and that's going to open up this um folder inside of vs code here on my left hand side okay so once we are in here first thing we're going to do is open up the terminal and I'm going to zoom in so you can see everything here easier first thing we're going to do is say npm in it- y now we could just leave the- y away but it's for it basically says yes to all the default options creating or package.json right this is going to be the basis for our API and to set up our typescript config file we're going to say TSC D- in it and hit enter and that's going to create our tsconfig dojon and just to make your life easier I prepared everything here of course inside of a GitHub repository and also inside of a cop copy paste list um so I'm going to include something in the copy paste list called the TS config it's going to be way up their first item and you can simply grab this TS config and paste it in here um this is not a typescript course right we don't really care about why this works and basically it just sets some targets that we want to transpire to right that we want to run our typescript from some best practices like the no unchecked index axis which is a really good idea to keep true in your projects but it's off by default and just generally to ensure some code quality in here um that's basically it right we can just copy paste it no need to write everything here or self perfect and then for the actual server like the API endpoint right we're going to create that inside of a index.ts file this is basically the um server that's going to handle all the requests Now to create this API endpoint we're going to use a tool called horo JS I really like this framework it's a fast lightweight web standards following framework running on any JavaScript runtime which includes um Cloud flare workers where we're going to deploy this app which is really fast and really cheap as well um and the syntax is just nice to write so we're going to use hono for this so inside of our project let's clear the terminal and then say pnpm install or npm install or yarn ad doesn't matter which package manager um you use for this and we're going to say hono and hit enter hono by the way if you're wondering it has gained some massive popularity recently let me show you that let's navigate over to npm uh you can see right here uh 180,000 downloads wow dude uh that's a lot it's been gaining a lot of traction which is nice to see because the syntax is just uh really nice to write and it's super easy to deploy this to Cloud flare workers as well so to learn how rate limiting works there's basically two steps that we're going to do right the first step is going to be um creating the API so it's publicly accessible so people can request the data from the API and then the Second Step Building on top of the first step is going to be actually rate limit oops limiting the end points right so first off make the API publicly accessible deploy it and then secondly make sure that it doesn't get abused and implement the actual rate limiting and you're going to be surprised literally how easy it is to set an API up using hono let's do it together right now let's zoom in so you can see this easier so check this out right we can say the const app is going to be equal to a new hono which which is a class and by the way Pro tip if you ever get that your Auto Imports in vs code don't work cuz right now it should work right it's a class we import from the library if they don't work hit control um shift and P and say developer reload window and hit that or hit enter on that right that's going to restart our vs code instance and now check this out the Auto Imports all of a sudden bam like magic they all of a sudden work uh which is really nice and I'm going to disable GitHub C pil it for this dis oops disable completions they are kind of distracting we don't need that and let's implement the most simple form of our API that's going to be app.get so whenever a get request is made to the endpoint under slash todos right that's what we are going to call the API endpoint in that case we get access to the C the context from hono in the Callback function and can handle the request with any logic that we like for example by returning the C Json which is just a helper so that lets us return Json pretty much um and then here we can say for example uh let's just say an empty object for now we're going to put something in there here in a second and now to make this Deployable we can simply say export default app at the very bottom and just like that we literally wrote or first API how cool is that now to preview this locally we're going to say pnpm install Wrangler which is a tool made by Cloud flare that lets us easily deploy and also in development preview this application so if we take a look at npm and go ahead to Wrangler and we're going to see what it is a CLI for all things Cloud flare workers it's a pretty neat I use it a lot especially when deploying to Cloud flare it's by far the easiest way there is um with a quick start and so on and it's like at half a million downloads per week uh which is pretty solid right so we're going to install that minus d as a development dependency because we won't need that in production and hit enter and one that is installed that shouldn't take very long especially with pnpm because pnpm is a very fast package manager and let's go ahead into our package.json and inside of here we can define a Dev script Dev to locally test out or API endpoint and that's comma separate this from the existing test script and in here we're going to say Wrangler Dev and then the path to our um server file which for us is just index.ts if you had a source folder that would Source uh like this Source / index.ts but we don't have it we just have it at the top level so we can leave it like this and then already try out if this works let's run yarn Dev that's going to say rangler Dev index.ts and then it's going to start or server up on Local Host so if we just grab this endpoint what do we expect to happen well if we navigate to/ todos then we expect to get back an empty object so let's verify if this happens let's navigate to the URL that Wrangler gave us and then SL to ruce hit enter and there we go perfect our API is running locally and we do get the empty object um that we expected so for example if you tried anything else like uh the message is going to be hello and then try that again navigate back reload we're going to get the message hello meaning yes our API definitely works uh very very nice perfect okay that's going to be the basis for our API and now we can actually start in writing or main endpoint and what the main endpoint is going to do is pretty simple right it's be like the to-dos but we will accept a something a bit different we will accept a slash and then colon ID so the goal here of this syntax right is if we make a request to um or ai.com too/ one then we expect one to do s Json to be output from our API just like this and just like the Json placeholder example that I showed you in the very beginning right and to achieve this kind of syntax um in horo This Is How We Do It fully types Save By the way because we have this Cen ID in the um endpoint URL what we can do now is say cons too ID is equal to c. Rec which means request do Pam oops Pam as the singular and then s the string we get full type safety you notice that how cool is that right because we have the callon ID right here we get full type safety for the c. rec. perm that is beautiful right and the to-do ID is going to be be something like one or two and so on but still as a string right because URLs are always a string this one even though it's like a number um it will be received by hono as a string so we can convert it to a number saying cons to- do index is going to be equal to number to do ID and that's going to give us back basically the same thing but as a number that we can now use to pull data from a local Json file cuz that's just by far the simplest solution so let's create the data file data do Jason that our API will actually pull from and this is going to contain nothing else than the actual to-dos that we want in our application right so if you know anything about Jason you know we got to start with um an empty object here which is just JavaScript object notation right that's what it means um and inside of here we can define something called to-dos and these to-dos are going to be an array we're just going to Define three of them very very simple and that we can use in our API to make requests so the first to do is going to be an object and the ID property we're going to set to zero this is the zero index to do the title is going to be um bu groceries and then the completed status is going to be false so this is either very similar or actually the exact same thing as the Json placeholder can go under SL too SL1 I think that should work um okay so they also have a user ID in here but basically same thing right this is the exact same thing that or API will also do with the data we Define right here in our Json file as easy as that right and now let's define two more so let's comma separate the next one and we can simply grab all of the first too and hold shift alt and arrow down and Bam we just copy and pasted the same thing down in vs code super handy shortcut if you didn't know it the idea of the second one is going to be one the title is going to be walk the dog and then the completed we can set true because let's just assume yes we already did that today and let's do that one more time sh alt Arrow Down Bam copy and paste it down with the ID of two the title is going to be read a book and we can set the completed status to false CU I have the reading comprehension of a second grader and I'm unable to finish this task we are done here and now let's navigate back into our index.ts because what we just did is set up the perfect basis for our API to now use this data and if you're wondering how do we import this Json file into our API to be used here very simple actually we can say import to do this as a named import um from and then do/ dat. Json as easy as that can import this Json file into our API and now use it to answer the request made to or API endpoint right if you remember what the to-do index is this is like one this can be two three and so on and so on and now we just want to grab the corresponding item from our hardcoded to-dos right here and in order to do that let's say cons to-do is going to be equal to the to-dos at the index of to-do in index that we already found out and now the thing is this could be undefined in case the to-do index is something that we can't use to access the to-do like if it's any string if it's four well then there is no to-do at the index of four right we will get an undefined to-do right here so that's also say or or an empty object so we always return something right it's always an object and that's literally it we can now say return C do Json and pass back the to-do um from our API endpoint and we can get rid of the old return statement altogether perfect that is literally the most simple form of our API and I think Wrangler should automatically reload but let's just do this again um let's clear the screen and let's say yev to restart or local um kind of API that we're hosting and let's try this again let's navigate to Local Host SL too slash1 right so this is the address that rangler gave us it's under Port 8787 and let's hit enter and perfect we get or Todo ID one title walk the dog completed true perfect we can also access the zero Todo and the uh two to-do perfect and if we type three then we're going to get an empty object because of course that to-do doesn't exist perfect very very nice that is the basis for our API that we can actually go ahead and rate limit now so the idea here is going to be that there's going to be a user and there's going to be your API and let's say that you allow two requests to be made to your API in 10 seconds right 10 seconds um and then all subsequent requests made by the same user that we see by IP by the way um is then going to be rate limited so if they make three requests within 10 seconds then the last request will actually not go through it will be blocked it won't ever reach your M API it will be rejected beforehand and we will return a 429 status um which means too many requests by the way uh HTTP 429 uh to many a request there we go that is the status code we're going to use to send back to the user to let them know that they are being actively rate limited that they are making too many requests right so this is the idea of how it works and implementing this is surprisingly simple and to do that we're going to head over to up stash.com because we're going to use their reddest database and inmemory data store and to make this happen and give me one second I'm going to log in here there we go that's going to take us to the dashboard now before we continue I want to be very clear I work at up St right that's uh how I'm able to do the second YouTube channel I I work here but I work here because it's a product that I use personally for like the last two years way before um I started working here and because it's just a genuinely um really nice solution otherwise I wouldn't be doing this video so um I want to be transparent to you yes I work here but I also think this is the best way to do it and because we're going to use a reddest database by the way click the create database uh button under the reddest tab right here to get started with this um because we're going to use reddis to this for this which is an inmemory data store well this thing is going to be pretty fast right compared to if we were using a relational database or something like that which for rate limiting in my opinion H doesn't really make sense can you yes should you H probably not reddis is probably the way better uh approach to do this so I'm going to create a new redus database together with you right now let's call this rate limiting um you can delete this after learning how to do this right this is just temporary uh Regional is fine we don't need a globally distributed replica database for this uh we're just learning how this works right and as the region we are going to say let's say Ireland because that's closest to me and then choose whatever is closest to you of course and then hit create that's going to prepare our database and give us the credentials right here under connect to your database that we need um in order to well uh connect to our database now for the data that we actually care about let's go over to the JavaScript Tab and just cuz it's easy to see the values here and oh actually no we can go down to the rest API section right here we can simply copy and paste these values even better right even easier um so what we're going to do is first off grab the up Rus rest URL and hit copy on that that's going to copy it into our uh kind of what is it called like the the the thing where you paste from like dude how can I forget the name of that like like dude if I press control+ V now oh the clipboard oh dude there we go the clipboard uh it it will copy to the clipboard and we're going to put it inside of a EnV file that we are going to create at the very root of our project so not in any subfolder right and this is where we're going to say um the up stash underscore rore restore URL is going to be equal to and then simply paste in the URL we just grabed from up stash and same thing for the up red rest token right we can simply copy the name for now not the value go into our project and paste in the name is going to be equal to and then go back over click the copy icon and also paste the value right in here as it is and hit save on the EnV file and while we are here we can do one more thing and that is create one more file that's going to be the Wrangler do Tomo you already learned what Wrangler is it's a tool for deploying to Cloud flare workers and the thing is in deployment Cloud flare also needs access to these um EnV values right here but it doesn't have access to the EnV file that's a nodejs thing so we need to declare these values separately in this file right so this file takes only a couple things first off is the compatibility uncore date and I just got this from the documentation I'm not a wizard I just don't know this automatically you can just look up what the file needs it's really really simple and we're going to say 20244 8 so it's a very recent um release and the name this is what's going to appear in your Cloud flare dashboard your project name for this it can be anything let's call this placeholder D API and because I literally already have a project named that I'm going to suffix this with um-2 but you don't have to do that this is just cuz I already have a project with that exact same name and then as the vars the variables right this is the environment variable stuff we can simply go over into ourv file grab everything in here paste it into a anger. toml and now one important thing is let's wrap these in quotes right in double quotes the actual values and I'm going to space separate them them from the equal sign just so it looks better and but that's important to wrap them in quotes in the EnV we don't have to do that in the Wrangler toml uh we do just syntactically it's um a bit different all right we can close out of the Wrangler toml close out of the EnV we can close out of anything basically except the index.ts then we can also close the sidebar so our screen is not cluttered perfect okay so now let's get started and actually rate limiting this endo and the way we're going to start doing this is by first declaring a cache let's say cons cache and this is going to be equal to a new map and that's already it right you're going to see why this is important in like a minute um I'm going to get to this trust me for now let's continue with our actual rate limiter so what we're going to do is write a simple class for this so we're going to say class redis rate limiter and then inside of this class first thing we're going to do is declare a static instance and this is going to be of type rate limit now you might be wondering Josh where does this type that we're using rate limit come from and the answer is that up stash provides a simple SDK over the reddis SDK right and it's called pmpm install at up// rate limit so it's just a very thin wrapper around the actual reddis database and also uses our own redus database to rate limit people under the hood just a nice utility we can use to not Implement all that logic or self right we we can use it we don't have to but we are going to use it because it does save us time and then once again Pro tip if your Auto Imports don't work click uh or hold shift uh control and P and then hit developer reload window might work for you doesn't work for me uh let's restart the window and then we should be able to import or rate limit type declaration right in here and now we're going to get into something called the Singleton pattern we're going to declare this class once to later reuse it in our um API right this is called the Singleton pattern Singleton pattern I'm not going to go too deep into it and no we don't want that um B it's just a software development pattern you're going to see a lot in more like Enterprise apps I feel like because it is more for performance optimization um let's see single is a creational design pattern that lets you ensure that a class has only one instance while providing a global access point to this instance uh sounds a bit abstract but I think the image is all right basically instead of every time or API is called um creating a new class we only ever um create one might sound a bit abstract you're going to see exactly what this looks like let's just write code okay the static get instance oops that allows us to in get instance that allows us to reuse this instance is going to be a function right and this is going to get the context and the type for this context we can simply hover over the C from hono grab this and simply paste it here bam there we go we can import all the types from hono uh like the context for example we can import the EnV type and also the blank input right that's it that's how we do the typescript Declaration easy and now for the Singleton pattern so if we don't have an instance if not this do instance in that case we know we can create a new instance but in the other case um to make this an actual singlet pattern to never have more than one class instance we can simply say return this do instance right so we if we already have initialized this class once and then saved it in the instance right here then we're simply going to return it no need to create a new rate limiter in that case right this is just a simple optimization thing honestly you you don't even have to to do this but I think it is nicer um to do it I want to show you the proper way of implementing this and this is how you do it so right after we're going to grab two things from our EnV so from our environment variables right and to do that we're going to use the EnV helper that is provided to us by hono from hono adapter right and in here this is a function we can invoke and pass it DC the context now to tell typescript what it is that we're grabbing from the EnV cuz it Doesn't Know by default how would it right we declare it inside of a completely separate file it doesn't know that these values exist we can tell typescript in the form of a generic what these values will look like this is going to be the redis oops red isore URL and this is going to be a string and then this is going to be the red isore token and this is also going to be of type string and that allows us to Simply type save these structure these values from the function invocation right here and so we get access to these values and can actually work with them to create or redis instance now for this redis instance we're going to install one Little Helper and that's pnpm install at up// RIS which is basically the wrapper around redis database access right if we go to up Rd is let me show you what this is um this is an HTTP based client and to Simply interact with our database damn that's quite a lot of installs by the way um nice uh anyways this is what we're going to use up Reddit to access or redest database and then we can clear our screen and restart or development instance of the API now what this allows us to do is say cons redis client and this is going to be equal to a new redis and this redus once again Auto Imports don't seem to work that is fine let's restart or mvs code window and that should fix the Auto Imports and it didn't oh it did okay so red is from up/ rdis however one important uh thing that we need to change right now is by default this will expect the up/ Rd is this will expect a node.js runtime we're going to deploy this to Cloud flare workers therefore we need to import the redus from up stash redus Cloud flare and not the um default import and that allows us to now create the redus instance as the token we're going to pass in the Redd isore token and as the URL we're going to pass in the red isore URL perfect that means we can now access our actual redest database to get started with the rate limiting and now we want the utility for rate limiting that just makes it easier for us of course again we could do this all manually with the reddest client we don't want to do that we're going to say const rate limit is going to be equal to a new rate limit class that we're going to invoke and in here we're going to pass in or redest instance that it should use under the hood which is or red is client the limiter and this is going to be a rate limit do sliding window this is the algorithm we're going to use under the hood um to make theate limiting happen and this is where you define how many requests you allow in what duration so for our example we're going to allow 10 requests in the span of 10 uh seconds right that's how we do it this string will be interpolated as or interpreted as an actual number by the library we can just write it in natural language like this and lastly the F meral cache is going to be the map that we have to find and basically if we hover over this we can see what this does if enabled the rate limiter will keep a global cachee of identifiers um basically while the function is still hot the rate limiter can block requests without having to request data from Rus saving time and money so basically we are making sure that we benefit from the serverless environment um while this function is warm this is going to exist and we can cach our values in here um instead of using redus right so it's faster it's cheaper it's just a good idea to do uh you don't have to right you don't have to pass this totally fine if you don't but it's just a good idea and lastly we're going to save this instance to this do instance is going to be the rate limit and finally return the this do instance right so this is the Singleton pattern I talked about if there is no instance we create exactly one um and save it as the instance and then the second third fourth time or API is called we're not creating the instance again but we're just drawing from the single instance that we created in the first invocation and by just returning that instance and not creating a new one that's why the Singleton pattern is so nice that's why we're using it and now there's multiple ways of going about the actual rate limitation we could do this on a per route basis but a much nicer approach much more reusable approach is the following we are going to write our custom middleware for this we're going to say app.use and this is going to take an asynchronous um callback function and inside of this callback function we get access to two things the context we're going to call C and the next function we can um in V to actually pass the middle to end the middleware to pass the request onto the actual API route right if you've ever written middleware that makes a lot of sense to you so the con rate limit we're going to Define in here is going to be equal to the reddis rate limiter do getet instance this is going to give us back or redest instance if we pass in the context object of course that's going to return us the rate limiting instance that we can now pass on to any API that we want um by saying C do set and we're going to set the rate limit to this rate limit there we go just as easy as that and now to make this completely type save the cherry on top right because it does work in hono and we're going to go to the very top of the file and we're going to say the or actually let's do this at the very top right below the import statements this is where it belongs we're going to say uh declare module and then hono and inside of here we're going to oops uh we need to spell this right declare there we go and inside of here we're going to say interface context variable map so this is something honu provides to us that we can simply overwrite to make the context basically values we Define in the middleware and then make accessible in our API rods in all API rods because we've did it in a middleware this is where we can Define the types for them to make this fully typ safe right in this context variable map and instead of here we're just going to have one thing that's going to be the rate limit of type rate limit you can probably guess right and just like that hono now knows that we will make the rate limit accessible in our middleware that later allows us to use it in our actual API routes all API routes where this middleware runs previously and we can simply say now await next to pass on the request to the actual um API route from the middleware so basically what happens in a kind of visual way is we have our middleware this first runs and then or API route runs but in the middleware we actually imagine this is the request right this is the rec and this request is incoming from the user bam first the middleware runs and the middleware now attaches the rate limiter right the single class that we um have to find to this request bam it's on the request and now the request goes on to our API route with the rate limiter attached to it right that's what the um that's what the C do set is for we are attaching it to the request to make it accessible in the API road so we can now call this rate limiter in the API Road the reason we're doing this we could also do this in the API rout defining the rate limiter here and but if we have multiple API rades right then the rate limiter will be accessible to all of them because it's on the request already instead of us having to Define it here and here and here and every time you need a new API rod that's just not very usable this is a much cleaner way where it's immediately accessible um to all of them so that's what we're doing in a visual kind of way to make use of this rate limiter very very easy inside of or API route that's going to be const rate limit is going to be equal to c. getet and because this is fully types saave now we get the rate limit string right here and that gives us back a rate limiting instance that we created and because we are rate limiting by IP address by user IP we also need access to that IP and that's going to be the c. rec. ra do headers doget and now we're going to get a header from the request that cloudflare makes available to us which is the cf- connecting D IP cloudflare gives us the IP of the user making the request that we can now use to rate limit that user and to do so we're going to destructure the success property from await rate limit. limit right it's as easy as that and we can either limit the IP or if the IP is for some reason null right if it's for some reason not available we're going to say Anonymous so the person is still going to be R limited um but ideally through the IP and mostly that's always going to be there and of course in order to be able to use the weight we need to mark this cack function as asynchronous perfect and now what is the success value whether the request may pass or exceeded the limit okay so what that means is if the success is true if success in that case the user is allowed to make make a request to our API endpoint so in that case we can simply copy and paste or cut the logic we already had and paste it in here so only users that are below the current limit um are able to get or to doce and else in the other case of course the user is not allowed to make the request they are already um passed this is like the third request if you allow to right it's too many so in that case we're going to say return c. Json and we're going to say as the message in here too many requests and um to be kind of correct about this we're going to pass the status as 429 which is the HTTP status for too many requests right you probably could have guessed I told you earlier let's save this and let's see if this works so we are right now allowing um I think it was 10 yeah 10 requests per 10 seconds so let's try out if this works we have our uh local server running let's restart it to make sure we are the freshest version and then let's try this out in our browser by navigating ating to the todos and just reloading the page 10 times so one oh oh dude we get an error okay so let's see what's the problem Oh and I think we misconfigured the EnV variable so we get an error of starts with and normally that is uh because we called the value in ORV file something else than we did right here so right here we are expecting there to be a red isore URL but I think in or EnV file yeah we called it up Rus rest URL um so let's change that let's change this to redis URL and then the token to just red isore token like that hit save and then let's restart our server and hopefully that works now and no we get the same error okay I'm going to take a second to fix this and then let you know what the problem is okay so the problem is these values right here in orang angular toml of course these also need to be same thing red isore URL and then red isore token right so what we are expecting in our index.ts file um let's stop that let's clear the screen and let's restart our development server and hopefully that will work now and it seems like I also did a typo with compatibility this should be compatibility oh okay yeah dude English is my first language anyways uh let's change that it needs to be compatibility and then uh we can see perfect your worker has access to the following binding with the variables exactly what we expect and now hopefully if we restart our server then there we go and we actually get the data now perfect okay now let's try this this was 1 2 3 4 5 6 7 8 9 10 11 12 okay perfect there we go message too many requests um and we should get back a 429 error in our console okay so 10 seconds have passed again so I need to spam this again there we go um status 429 too many requests as the message right so let's click on this response message to many requests perfect already limiting is working and by the way especially in the case of a Dos where you get a lot of requests really really fast um is every request going to go to reddis and cost you money for the reddis instance no because we have a cash in here we're basically utilizing the serverless runtime for or Advantage right what I kind of teased about earlier how this works this cache um we're basically caching as much as humanly possible so only what really needs to go through tetus um actually goes through tetus and there or we can even in a DS case where we get so many requests at once um remain very very cheap and not go bankrupt because or API is getting abused right and as the last step we can do is if you want we can deploy this live to the web together um and we also do that using Wrangler all right so we can write a deploy script and this is going to be Wrangler deploy D- Minify and we can pass the index.ts as the location of which we want to deploy now it's automatically going to use the name that we um defined in our angler toml which in our case is this one right here you could of course also pass that as a flag if you wanted to like D- name IDK I don't know just as an example but since we already have it defined in or Wrangler toml we don't need to do that great and what's left to do now is to say yarn deploy and hit enter that's going to run our deployment script and deploy this actually to Cloud flare workers assuming you're logged in if you're not logged into CL flare workers that's going to ask you to log in and then you can do the same thing basically it uploaded or um endpoint right here it uploads the entire file and then gives us the URL we can use to um access this API on the web so let's paste this in U placeholder api-2 doj coding. workers. or it's going to give you your url right and then we're going to go to SL too SL1 and hit enter we got the Tod do perfect let's retry this a couple times and then we should get rate limited eventually there we go message too many requests and then in the network tab uh we can see that we get well now the 10 seconds expired again we can make more requests because of the algorithm the sliding window that we're using and but if we spam it too much we're getting a 429 um too many requests beautiful man and if you want you can fully customize this to your ons you can adjust the amount of request you can make or the user can make in the time frame totally up to you how you want to Define that you could even even change this per API rout right if you want a different um rate limitations um this is super flexible whatever works for you also man I really hope you enjoyed this that's it right that's as easy as it gets for rate limiting I I really enjoy this and it just works very very nice to see um and I hope you enjoyed this video following along and learned how to properly rate limit your end points so in case of abuse in case of Dos uh you're uh covered right cuz that's the main reason why we're even rate limiting or end point so we don't suffer from API abuse very very nice hey I really hope you enjoyed this video and learned about rate limitation this is a really simple like example right we just returned Jason from a file it's super simple and I think it really well illustrates the point of r that that was my cat anyways I hope you enjoyed this as much as I did please stop doing that and um that's it for the video you can use rate limiting in so many occasions in your next JS app in any other kind of serverless environment that you're in and I really hope that you find this as useful as I do okay that's going to be it for me for this video I'm going to see you in the next one until then have a good one and bye-bye

Channel: Josh tried upstash

Views: 4,059

Keywords: rate limit, cloudflare, cloudflare workers, wrangler, deploy, hono, honojs, hono js, redis, upstash redis, ratelimit, upstash ratelimit, nextjs ratelimit, api ratelimit, rate limit api, nextjs, serverless, typescript, josh tried coding, joshtriedcoding, josh tried upstash

Id: sdYcxzTjdbo

Length: 41min 39sec (2499 seconds)

Published: Tue Apr 09 2024