Build an API Proxy Server - Hide Your API Keys, Rate Limiting & Caching

[@TraversyMedia]

I forget if I mention it in the video or not, but you can also use serverless functions if you don't want to create your own server. You can use a platform like Netlify, AWS, Vercel, etc. I may do another video showing that method as well. Here is one I did 2 years ago on Netlify serverless functions - kzbin.info/www/bejne/mqOtqICieZ6AoNE

[@sgtalexxx]

Hey Brad, please make some on AWS since it is "hot topic" at the moment. Many thanks :)

[@aldrinjenson]

Hey Brad, can serverless functions also handle rate limiting and cache control as they are stateless and each request may go to different instances..?

[@vcaptur]

Please do

[@diatm1506]

Please make an instructional video Nx Angular NestJs (NAN) and Prisma please

[@okkaraung9512]

does someone know what color theme extension he is using ?

[@judevector]

Wow 2 years later and this is still a masterpiece, learnt alot from you You have really inspired and helped me in my tech journey

[@ramsimon8045]

This dude is just such a great guy lol I'm not even into programming/software engineering anymore but I still watch him just because how genuine and thoughtful this guy is, you go Brad!

[@TraversyMedia]

Thanks :)

[@bigtaskat-hand4742]

May I ask why you're not into programming anymore?

[@ramsimon8045]

@@TraversyMedia 😊

[@ramsimon8045]

​@@bigtaskat-hand4742 Sure, after graduating from a bootcamp(Hack Reactor and I was at the top of my cohort) I realized this is not what I wanna do with the rest of my life despite being pretty decent at it and having multiple offers from big companies. For one, as idiotic as it may sound I didn't quite realize how much time I'll be spending crunching on a computer screen typing away for hours no end and killing my eyes and effectively end up making less than I was making at the time and it made me realize there is just so much more to life, plugging away my precious and finite time at some computer program wasn't for me. For me, the goal never was getting a job or changing careers, I was doing pretty well before too, I just wanted to embark on a new journey cause I always wanted to be a software engineer, but didn't quite realize I didn't want the "corporate" side of it, I only enjoyed coding/solving problems, not doing it for money or working for a corporation. Also, I wasn't much fund of the programming community as a whole, nothing wrong with these people, it's just I found most people to be monotone, mundane, dull, boring, socially awkward, not having much life outside of work etc... I'm naturally an extrovert and pretty hyperactive which didn't seem to be a good match to make friends in this field as most simply wanted to be locked in their rooms and code away Basically I came to realize there is much more to life that I can explore by simply trying different things and being more active, outgoing, testing new waters, meeting new people, making business deals, etc... In other words, I'm a businessman by day and programmer by night This is not to say these days I don't do anything with coding at all, in fact, I coded our entire CRM system for our family owned business(physical therapy staffing office) in Python and now the whole stuff uses it which quite streamlined and simplified the whole process, I also occasionally do bug bounties too(pen testing... exploits, binaries, networks, reverse engineer a malware, SQL injections, recon, XSS etc...) mainly because I like the rush when I spot and exploit a critical vulnerabilities in networks/servers, etc... but that's about it. Hope I was able to answer your question.

[@bd9gmkdz384]

@@ramsimon8045 if you don’t mind me asking, what do you do now instead for work?

[@Katoph]

Someone spammed my rest api 10000 times, yesterday.And I see this video. Best timing, thank you traversy

[@mudandmoss4132]

This is insane. I literally just head about this at work today and was planning on looking it up later. I refreshed the YT feed and out pops the exact video I need.

[@TraversyMedia]

Haha, glad it could help

[@Sebastian-hg3xc]

One tipp for you: Double clicking variable names, strings and other stuff usually selects exactly what you want. I've seen you drag-select a few times where could have just double-clicked. Saves a ton of time.

[@0x007A]

Brad, your NodeJS videos are the platimum standard for clarity and practicality. Thank you for all the time and effort; it is appreciated.+

[@ditheca]

Thanks for the tutorial! I'm a casual developer, and your videos help me keep my skills from rusting.

[@TraversyMedia]

That's awesome

[@bonganinxumalo3613]

This is exactly what I have been looking for this whole week, thanks Brad

