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

Рет қаралды 218,139

Күн бұрын

We will use Node.js & Express to create a server in order to hide public API keys, add rate limiting and caching
💻 Code:
github.com/bradtraversy/node-...
Demo App:
traversy-weather-app.herokuap...
Node.js API Masterclass Course: (promo code: OCTOBER2021)
www.udemy.com/course/nodejs-a...
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
2:48 - Dependencies & scripts
4:45 - Basic Express server
6:15 - Environment variables
8:00 - Create the route
10:40 - Request from server
15:50 - Forwarding query params
19:55 - Rate limiting
22:40 - API caching
24:28 - Use server with the client app
26:50 - Deploy to Heroku
30:20 - Environment variables on Heroku

Пікірлер: 218

@TraversyMedia 2 жыл бұрын

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 - kzfaq.info/get/bejne/mth6qrCdqZ-xmqM.html

@SgT.Alexxx 2 жыл бұрын

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

@aldrinjenson 2 жыл бұрын

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 2 жыл бұрын

Please do

@diatm1506 2 жыл бұрын

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

@okkaraung9512 7 ай бұрын

does someone know what color theme extension he is using ?

@0x007A 2 жыл бұрын

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

@ramsimon8045 2 жыл бұрын

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 2 жыл бұрын

Thanks :)

@bigtaskat-hand4742 2 жыл бұрын

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

@ramsimon8045 2 жыл бұрын

@@TraversyMedia 😊

@ramsimon8045 2 жыл бұрын

@@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 2 жыл бұрын

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

@bonganinxumalo3613 2 жыл бұрын

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

@JamesQQuick 2 жыл бұрын

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

@TraversyMedia 2 жыл бұрын

Just a few lines of code. Pretty cool

@danyel8 2 жыл бұрын

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

@mudandmoss4132 2 жыл бұрын

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 2 жыл бұрын

Haha, glad it could help

@cakeside 2 жыл бұрын

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.

@loydcose2780 Жыл бұрын

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

@judevector 7 ай бұрын

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

@Sebastian-hg3xc 2 жыл бұрын

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.

@kal9421 2 жыл бұрын

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 !

@namangarg3933 2 жыл бұрын

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

@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!

@fabiandev8219 2 жыл бұрын

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

@michadziubich7903 2 жыл бұрын

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!

@damightyom 2 жыл бұрын

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.

@Mac_Daffy 2 жыл бұрын

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

@rudygutzer3789 2 жыл бұрын

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

@projectrevolution8012 2 жыл бұрын

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

@Devillman90 2 жыл бұрын

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!

@cubedev4838 2 жыл бұрын

This why i love traversy, very short video but useful

@ditheca 2 жыл бұрын

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

@TraversyMedia 2 жыл бұрын

That's awesome

@ranjankumarmandal4700 2 жыл бұрын

Thanks Brad, thanks for this amazing video 💝💝

@arielspalter7425 2 жыл бұрын

Excellent tutorial as always. Thanks!

@DaniloCabello 2 жыл бұрын

Good comprehensive beginner friendly tutorial. 👏

@borgestheborg 2 жыл бұрын

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

@dilip-hiremath 2 жыл бұрын

Nice tutorial. Learnt a lot. Thanks Brad

@BravinWasike 2 жыл бұрын

This looks an interesting tutorial

@leogarza5022 2 жыл бұрын

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

@natachavergara412 2 жыл бұрын

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

@swagfinger Жыл бұрын

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

@JC61Support 2 жыл бұрын

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

@pramodjingade6581 2 жыл бұрын

Thanks Brad, was really insightful !

@AB-zm5uk 10 ай бұрын

Great tutorial, thank you!

@Katoph 2 жыл бұрын

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

2 жыл бұрын

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

@mrashad_com 2 жыл бұрын

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

@suhailkakar 2 жыл бұрын

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

@santiagotv6095 2 жыл бұрын

best tutorial channel ever 👍

@SitaMbili 2 жыл бұрын

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

@zeehutt7876 2 жыл бұрын

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

