EASY API Gateway With Zuplo - Limiting, Auth, Monetization, and MORE!

if you're like me when it comes to building web apis you want to focus on building the backend part of your API you don't want to focus on all of the other details like how to make authentication work how to get rate limiting working all of those other things you know that those things are important but having to go Implement them time and time again just really isn't that exciting this is where API gateways can come into play they offer us a host of different benefits so that we don't have to go reinvent the wheel and reimplement things every time we go make a service hi my name is Nick centino and I'm a principal software engineering manager at Microsoft in today's video we're going to look at zupo which is offering us an API Gateway now full disclosure this video is sponsored by zupo but I want to tell you the story about how I heard about zupo and why I thought this was such an interesting opportunity to pursue now when zuo reached out to me they were telling me about a problem I didn't really know existed but once they started showing me their platform and walking me through the different features I had an aha moment and that aha moment for me was realizing that they were solving all of these different things that I really just didn't like spending time doing and I want to give you a perfect example of this bear with me for a second because this might not make sense right away but last year I wrote this article on generating aski art and c and it was a great success I've had a lot of traffic to my blog and YouTube channel strictly because of this topic I thought it was pretty cool I strongly consider creating a service for this because I thought it would be really cool for people to either upload an image or provide a URL and then I could give them back the asard now I had all of the code for this it's in my blog but what was challenging for me is I just didn't want to put the effort into rate limiting into authentication I just didn't want to think about that I didn't want to put this service out on the internet for just anyone to use and I knew that I'd have to go build out some type of solution to solve these problems but I had a lot of other things to do and quite honestly building out that stuff wasn't interesting and I knew it would be error prone because let's face it every time you're going to do this stuff and there's security and things like that involved it's really easy to screw it up with a subtle detail missing now when I was getting the zupo demo and having this realization I thought hey this would be perfect for me to go build my ASI art generator API that I always wanted to go build well as of last year when I went to go put this article together that's always but back to my aha moment with zupo as they were walking through the different functionality that their platform offers I realized I could finally go make this asky art generating API I thought it would be the perfect candidate for this and with all of the features that they have this is going to take multiple videos to be able to walk through all of the capabilities and do this end to end but truly they make it extremely simple with their platform and that's why I'm so excited to do this by the end of this video what we'll have in place is an API that we can access through zupo that will enable all of these other features that I'll mention and that's going to hit my server that I have running an Azure the follow-up videos that I'll create from there will talk talk about the different rate limiting authentication and monetization of the API that I put together so let's start by heading over to zup's portal that they offer so I have this project here you can see that it's Dev leader too one and I want to explain my Approach for getting started here because when I land on this portal page and I can create a new project the options that I have are an empty one or a to-do list and full transparency here right my style of learning and exploring things is not to start from scratch I love seeing things that are already working so that I can start tinkering with them a little bit and that way if there's things I don't understand I can at least see the things I'm touching when I end up breaking something versus starting from scratch and going I can't get it to work right from the beginning so starting with the to-do list is what I did even though I'm not making a to-do list I'm making an ask Art generator I just wanted to see some working examples so this Dev leader Todo one is the project that I made I'm going to click into that and this is the portal that we get to start working with our API as you might notice on the left it kind of looks like a file folder hierarchy and that's basically exactly what it is so what's awesome about this system is that it's completely hooked up to G if I end up pressing save after making modifications right there in the bottom left what ends up happening is that it goes and publishes it to get and then from there the deployment runs and it's almost instant right it takes a few seconds and that way if you're making documentation changes to your API making function changes to your API anything like that it takes place almost instantaneously the developer experience for this is ridiculously good I think a lot of us are used to making changes pushing them up having to wait for a pipeline to run it might take minutes depending on your organization or something that could take hours I know that's going to be in extreme situations right but having this immediate feedback where we can do something like adding a policy directly into the request flow and having that take place seemingly immediately is incredible so the place that I started off was clicking on this routes. o. Json file and when I made this originally because it was a to-do list application there was a lot more routes here so I've since gotten rid of them because they're not applicable to this demo truly I think that was the right move for me because I got to go look at what was there and see the different examples that they had to work with now for me the way that I wanted to approach making my ASI art API was not to use C at all initially what I wanted to do was take that c code and say I'm going to jam it all into typescript so that I can run it right on the edge I want to have it directly in zupo so that I don't have to run a server at all so in order to make a route where we can handle the code directly in zupo I go to add route and then when I switch the Handler here from URL forward I can select function from there I can press this menu to pick a module and what I'm going to do is add a new one right here and I'll give it a name like test for YouTube so I'll create that and you'll see that on the left hand side it added this test- YT file and it's already added it here so we have some default code with a a bit of a default route saying return what is up awesome so that rote that I just added I think it said SL path one when someone hits the zupo endpoint with SL path one it's going to call this function that's written in typescript so I was thinking perfect now my job is simple all that I have to do is go take that c code that I have working and put it into typescript but there was one problem that I wasn't prepared for and that's that I suck at working in typescript and it seems pretty simple and for anyone watching this who knows more about typescript you're probably rolling your eyes I'm just admitting my fault here but the challenge with an ask Art generator is that I want to be able to support multiple image formats and as soon as you go down M path you have to look at including modules zupo by default has some modules built in that we can use for node but the problem was that I needed to include external ones that they don't have directly on their platform already that is totally supported by zupo but when I was going to follow some of their instructions I went ah you know what that's a little bit over my head right now for what I'm trying to do and I already have the code that does this in C all that I have to do is publish it to Azure and I already have a server there so it would take me just a few moments to be able to do that now the cool part is that I can still show you that on YouTube this is where I would have gone to add that code all that I'd have to do is convert my C code to typescript get the right module have that supported and then I could take an image and I could go return the askart for it it's just a string that's the response but because that was just a little bit over my head I decided cool let's go do the alternative route no pun intended so if I go back to here this is a route that I've already created and you can see that I gave it a little description gets asky art for an image at a URL so I decided the route that I wanted to have would be called asky for image URL and it's going to take a post request and that post request will have the URL inside of it and the reason that I did this is because my server is able to take a couple of options and I'll expand upon that in the future but some basic points that I want to get across or that you might want to be able to scale up or down the image that you're providing because if you have ASI art being generated for something that's I don't know a 4K image or greater that might be a ton of text and you don't want it so I wanted to be able to make sure that I could truly have some post data go through make it to my server and do the work in the bottom here I have this URL Handler and that's going to be able to rewrite the request that's coming in and pass that over to my server that's running in Azure so I I can give it a completely different URL that's separate from the one that people would be hitting for zupo which is awesome and another thought that I had was that because currently I have my own server technically I could start creating different endpoints here directly in zupo and maybe instead of having a post that's accepting uh you know Json text as the body instead of doing that I could maybe create a new URL and try it out where the query parameters uh in include the URL that you want to convert the image for so I'd be able to do all of that directly in zupo transforming that into a post body and then I could send that over to my server and then I wouldn't even have to touch any of my C code again so that's one of the really cool things that we could do with an API Gateway and zupo lets you do it directly in this portal which is super easy so with what you see on the screen right now where I have this new route that's doing a URL rewrite to my server it's basically almost done this allows me to have zupo support to go build out the other things like documentation rate limiting I can do authentication so I can make API keys that people can use and that way they're identified for their rate limiting and from there I can also monetize my API so a whole bunch of different functionality that I can start to stack on top of my API but there was one more catch that I was concerned about and it's funny because I reached out to zupo and I said hey I don't know if you have a good pattern for this but I wanted to make sure that if I put my server out there on the internet it's running in the cloud how do I make sure or how do you guys suggest that I end up allowing only zupo traffic to go into my server and they said oh that's simple all that you need to do is have an API key that you can use and pass that in the requests and I thought duh and the next thing they said was and of course that's in our intro documentation and I felt like a bit of an idiot at this point because of course there's documentation I looked at it very briefly in the beginning but like many of us I got too excited and just jumped right into the portal so there was one more step I had to take to make this a little bit more secure even though I haven't talked about the rate limiting and authentication stuff that will come later but I wanted to make sure at least between zupo and my Azure server that I had my bases covered and that's going to be with these policies so if I press this policies drop down here you can see that I've gone ahead and added in a policy directly in this request path and we can add policies on the request path and on the response path as well now this is super cool but if I press the add policy button they have tons of policies built in for you right away and you can write custom ones too but I want to stop here for a second because for someone like me who just doesn't want to have to deal with coding up these policies this is a huge time saer it reduces so much cognitive load for me that I don't have to go researching online the best way to go code this up in C or whatever other language I happen to be using probably C if we're being honest here I don't have to think about how to go figure that out I can just say what do I want I want basic off I want cashing I want something else I can just pick one of their policies and I'm not going to walk through all of them but look if I scroll through look how many are just built in for us right away like this is sweet for me I needed to be able to set a request header because I need to have zupo ADD in an API key for my server and that's not to be confused with an API key that you might need if you wanted to access my route through zupo this is purely one for my backend server that zupo is routing to so I created a key and then I needed to use this add or set request headers to be able to do that now if I go open up the existing policy here's what it looks like right so I didn't have to go write code we just have this simple Json config here and you can see that I'm just pulling in an environment variable now at this point I have a route in zupo that someone could hit again no authentication and rate limiting yet but someone could hit that zuo route it will go to my server it will use an API key in the request header get the ask Art as the response and then pass that back to the caller who was hitting zupo I think for me that one of the most exciting things was just how simple it was to click through and do this because for me this kind of stuff is absolutely not interesting to me it sounds kind of funny I know but I like spending my time writing the logic for my different Services the routes I want to have I just don't want to spend time doing this stuff I know it's critical I know we need rate limiting and authentication and all of these things that are here I know they're important I just just don't want to spend the time doing them and I don't want to be responsible for messing up a subtle detail for something that's been invented already that I shouldn't have to go ReDiscover the other thing that was super powerful about this that I really enjoyed is just how fast it is to press save and have everything deployed right away and I'm checking here I added a path-1 route here and I can just show you like I don't need this route but let me just save it and show you how fast it happens so building new Gateway you can see in the bottom I'm not fast forwarding this I talk the whole time it tells you the time it took it took 5 seconds it's done there's a new route available like this video has been edited but like I talk the whole time right like it gave you the time that's how quick it is there's a new route to me the speed and ease of use are really what makes this work okay so this video would not be complete unless I could show you that this route was actually working I've hooked up zupo like I said to my server that's running in Azure and I should be able to call the route so I have Postman opened up here we're going to be doing a post request here I have the URL for zupo that is my endpoint that I've added you can see the asky for image URL that's added right onto the end here so that is the one that we just made and like I mentioned because it's a post request I needed a Json body that would have the image URL I ended up doing it this way as I mentioned earlier because I have a whole bunch of other parameters and I didn't want to put them as query parameters to start I will try adding another end point to see if I can transform it cuz I think that would be a fun experiment but I have this image URL that's pointing to a smiley face that I found on the internet so if I press send with this post we should get some asky art coming back and as you can see it might be a little bit difficult because it's not formatted nicely but this is truly some asky art for a smiley face it's just that it's not split across the different lines you got to trust me on that and that's my intro to working with zupo I personally found this was extremely easy to use it was really exciting to be able to get set up on the platform and now be enabling all of these different features like rate limiting authentication having some nice API docks that I can go create all of this is awesome and at the end of all of these videos that I'll put together I want to turn on monetization for my API so I highly suggest you go check out zupo I'll have links and everything in the comments and the description so you can go check that out as I mentioned this is sponsored by zlo but I wouldn't be promoting it if I wasn't excited to go use it myself now when the next video is ready and I start to look at things like API documentation rate limiting and all the other fun stuff you can go check that out here thanks and I'll see you next time