[@JamesQQuick]

Damn, that rate limiting piece is awesome. I've always wondered how to do that!!

[@TraversyMedia]

Just a few lines of code. Pretty cool

[@danyel8]

@@TraversyMedia is the ratelimiter separate for each client or is for overall usage ?

[@borgestheborg]

I wish I had this tutorial a year ago. Setting up a proxy server is something every web dev should know.

[@loydcose2780]

I've never been this overwhelmed how much things i have learn from you, thank you so much!

[@damightyom]

Hahaha This is exactly what I needed about 6 months ago. But I'm still going to watch it, I get to see how good a job I did. Traversy is the best!

[@xl8134]

Thank you so much! I don't have any basic knowledge of backend dev, and my weather app, which is exactly as yours, is up and running now, and I learned to hide my API key.

[@michadziubich7903]

That is awsome video, many thanks for all your tutorials. I am also doing your 20 Vanilla JS project course on Udemy and I learned a lot from it. I am starting my first job as junior front end developer next week and a lot of my skills I learned from your extremely helpfull tutorials. Thanks Brad!

[@huxnwebdev]

Very Soon (Travery Media) Will Hit 2M Huge Respect & Love From Small KZbinr ❤

[@zeehutt7876]

I learned a lot via Codecademy but you explain the concept so simple and clear.

[@YilmazDurmaz]

almost zero to production, pretty nice and clean code.

[@ScriptRaccoon]

When fetching the params of the request (16:40), instead of url.parse(req.url,true).query we can just use req.query. At least this has always worked for me so far.

[@abhimanyubanerjee3999]

Yea, I was wondering why he didn't use that directly.

[@stoyansarov2647]

I want to thank you for the extremely helpful and straightforward video sir! I've watched tons of guides before but I could finally manage to hide my API key watching this video. You sir are a legend! Keep up the good work! Massive thanks again!

[@tetianabronitska6688]

Thank you a lot for this video from Ukraine!

[@replicant9611]

Hi Brad, you use "url.parse()" method which is now legacy and deprecated.Wouldn't it be easier to use "req.query" instead of parsing "req.url", which is not a native Express property, it is inherited from Node’s http module.

[@SitaMbili]

This is so helpful! Thanks. Perfect way to avoid using API keys in React

[@fg0611]

Very cool! From this video I learned that needle exists and that UrlParams can be parsed that way

[@cakeside]

One word: amazeballs. Keep em coming. Love the format and that its short to the point. If I ever want to dig deeper theres almost always more info out there.

[@daliussinger5382]

Great tutorial, definitely learned a lot! Just one quest, hiding API key should improve the security of access to API from unauthorised requests, however, what stops me to use your web API to access further API? The Request and IP come from your server, so the real API server will give access to any sources to do the request, for example from my server or application. It somehow feels like a backdoor. Usually private API service has IP locks, so a request can come only from a registered IP address. This method shown in the video kind of defeats that purpose, unless you add a restriction on your web server, that request can be done only from your web server and not other clients. Thanks.

[@ygvanz]

How do you add such restriction with the app setup Brad has?

[@okkaraung9512]

does someone know what color theme extension he is using ?

[@rudygutzer3789]

Been searching serie about making own Api. Bless You buddy.

[@kinstar]

ive been trying to figure out how to actually do this properly thanks!!!

[@kal9421]

Hi traversy Media, this is my first time leaving a comment on one of your videos, I just want to tell you that for me you are one of the best we can find on youtube and I always recommend your channel (or udemy courses) to people who want to start learning web dev. All this to tell you that you are doing a wonderful job, keep going !

[@raymondmichael4987]

Coming from the man himself, This is going to be hot!!! Greetings from Tanzania 🇹🇿

[@Landon_Hughes]

SUPER helpful! I’ve been trying to make an iOS app and was worried about hiding my Twitter api info. Time to fire up my own node server 😎 Great video!

[@okkaraung9512]

does someone know what color theme extension he is using ?

[@cubedev4838]

This why i love traversy, very short video but useful

[@jahjahtruth]

Awesome tutorial as always! Brads tutorials are like classic albums where every song on the album is a hit lol. Also can anyone point me in the right direction on how to set another route for a totally different api call? I tried to add another route with the path to the different url but only the first api path i created works. One love!