@guerzizeb 2 жыл бұрын

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

@sultanrasul2794 2 жыл бұрын

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

@SharkBait_ZA 2 жыл бұрын

Thank you, I learned something new. 😃

@rajesht9702 2 жыл бұрын

Thank you @Traversy Media.

@ridl27 2 жыл бұрын

great tut! love ya !

@jamesdummigan2525 2 жыл бұрын

Great Video! 😀Much appreciated!

@Gobillion160 2 жыл бұрын

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

@dice9519 2 жыл бұрын

I learn alot buddy. Thanks man

@topfkopf666 2 жыл бұрын

Awesome video, thanks!

@siddiqahmed3274 2 жыл бұрын

Thank you sir for another great video.

@raymondmichael4987 2 жыл бұрын

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

@HtopSkills 2 жыл бұрын

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

@ChrisAthanas 2 жыл бұрын

Nice quick demo

@GinnHardcore 2 жыл бұрын

Cheers man food for thought

@nguyentruongbinh3969 2 жыл бұрын

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

@Azdak 10 ай бұрын

You're the goat Brad 🐐

@kinstar Жыл бұрын

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

@jahjahtruth 2 жыл бұрын

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!

@vishal_sharma_rha 2 жыл бұрын

Great sir going to try this code step by step

@Landon_Hughes 2 жыл бұрын

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 7 ай бұрын

does someone know what color theme extension he is using ?

@ashiqdey 2 жыл бұрын

need more video like this

@yahyeabdirashid9716 2 жыл бұрын

Excellent idea thanks

@huxnwebdev 2 жыл бұрын

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

@mixvideo2830 2 жыл бұрын

Always great content thank you

@kamikaze_jb 2 жыл бұрын

wow you watched that real quick didnt you

@maykbrito 2 жыл бұрын

So cool!

@YilmazDurmaz 2 жыл бұрын

almost zero to production, pretty nice and clean code.

@hariharan-wt6qk 2 жыл бұрын

Big fan brad❤️

@andyhughes8315 2 жыл бұрын

Very fun tutorial

@PlotTwists 2 жыл бұрын

Nice one, thanks

@josephwong2832 2 жыл бұрын

Brad the legend

@tetianabronitska6688 2 жыл бұрын

Thank you a lot for this video from Ukraine!

@Atino828 2 жыл бұрын

Nice job 👍

@FlorinPop 2 жыл бұрын

Very nice video! Learned several things!

@soulninjadev 2 жыл бұрын

yay! advanced stuff

@RianY2K 2 жыл бұрын

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

@melfordbirakor 2 жыл бұрын

Thanks Chief

@tonyross2947 2 жыл бұрын

Awesome!

@nayanmonibaruah4541 2 жыл бұрын

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

@alech3630 2 жыл бұрын

Cool, cool, cool!

@ScriptRaccoon 2 жыл бұрын

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 2 жыл бұрын

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

@simransultan8483 Ай бұрын

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

@replicant9611 2 жыл бұрын

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.

@xsdash 2 жыл бұрын

thanks :)

@FitoFx 2 жыл бұрын

thanks

@mkaufmandev 2 жыл бұрын

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?

@nabeelyousafpasha 2 жыл бұрын

Respect from Pakistan 🇵🇰

@philippec4448 2 жыл бұрын

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

@abdellahdamri656 2 жыл бұрын

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

@devax1t 2 жыл бұрын

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

@bryan6090 2 жыл бұрын

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

@BarakAlmog 2 жыл бұрын

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 2 жыл бұрын

Thanks man. I appreciate the engagement

@BarakAlmog 2 жыл бұрын

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 🙏🙏

@daliussinger5382 2 жыл бұрын

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 7 ай бұрын

does someone know what color theme extension he is using ?

@smilingisagiftsias6191 2 жыл бұрын

lovely

@teslimjimoh5670 2 жыл бұрын

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

@marouaniAymen 2 жыл бұрын

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.

@ngochaiho4606 2 жыл бұрын

Good 👍

@fastLinkNg 2 жыл бұрын

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??