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 - th-cam.com/video/drJwMlD9Mjo/w-d-xo.html
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!
@@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.
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.
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.
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.
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.
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!
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!
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!
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 🙏🙏
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 !
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!
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!
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
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.
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.
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.
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??
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.
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
@@TraversyMedia Hey Brad! As of vscode version 1.60 a setting was added for bracket pair highlighting so there's no need for an extension for it anymore, the vscode implementation is also much faster.
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 😉😉
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?
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. 😉
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.
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 - th-cam.com/video/drJwMlD9Mjo/w-d-xo.html
Hey Brad, please make some on AWS since it is "hot topic" at the moment. Many thanks :)
Hey Brad, can serverless functions also handle rate limiting and cache control as they are stateless and each request may go to different instances..?
Please do
Please make an instructional video Nx Angular NestJs (NAN) and Prisma please
does someone know what color theme extension he is using ?
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!
Thanks :)
May I ask why you're not into programming anymore?
@@TraversyMedia 😊
@@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.
@@ramsimon8045 if you don’t mind me asking, what do you do now instead for work?
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
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.
Haha, glad it could help
Someone spammed my rest api 10000 times, yesterday.And I see this video. Best timing, thank you traversy
Brad, your NodeJS videos are the platimum standard for clarity and practicality. Thank you for all the time and effort; it is appreciated.+
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.
This is exactly what I have been looking for this whole week, thanks Brad
Thanks for the tutorial! I'm a casual developer, and your videos help me keep my skills from rusting.
That's awesome
I've never been this overwhelmed how much things i have learn from you, thank you so much!
Damn, that rate limiting piece is awesome. I've always wondered how to do that!!
Just a few lines of code. Pretty cool
@@TraversyMedia is the ratelimiter separate for each client or is for overall usage ?
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!
Very Soon (Travery Media) Will Hit 2M
Huge Respect & Love From Small TH-camr ❤
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.
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.
I wish I had this tutorial a year ago. Setting up a proxy server is something every web dev should know.
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!
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!
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!
Thanks man. I appreciate the engagement
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 🙏🙏
Been searching serie about making own Api. Bless You buddy.
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 !
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!
This why i love traversy, very short video but useful
Thanks, I have many things to learn from this tutorial, keep the good work
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!
I learned a lot via Codecademy but you explain the concept so simple and clear.
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!
does someone know what color theme extension he is using ?
Very cool! From this video I learned that needle exists and that UrlParams can be parsed that way
This is so helpful! Thanks. Perfect way to avoid using API keys in React
This was really useful and I feel empowered starting my own API proxy from scratch. Thanks for doing these!
This was an awesome series. Thanks Brad. Your videos are priceless.
I have recently stumbled upon you and I have to say I like your videos!
Coming from the man himself,
This is going to be hot!!!
Greetings from Tanzania 🇹🇿
ive been trying to figure out how to actually do this properly thanks!!!
this is really informative, thank you Brad! keep at it!
best tutorial channel ever 👍
almost zero to production, pretty nice and clean code.
This looks an interesting tutorial
Good comprehensive beginner friendly tutorial. 👏
You're the goat Brad 🐐
Hey Brad, thanks for all the overviews man, these have helped me on my development journey.
Thank you very much you helped me a lot , lots of love keep up the good work
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
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.
Yea, I was wondering why he didn't use that directly.
Really enjoyed watching this tutorial, easily explained and so easy to understand.
Nice tutorial. Learnt a lot. Thanks Brad
Great video, Brad. Learnt a lot for it :D
This is so informative! Learned a lot from this vid. Thanks 🙌
Thanks Brad, was really insightful !
Thank you a lot for this video from Ukraine!
Thanks Brad, thanks for this amazing video 💝💝
Very nice video! Learned several things!
very usefull, you should make videos on those npm package too.
thnks for the tuto.. it was just what i was looking!
Cheers man food for thought
Excellent tutorial as always. Thanks!
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.
How do you add such restriction with the app setup Brad has?
does someone know what color theme extension he is using ?
Great tutorial, thank you!
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.
Thank you @Traversy Media.
Thanks so much for this amazing tutorial, full of useful information. As always in your tutorials, learned new and useful stuff.
Good explanation!
I'm doing my server side in Kotlin.
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
I learn alot buddy. Thanks man
wow, this a great video, what i need right now
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??
Nice quick demo
Very good tutorial and very helpful, thank you very much.
great tut! love ya !
Great Video! 😀Much appreciated!
Big fan brad❤️
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
Thank you, I learned something new. 😃
Hi. At 12:20 you can just destructure the process.env object. This is a new javascript feature.
Respect from Pakistan 🇵🇰
need more video like this
Thank you sir for another great video.
Awesome video, thanks!
Always great content thank you
wow you watched that real quick didnt you
Great sir going to try this code step by step
Brad the legend
God bless you brad. you're the best. quick one. I was lost when you introduced cache. any help would be appreciated
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.
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
Excellent idea thanks
what syntax highlighting extension you are using ? i love the colors
I am using the github dark theme but I also use the "Bracket Pair Colorizer" extension
@@TraversyMedia Hey Brad! As of vscode version 1.60 a setting was added for bracket pair highlighting so there's no need for an extension for it anymore, the vscode implementation is also much faster.
Great tutorial, thank you, it's useful.
Can you make the second part, with using Redis as caching in this Express backend?
Nice job 👍
is there any new upadated method , for securing api . is it enough now ???? anyone help ?
So cool!
Very fun tutorial
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 😉😉
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?
do i need to change anything about these .env variables + am i gonna use them ?
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. 😉
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.
How do you actually implement this with a POST request?
Nice one, thanks
Hey Brad Great Work !! I was wondering if you could do a tutorial about how to build and publish (NPM / ONLINE ) a CSS Framework !
Thanks for the video but im confused, wouldn't the client side need to to authenticate with the proxy api with a key?
Always Brad rocks ..what about ngnix ?