[@Devillman90]

I'll comment before i watch, cause i already know that this video is very useful this channel is one of the best NodeJS/FE dev stuff i've found on youtube so great work, again!

[@nayanmonibaruah4541]

this is what I was searching for. Thanks a lot. I am also searching for a firebase tutorial no matter if its paid or free . please bring a course on firebase and MERN or only firebase complet

[@BravinWasike]

This looks an interesting tutorial

[@Stoney_Eagle]

This is a great solution, but you have to make sure to read the rate limiting of the API service you're using. Some API services have IP rate limiting and you will hit that limit very easily when you have just 5 users consuming your app. Some might actually ban your IP when you keep exceeding your limit, just je aware of that. 😉

[@snipercide5149]

Great point to be aware of. By doing this his server is now the one making all the requests. Public API Keys are meant to be public, so hiding them is pointless, and it essentially removes protection measures the 3rd party API has implemented... Only the Private API Keys need to be kept Private.

[@BarakAlmog]

This was uploaded 56 min ago. Didn't have the time to watch yet. Just dropped by to leave a like and a comment. I'll come back to watch properly:) Thanks plenty, Brad!

[@TraversyMedia]

Thanks man. I appreciate the engagement

[@BarakAlmog]

Love this channel. I binged probably 15 of your videos, several of them 2-3 times, actively followed and built a few projects, and bought a course in Udemy. That's really the least I could do :) Thanks again. Much appreciated 🙏🙏

[@DaniloCabello]

Good comprehensive beginner friendly tutorial. 👏

[@santiagotv6095]

best tutorial channel ever 👍

[@mrashad_com]

Thanks, I have many things to learn from this tutorial, keep the good work

[@Mac_Daffy]

This was really useful and I feel empowered starting my own API proxy from scratch. Thanks for doing these!

[@gosnooky]

Hi. At 12:20 you can just destructure the process.env object. This is a new javascript feature.

[@namangarg3933]

This was an awesome series. Thanks Brad. Your videos are priceless.

[@FlorinPop]

Very nice video! Learned several things!

[@JC61Support]

I have recently stumbled upon you and I have to say I like your videos!

[@nabeelyousafpasha]

Respect from Pakistan 🇵🇰

[@pen.is.leaking]

this is really informative, thank you Brad! keep at it!

[@projectrevolution8012]

Really enjoyed watching this tutorial, easily explained and so easy to understand.

[@HtopSkills]

Good explanation! I'm doing my server side in Kotlin.

[@Azdak]

You're the goat Brad 🐐

[@fabiandev8219]

Hey Brad, thanks for all the overviews man, these have helped me on my development journey.

[@dilip-hiremath]

Nice tutorial. Learnt a lot. Thanks Brad

[@ranjankumarmandal4700]

Thanks Brad, thanks for this amazing video 💝💝

[@simransultan8483]

very usefull, you should make videos on those npm package too.

[@bryan6090]

I want to say I wish you posed to this a day ago. I literally spent the entire day learning fetch API since I couldn't get certain part

[@pramodjingade6581]

Thanks Brad, was really insightful !

[@snipercide5149]

When it comes to a Public API key, you aren't supposed to hide it, hence the name. The API provider has measures in place to stop people abusing it. Doing this on a public API key is pointless and essentially removes a layer of protection the 3rd party has in place by hiding the callers identity. - This is however a good video for hiding Private API keys, never expose them client-side

[@leogarza5022]

This is so informative! Learned a lot from this vid. Thanks 🙌

[@fastLinkNg]

Whatever comes from Brad tastes like hot pizza:))) The rate limiting is really really useful to me. My client suffered a catastrophic DDoS attack that overwhelmed his server sometime last month! It was a devastating moment for me. @Brad, I like to know if I can use this kind of workflow with my py project??

[@unskeptable]

You could save the keys in a file on the server and just read it at runtime

[@sultanrasul2794]

Thank you very much you helped me a lot , lots of love keep up the good work

Thanks so much for this amazing tutorial, full of useful information. As always in your tutorials, learned new and useful stuff.

[@rajesht9702]

Thank you @Traversy Media.

[@arielspalter7425]

Excellent tutorial as always. Thanks!

[@natachavergara412]

thnks for the tuto.. it was just what i was looking!

[@guerzizeb]

Very good tutorial and very helpful, thank you very much.

[@suhailkakar]

Great video, Brad. Learnt a lot for it :D

[@mkaufmandev]

Brad, thanks. This is a great topic. I'm curious if this is the most popular way to protect those API keys or is serverless? Is IP whitelisting a contender, or can that actually be spoofed?

[@_torgeek9108]

Thanks, Brad for this amazing tutorial. Kindly consider also throwing in crypto wallets for support of this channel. I've heard a couple of guys wishing to support your work but they would like to remain anonymous. Thanks again for this tutorial, I learned a couple of tricks 😉😉

[@SharkBait_ZA]

Thank you, I learned something new. 😃

[@dice9519]

I learn alot buddy. Thanks man

[@Gobillion160]

what a great video thank you very much you also seem a lot happier than a few weeks ago and just overall seem better hope your doing ok man

[@GinnHardcore]

Cheers man food for thought

[@marouaniAymen]

Hi thanks, I'll perhaps use the same idea to reslve the problem of cors when working in a local dev environment, our proxy will transfer backend responses and add the header 'allow-cross-origin:*' it before sending to the front end browser. So the local React application talks only to the proxy and the proxy is the middle man with the REST servers.

[@vishal_sharma_rha]

Great sir going to try this code step by step

[@AB-zm5uk]

Great tutorial, thank you!

[@nguyentruongbinh3969]

wow, this a great video, what i need right now

[@teslimjimoh5670]

God bless you brad. you're the best. quick one. I was lost when you introduced cache. any help would be appreciated

[@stoyansarov2647]

How do you actually implement this with a POST request?

[@josephwong2832]

Brad the legend

[@mykalimba]

The rate limiting and caching are the most interesting bits, and you kind of glossed over them. It'd be nice to get better understanding of how the rate limiter affects the entire base of users. If you have one millions users accessing your API, does each user get their own limit, or is the limit applied to the users as a whole? And I assume that the caching middleware short-circuits a request and returns a response when it gets a cache hit, and it would have been neat to see that functioning in the tutorial (I assume that the route handler would NOT run since the middleware is returning early, so you could have shown that nothing gets console.log(ged) on a cache hit).

[@RenM908]

If you are having a port 5000 issue and upgraded your mac to MacOS Monterrey, it seems the OS is running a default process on that port. Just switch to 5500 or 8080, etc

[@ChrisAthanas]

Nice quick demo

[@siddiqahmed3274]

Thank you sir for another great video.

[@jamesdummigan2525]

Great Video! 😀Much appreciated!

[@RianY2K]

Great tutorial, thank you, it's useful. Can you make the second part, with using Redis as caching in this Express backend?

[@ashiqdey]

need more video like this

[@m.akshay1891]

is there any new upadated method , for securing api . is it enough now ???? anyone help ?

[@qcmira2024]

Great video as always. Just have a quick question: why wasn't it necessary to have a Procfile to deploy to heroku?

[@mattp0123]

Awesome video! Is there any way to prevent someone from requesting my server endpoint? Even though the API key is stored in backend env securely, someone can still send request to my endpoint.

[@devax1t]

brad you have no idea how much this can help me i can make so much just with this (also thank you SO much for including the site) as i dont know how to make good css stuff speaking of css, do you have any resources on how to create good css to use and stuff? like round buttons, etc? ty :D

[@abdellahdamri656]

Hey Brad Great Work !! I was wondering if you could do a tutorial about how to build and publish (NPM / ONLINE ) a CSS Framework !

[@hariharan-wt6qk]

Big fan brad❤️

[@ridl27]

great tut! love ya !

[@ozorg]

great video. but sry to ask: wouldn't it be easier to do the server part in simple php?

[@shozdott]

Imma take a wild guess and say you secretly a coding garden fan like me :)

[@McErer]

Awesome video, thanks!

[@sidagamhareesh3068]

Always Brad rocks ..what about ngnix ?

[@maykbrito]

So cool!