How To Hide API Keys Using Netlify

  Рет қаралды 17,690

Dan Fletcher

Dan Fletcher

Күн бұрын

In this video I will teach you why sharing API keys is a bad idea, a high level understanding of how you can secure them, and then using a practical example, I'll show you how you can use a service called Netlify Functions which is a completely free option to secure your secrets without needing to write any backend code at all (at least not in the classical sense of "backend")
Links:
Git repo: github.com/DanJFletcher/how-t...
Gist for vscode debug configuration: gist.github.com/DanJFletcher/...
Chapters:
0:00 Introduction
0:56 Why you need to hide your API keys
1:49 How API keys get stolen
3:34 How stolen keys get used
4:36 Understand the mechanics of securing API keys
12:05 What are netlify functions?
13:16 A practical example of using netlify functions
18:28 Make your first netlify function
22:44 Make request a request to your function
24:24 Setup Netlify Dev Server to serve your function
27:30 Update function to send request to weather API
34:28 Update request to pass geolocation data to function
38:19 Set up VS Code debugger with netlify functions
42:15 Secure your secret in an environment variable
44:12 How to keep environment variables out of your git repo
46:37 How this will work live in production
49:15 How to deploy to Netlify
53:23 Summary
Background Music:
Polarity by Theevs
g-wow by Kathali
Checkout Artilist for awesome background music in your own videos! If you use my referral link you'll be supporting my channel, thanks! artlist.io/Dan-492842

Пікірлер: 171
@Alan-fu2vx
@Alan-fu2vx 11 ай бұрын
This helped me big time when figuring out how to hide secrets like API keys or tokens without needing to host a backend proxy server. Since we'd be deploying to a BaaS anyway the use of serverless functions is of great help when dealing with 3rd party API calls and such. Thanks!
@DanFletcher90
@DanFletcher90 11 ай бұрын
Glad this helped! Thanks for the comment 😊
@alexandercozub758
@alexandercozub758 2 жыл бұрын
Took me such a long time to be able to find someone who took me step by step on how to work with Netlify functions and hide api key. Thank you so much for a great explanation! :)
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Thanks, that means a lot! I remember being so frustrated with this problem when I was first getting into web dev and couldn't find great resources on how to solve this simply without spinning up a whole backend so it's a video I had been wanting to do for some time :)
@felipeflor6140
@felipeflor6140 3 жыл бұрын
Wow Dan! I really appreciate how organized and straight to the point this video was. The editing was also on point, the background music was there for atmosphere but didn't interfere with the lesson. Thanks for sharing this. Looking forward to more of your tutorials, I hope this channel will blowup soon.
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Thanks Felipe!! ❤️
@blarvinius
@blarvinius Жыл бұрын
So good! I really appreciate the nice slow pacing and detailed over-explaining!
@DanFletcher90
@DanFletcher90 Жыл бұрын
Thank you!
@SidharthSreekumar
@SidharthSreekumar 4 ай бұрын
Thanks for making this video. I was having trouble finding a solution to manage secrets and now I know.
@DanFletcher90
@DanFletcher90 3 ай бұрын
Glad I could help!
@thineshkumar1389
@thineshkumar1389 Жыл бұрын
You explained things very well and I'm glad you kept the part on troubleshooting bugs or error that you encountered. It really gave me an exposure.
@DanFletcher90
@DanFletcher90 Жыл бұрын
I appreciate the feedback! Thanks!
@danielishida5001
@danielishida5001 Жыл бұрын
such an underrated video! Half way in the video and i already leraned so much. Great stuff!
@DanFletcher90
@DanFletcher90 Жыл бұрын
Thanks you so much! 🙏
@adhirajagarwal9640
@adhirajagarwal9640 Жыл бұрын
I had been stuck at this for some days now, you are a lifesaver buddy, I also checked out some of your other videos and I have to say, they are great
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hey glad this helped 😊 Thanks for the kind words!
@Piccolo230
@Piccolo230 Жыл бұрын
Thank you, really appreciate a long and in depth video about this topic. Its often overlooked
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hey glad you found this helpful! Appreciate the comment 🤙
@marie-elizeventer7080
@marie-elizeventer7080 Жыл бұрын
Dan! This was GREAT! Thanks! You made it SOOOO clear to understand. I am a total newbie, but following this tutorial was an eye opener. I really needed it!
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hey thanks so much for the kind words! Glad this was helpful!
@Tynchotyn
@Tynchotyn Жыл бұрын
Spectacular video Dan, really helpful. Thanks a lot!
@DanFletcher90
@DanFletcher90 Жыл бұрын
Thank you!!!
@maplestoryinchinese
@maplestoryinchinese Жыл бұрын
Hey Dan, after some tinkering around and praying everything goes smoothly with my React Application it works! Thank you so much kind sir, we need more people like you! Sending you much love.❤❤❤❤❤❤❤
@DanFletcher90
@DanFletcher90 Жыл бұрын
Awesome!! 🙌 Glad you got it working!
@sacabassacabas
@sacabassacabas 3 жыл бұрын
Hi Dan, This video helped me a lot. Thank you for your well-organized explanation!
@DanFletcher90
@DanFletcher90 3 жыл бұрын
That's great to know! Really appreciate the feedback!
@RossellaSalaro
@RossellaSalaro 3 жыл бұрын
Thank you so much Dan, this helped me a lot. Very well explained!
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey Rosella, thank you so much! Sorry that I'm only seeing this now. I'm just realizing KZfaq hasn't been sending me notifications more comments 😅
@Elias-xp3bs
@Elias-xp3bs Жыл бұрын
This was super helpful! Got my first netlify function to work 🥳
@DanFletcher90
@DanFletcher90 Жыл бұрын
Awesome 🙌 glad this helped!!
@redlense4
@redlense4 3 ай бұрын
Well taught mate. Thanks 😀
@mogusmogus
@mogusmogus Жыл бұрын
Thank you so much Dan! I am really grateful for this amazing tutorial.
@DanFletcher90
@DanFletcher90 Жыл бұрын
Glad this was helpful!!
@nazokatisamova5073
@nazokatisamova5073 3 жыл бұрын
WOW thank you !!! you got a talent to teach. Thank you for sharing your knowledge.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Aww thank you so much!!
@victoroluwayemi9531
@victoroluwayemi9531 2 жыл бұрын
Finally!!💃💃 Thanks for the video
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Glad you liked the video! 😊
@EdoriReuben
@EdoriReuben 2 жыл бұрын
Amazing video, really helpful. Thanks.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey, thanks so much!
@wajry
@wajry 2 жыл бұрын
This was exactly what I was looking for. Such a good explanation! Only thing I would ask for is to set your VS code and browser to full screen, the code was a little bit hard to see on my small laptop. Thanks for the lesson man!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey thanks for the feedback! Yeah definitely agree the font needs to be larger in this video :)
@wajry
@wajry 2 жыл бұрын
@@DanFletcher90 I just got back to this after a while, and tried to set a up a netlify function WITHOUT Axios. Couln't make it work until I found out that Node.Js doesn't know what fetch() is. Is that why you used Axios?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@wajry Hey! Yeah no fetch API at the time I recorded this. Node has an https module used for making requests. But yeah, axios is just a bit easier to work with and what most people are familiar with. There's a good article on making requests with Node here: nodejs.dev/learn/making-http-requests-with-nodejs If you use Node 18 it actually has fetch now!
@swannjulien
@swannjulien Жыл бұрын
Thank you so much, your video helped me a lot
@DanFletcher90
@DanFletcher90 Жыл бұрын
Glad it helped!
@tommybernaciak7457
@tommybernaciak7457 2 жыл бұрын
Great video!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Thank you!
@phillbaska
@phillbaska Жыл бұрын
Great video, thank you. It was quite refreshing to see a content creator make little mistakes along the way and not editing it out, i actually learnt a little more this way.
@DanFletcher90
@DanFletcher90 Жыл бұрын
Oh that's amazing! Appreciate hearing that feedback :)
@mysolo17
@mysolo17 2 жыл бұрын
great video. thank you for your sharing
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Glad it was helpful!
@T12321
@T12321 Жыл бұрын
Thank you Dan 👍
@DanFletcher90
@DanFletcher90 Жыл бұрын
You're welcome!
@samrei6223
@samrei6223 2 жыл бұрын
thank you for making this simple!
@samrei6223
@samrei6223 2 жыл бұрын
I think your code might be off, I had to do this to get it to return any data fetch(`/.netlify/functions/fetch-weather?lat=${lat}&long=${long}`) .then(res => res.json()) .then((data) => { console.log(data); })
@DanFletcher90
@DanFletcher90 2 жыл бұрын
You're so welcome!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Ah yes. Nice catch! I ended up just inspecting the network tab to watch the response while doing the recording so I didn't even notice that the console log wasn't working 😅 Glad you were able to figure it out though!
@BlockCylinder
@BlockCylinder 2 жыл бұрын
@Dan Fletcher This video was great. It really helped me get my app working the way I want it to. I'm just masking the my API key for a free weather API but the exercise can be applied to more sensitive information in the future. One question - This video is just a bit over a year old, and I'm wondering if you would still use Axios if you were making it today. I've been told that Axios is out of style, and Fetch is the move. I only started studying JS one year ago myself, so I'm just trying to get a handle on what's the best method today. Thank you!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey glad you found this helpful! Both adios and fetch are totally fine to use. I use both frequently. I do tend to use fetch more in small projects and then only worry about bringing axios in when I want some of its features As a beginner it truly doesn't matter which one you pick. Axios is a little simpler to use in my opinion but it really doesn't matter There's a really good article that breaks down the differences too which might help you understand more: blog.logrocket.com/axios-vs-fetch-best-http-requests Cheers!
@qbek_san
@qbek_san 2 жыл бұрын
Thanks for your video! Netlify documentation on functions is shit, you saved my day!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey no problem! Glad this was helpful ☺️
@anokimusic
@anokimusic 2 жыл бұрын
thanks man!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
No problem!
@martinluna7963
@martinluna7963 2 жыл бұрын
Great video, helped me a lot too! I'm doing something similar with an exchange rates API. I need to update the response with a historical rates endpoint, how can I update the endpoint where you using "current'? Do I need to use queryStringParameters or something else? About the video I found that sometimes the font size was a little too small for me, maybe try to increase it in the future.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey thanks for the feedback! Yeah I agree the font is a little small in parts. I've actually started recording my screen at 175% scale in all my future videos which makes a big difference :) As for your question: "current" in the case of Weather Stack's API is actually not a query parameter it's just a part of the URI I'm sending a request to. But I'm not sure if I understand what you're trying to do. Are you able to send me a link to the API you're working with? Feel free to DM me on twitter too :) @danfletcherdev is my handle there
@3bkareeno
@3bkareeno 2 жыл бұрын
Thank you. Very helpful. How is your VS Code auto complete is very smart? it even auto completed the API params.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey, no problem! Glad this was helpful :) I use an extension called "Tabnine" to get that crazy auto-complete ;) It's not always right about it's suggestions but when it is it's glorious!
@marie-elizeventer7080
@marie-elizeventer7080 Жыл бұрын
Question please: I have a project, that has access to a database. The Client ID, Client Secret and Refresh Token are used to generate an ACCESS CODE, which is only valid for 60 minutes, upon which a NEW Access Token has to be generated. The ClientID, -secret and Refresh token I am hiding in Netlify's variables, and I access them through a serverless functions. My question is: Where do I put the Access Token so that it is NOT accessible/visible in the front end for the hour that it is valid?
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hmm I'm not sure if I can answer that question very well as a KZfaq comment but there is a great article by Auth0 that I think you'll find useful: auth0.com/docs/secure/security-guidance/data-security/token-storage Let me know if that helps!
@patrickchan2503
@patrickchan2503 3 жыл бұрын
Hi Dan, thanks for this. Can I ask if the API Key is accessible in Dev Tools should anyone inspects? Thanks
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey Patrick! As long as the key doesn't exist in the browser there is no way for Dev Tools to see them. That's why it's so important for the actual connection between your app and the API to take place in a backend application, or in this case, a serverless function :)
@ManeeshShaji
@ManeeshShaji 2 жыл бұрын
But if your netlify functions doesn’t have any authentication then anyone can call your functions in a loop to hit the limit right? You can setup rate limiting for the functions, but even still with patience they can slowly hit the api key limit right?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Ah haha yup! I didn't catch that mistake until a while after I uploaded this. You're the first person to call me out on it 🎊 Yeah technically it's a bit more complicated than just putting it behind a function if the route is public anyway. If it's behind authentication which you can do with Netlify as well, you're fine But by hiding your keys behind the function at least they can't get stolen, and you can rate limit as you said, to lessen the impact, set a hard limit to avoid being overbilled, or even use a leaky bucket algorithm on your throttle with a ratio that makes it impossible to abuse the route in a meaningful way Thank you for your comment 🙏
@mohsinmiya8333
@mohsinmiya8333 2 жыл бұрын
hey dan great video! i just wanted to ask that when building a porject ill porbably have the JS which is inside the html inside a different js file. now if i was using a different api and had to get multiple information using different endpoints, how will i call the "fetch-weather.js" file? and how can i make different async functions returning different data in the "fetch-weather.js" file? oh and also do i have to type "netlify dev" each time i want to reload the page? like how live server on cs code allows us to see live changes, is that not possible to do here?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Thank you! Sorry for the late reply! So the second question is easier. No you don't have to keep re-running `netlify dev`. It should automatically refresh as you make changes to your code. However, if you change your netlify.toml or your .env files you WILL have to re-run `netlify dev` As for the second question: It's totally up to you how you want to stitch that data together. Your netlify function can handle making all of the API calls you need and consolidating that into a single response that gets returned to your front-end app if you want. You could also add multiple netlify functions and make your frontend call all of those netlify endpoints instead. In both cases you'll need to understand how to await async functions properly and build up your data from multiple API responses. I wish KZfaq had code snippets I'd give a simple example! If that still didn't make any sense let me know. I'm thinking of doing more videos about Netlify Functions in the future so this could be a great topic to cover! Thanks for the comment, and glad you enjoyed the video!
@mohsinmiya8333
@mohsinmiya8333 2 жыл бұрын
@@DanFletcher90 hey Dan thanks for replying. The auto refresh doesn't seem to be working. Whenever I type code on html, css, js while using netlify Dev, the page doesn't auto reload. I have to manually hit refresh. If you could cover in a future video on how to add live reloading that would be great. And as u said to stitch the data, o can create different netlify functions and then call them through the front-end which is awesome. Great vid and hope u make more content on this and more things.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@mohsinmiya8333 Oh interesting. I'll have to double check later and see how this is handled. It's been a while since I last used the tool so either it changed or I'm forgetting something lol I should be able to look into this tonight after work and I'll let you know :)
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Ah ok so I just tried this and it looks like you're right. It only rebuilds the functions and not the frontend by default. The app that I've most recently used Netlify Functions for is a React app and I'm serving the frontend with craco so it's actually the craco command that gets used with a create-react-app that's handling the watching. If you're app is scaffolded with popular tools like create-react-app or Vue CLI etc, Netlify Dev will know how to just hook into those and start whatever dev script comes with them out of the box and you don't even have to touch your netlify.toml file. So you would have to setup a watcher yourself if you're working on a vanilla JS/HTML project. Something browser-sync would work fine and you can update your Netlify toml file to use whatever npm script you setup to use browser-sync. Sorry for the confusion! Hopefully that clarifies it :)
@mohsinmiya8333
@mohsinmiya8333 2 жыл бұрын
@@DanFletcher90 ahh I see that clears a few things. So if I were to use react or Vue then netlify functions would automatically detect it and reload accordingly? I'm still using vanilla js for now. I'm using webpack server to use live reloading. What do I type in the netlify.toml, that would allow me to live reload when I use webpack serve to watch changes on the front-end and also the netlify functions as well?
@maplestoryinchinese
@maplestoryinchinese Жыл бұрын
For some weird reason using Fetch will not work for this project and cause an error but switching over the Axios seems to fix the issue. I don't know why. Aren't they basically the same thing just with Axios making it more simplified process?
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hi! It depends which side of the app you're using `fetch`. If you're using it inside of the serverless function you won't have the `fetch` API available to you (yet). If it's on the browser side, you should be able to use fetch Happy to take a look for you if you have a GitHub repo to share!
@maplestoryinchinese
@maplestoryinchinese Жыл бұрын
I'm coming across a problem where If I try to do a batch of API calls it returns a 500 error. Probably due to rate limiting, any workaround for this? On the Frontend I'm able to do this easily with no issue but my API key would be at risk. Also it seems like doing the fetching using Netlify Functions slows down the runtime for the Frontend.
@DanFletcher90
@DanFletcher90 Жыл бұрын
Is the 500 coming from Netlify or from the service that you're connecting too? I'm not aware of any rate limiting on the Netlify side. The performance issue can definitely be a concern in some cases. My video doesn't get into the nuance here, but as long as your key only has read-access, it's technically safe in your front-end application Many 3rd party API's will offer SDK's specifically for client-side code, so one option is to just go with that approach. If you still need to make calls to a service that require keys that have to be protected, then a Netlify function (or any serverless function) will typically perform better at scale than a traditional backend. But another option for certain use-cases is to look at "Edge Functions" which execute on a server closer to where the user physically is Hopefully that's helpful, if not let me know!
@aissanadjemeddine1330
@aissanadjemeddine1330 3 жыл бұрын
Thank you so much, I just used environment variables in netlify without set up the function in my project and it worked well for react app , is it a right way to hide my api keys ?
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey Sami! So the issue with adding environment variables that way is that anyone can inspect your code, or your network tab and see the value of those environment variables. Those environment variables are great for setting application configurations but only when the data isn't sensitive like in the case of API keys :)
@aissanadjemeddine1330
@aissanadjemeddine1330 3 жыл бұрын
Thanks Dan Fletcher , can I use the same method with react ? I have i little bit complex project and i wanted to do that with it but it wasn't easy
@DanFletcher90
@DanFletcher90 3 жыл бұрын
@@aissanadjemeddine1330 Yep, this will absolutely work with React! If you created your project using create-react-app Netlify should actually already understand how to build and server your application without modifying your netlify.toml file (other than adding the "functions" part)
@kevinalexanderrodriguezria6555
@kevinalexanderrodriguezria6555 2 жыл бұрын
@@DanFletcher90 i will do this, thanks
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@kevinalexanderrodriguezria6555 no problem!
@koiko21
@koiko21 2 жыл бұрын
Not sure if I saw you put the `functions` folder in a `.netlify` folder. I'm wondering why the .netlify has to be there in the fetch call. That's the place where I'm running into errors on my app. It works fine when I'm working in development mode, but once I deploy it, I get a 404 error on the fetch-weather part. Any guidance is appreciated.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey! So the fact that the functions are served from `./netlify` is an artifact of building the functions. `./netlify` is just the default. This can be changed in the `netlify.toml` file. As for the 404's in production. The only thing I can think of is maybe there's a mistake in your `netlify.toml`. Double check that it matches what's in the video: ``` [build] functions = "functions" publish = "src" ``` Hopefully that's all the issue is. Let me know if you keep getting 404s and I'll see what I can do to help :) Thanks!
@supergsund2241
@supergsund2241 Жыл бұрын
Hi Christine, I run into the same error. Have you solved it in the meanwhile? It works if I put xxx.js with the secret keys into /src/functions/xxx.js for deployment, but that makes no sense as everybody can call the xxx.js by browser. Think it must be another solution using a router or proxy function. 🤷🏻‍♂️ All my beast, Stefan 🤗
@1uckyswish107
@1uckyswish107 Жыл бұрын
I love your VS code Theme.. what is the name please ;)
@DanFletcher90
@DanFletcher90 Жыл бұрын
Thanks! It's Monokai Pro with the "Machine" theme set. Font is Cascadia Code with ligatures turned on :)
@ecdu-eu
@ecdu-eu Жыл бұрын
Dear Dan, I hope you are well. Thanks for the video. It helped me a lot. Dan, maybe I can ask you something, please. I'm going insane here and I hope you can answer: As in your example, I have the /functions folder above the /src folder. Structure: /main/functions/fetch-api.js (in my case) /main/src/index.html, netlify.toml and so on. Unfortunately, my project only works if I also place the Functions folder under the "/src" path. So I have to put the "/function" folder in "/src/function" because after netlify build and netlify deploy only /src can be accessed from external. I got myself extra netlify (didn't know that before) because I thought that with netlify and axion in combination, everything works like a kind of proxy that hides the request to the server with the API. In this case, however, I can call /functions/whatever.js and the script is displayed in the browser. My goal is that the API key can no longer be found at all. I use some Amazon AWS keys and want to hide them with API_SECRET_n1-nx like in your example. Do you maybe have an idea what I could possibly do? I've been desperate here for days. I would be happy about an answer, greetings into your home country. Thanks in advance and best regards, Stefan
@DanFletcher90
@DanFletcher90 Жыл бұрын
Hey Stefan, thanks for the kind words! So your Netlify functions should definitely not be in your `src` folder. The fact that you have to put them there in order for the functions to work tells me your toml file is likely to blame. Your `netlify.toml` file should look like this if your following along with the tutorial: ``` [build] functions = "functions" publish = "src" ``` (github.com/DanJFletcher/how-to-hide-api-keys-with-netlify-functions/blob/master/netlify.toml) If you're struggling to get them to work in a custom project you may have to read through the documentation for Netlify toml files and see if there are any configurations that make sense with your project. docs.netlify.com/configure-builds/file-based-configuration/ Hope that helps! Let me know if you still need help )
@jochenstierberger383
@jochenstierberger383 2 жыл бұрын
Would this also work if my API key has to be inside a header?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Yes absolutely! From the Netlify function you can authenticate with the API however the API needs you to
@pexeixv
@pexeixv 3 жыл бұрын
I'm using Airtable for my DB. In your case, the API key is passed in the URL itself. But, in the case of Airtable's cURL API, the API key has to be sent as Bearer token. How can I do this in Axios?
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Right, so the concept is still the same in that you would make that request to Airtable from inside a Netlify function. But if the key is a Bearer token, those go in the "Authorization" header with your POST/PATCH/PUT request. There's no code formatting in KZfaq comments but here's an example of what that would look like: ``` axios.post(url, { headers: { 'Authorization': `Bearer ${token}` } }) ``` Axios is very flexible with it's API and how you can use it, so I'd suggest reading the docs to see what all of your options are. Hope that helps!
@pexeixv
@pexeixv 3 жыл бұрын
@@DanFletcher90 Thanks alot for taking the time to reply. Really appreciate it!
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey, no problem!
@RichellyItalo
@RichellyItalo 3 жыл бұрын
This tutorial was ver helpful. Please, what's this theme used in vscode?
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey glad this was helpful! The theme I'm using is called "Monokai Pro" with the "machine" filter. I'm also using "Cascadia Code" for my font with font ligatures turned on 😊
@RichellyItalo
@RichellyItalo 3 жыл бұрын
@@DanFletcher90 Thanks!
@bronsonspies1508
@bronsonspies1508 2 жыл бұрын
Is it possible to do this with an app that is deployed on tomcat? It looked like you were going to maybe show a way with the concurrently dependency… also thanks for this concise video
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey no problem! I actually don't know what tomcat is 😅 do you have a link?
@bronsonspies1508
@bronsonspies1508 2 жыл бұрын
@@DanFletcher90 just a http web server! I need to hide some api keys in an angular app but I don’t have the option of deploying it to netlify, I realize I could just build my own middle ware but I’d rather not 😅
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@bronsonspies1508 Oh ok do you mean Apache Tomcat? No way to use Netlify functions without deploying to Netlify, but you could use AWS Lambda which Netlify Functions are actually using under the hood I haven't tried it but I've heard AWS has a tool for testing lambdas locally too! It'll be a little more level but it's definitely away to accomplish something similar while not building a full on backend API The other option of course is throw up a simple Node API somewhere to hide your keys behind and the Angular app can proxy through that Hope that's helpful!
@phillbaska
@phillbaska Жыл бұрын
I'd like to ask a question.. is my assumption correct that netlify serverless function's are not suitable for web apps with large volumes of traffic? i can see the limit of serverless functions is 125k per site for netlify. I presume that means if 125k people visited the weather example site, this would mean 125k serverless functions to gather the data and a charge would be incurred for surpassing the limit?
@DanFletcher90
@DanFletcher90 Жыл бұрын
Looks like their pricing page has changed since I last looked. I guess it would depend on what they mean by "$25+" How many more requests do you get for that? I'm not sure. But in termyof being able to handle high volume traffic, that's kind of the point of going serverless If you're handling millions of requests per month it would depend on what Netlify charges, but it could make sense to just switch to native AWS functions at that point High volume is relative too I always like to think in terms of revenue per request A blog typically has low revenue per request because the money comes from ads which only ads up to anything significant at extremely high volumes But an app that users pay a subscription for and generates a high MRR with a low user count might not ever need 125k reqs/month in order to make decent money
@phillbaska
@phillbaska Жыл бұрын
@@DanFletcher90 thanks for the detailed and speedy reply. Yes i thought they would be a little bit more transparent with the numbers, but it looks like enterprise is unlimited (fair usage). I guess you could assume that if such a volume of calls were actually be being made in something like a customer portal (rather than a blog) to gather prior purchase info etc, then as long as they are an active customer it would somewhat pay for itself. I'll take a look into AWS functions, then check if you have a video on it when i fail to understand it🙂
@DanFletcher90
@DanFletcher90 Жыл бұрын
@@phillbaska hey no worries! YT failed to show me this notification though so sorry for the late reply lol!
@HugoDuprez449
@HugoDuprez449 2 жыл бұрын
Thanks for your work! Is there a thing i missed i think: We keep our secret key on a env file okay, but everyone who have access to our function api url can run the function and use the key no?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey thanks! And great question! With Netlify the only valid request to your API is from within your application. So if anyone else tries to use that URL (sometimes called endpoint) it won't work for them.
@HugoDuprez449
@HugoDuprez449 2 жыл бұрын
@@DanFletcher90 Wow, that’s amazing… There is a same restriction for cloudflare Workers function and Cloudflare page requests ?
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@HugoDuprez449 Hey, so I haven't used Cloudflare but yes, their version of serverless function would do this also. Not sure about page requests though. Is that a cloudflare product?
@HugoDuprez449
@HugoDuprez449 2 жыл бұрын
@@DanFletcher90 Cloudflare Workers are the « serverless functions » of Cloudflare 😊 But there is no built-in restriction in request, if you have my endpoint url, you can use my api. A workarounds is to put secret 🔑 in headers, buts Netlify built-in restriction is juste way more simple!
@HugoDuprez449
@HugoDuprez449 2 жыл бұрын
@@DanFletcher90 There is any additional configuration than setup the folder structure to restric my serverless function to my app? I’ve just try to copy past my function endpoint and im able to use it without my app… :/
@lonewolfcoding5208
@lonewolfcoding5208 3 жыл бұрын
im using sublime and windows is this will work?
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey Arturo! Yeah this will still work with Sublime. You may have to use WSL2 if you're on Windows. That's actually what I'm using in This video!
@danielyyi
@danielyyi 2 жыл бұрын
What you finished typing at around 24:11 doesn’t work for me. It says “response isn’t a variable” or something like that.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Ah damn! Yeah that's a typo at 24:11 it should be `res.json()` instead. I don't think I end up actually looking at the console in this video anyway so that's probably why I missed that lol Just inspecting the request shows you everything you need Sorry about that!
@danielyyi
@danielyyi 2 жыл бұрын
@@DanFletcher90 I also did res.json but it also didn’t work. I’m not at home right now but I’ll explain in an hour or so
@danielyyi
@danielyyi 2 жыл бұрын
@@DanFletcher90 so I do res.json and the promise gets rejected saying “Syntax Error: Unexpected token < in JSON at position 0
@danielyyi
@danielyyi 2 жыл бұрын
This is in the App.js. I did a console.log in the function but it isn’t running so I think there’s a problem with how I’m calling it: fetch(‘/.netlify/my_functions/fetch-api’).then(res=>{console.log(res.json())})
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@danielyyi oh ok hmm. I'll have to double check later at that point in the video to see if that's expected or not. Not at my PC right now. If the response doesn't contain valid JSON it would make sense that there would be an issue there. I would just skip that detail for now and see if you can get through the rest of the tutorial. Everything should work by the end. In hindsight I probably shouldn't have put a console log there in the tutorial to begin with because it's kinda confusing lol
@CamillaTofani
@CamillaTofani 3 жыл бұрын
Hi Den! How are you? I'm at 25:00 minutes of the video but the file doesn't work. The file localhost:XXXXX opens, but have a text "Not Found" and the Network say me "404 Error". Do you have some idea? Thank you for your help!
@aissanadjemeddine1330
@aissanadjemeddine1330 3 жыл бұрын
hello Camilla , you have to make sure that you are typing the URL without typos and name of the function matches the name of the path inside the fetch function , I got the same before
@DanFletcher90
@DanFletcher90 3 жыл бұрын
Hey Camilla, did you end up figuring out what was wrong? One thing you can do is open the dev tools and check your network tab to see where the 404 is coming from. You should see a request for `localhost:8888` and if that's where the 404 is coming from it could be that your `index.html` file is not in the right place. Make sure the project structure matches exact from the video. It could also be that you are missing something or have typo in your `netlify.toml` file. Try double checking that too. Let me know if you need more help!
@CamillaTofani
@CamillaTofani 3 жыл бұрын
@@DanFletcher90 Hi! Everything works! Thank you! Tutorial much appreciated.
@DanFletcher90
@DanFletcher90 3 жыл бұрын
@@CamillaTofani Awesome!! Glad you go it working 😊
@Anunachi
@Anunachi 2 жыл бұрын
Hi Dan, great tutorial, I tried using it with react, but I'm getting a error and I can't find any info about it, the error is pretty long, ill put a part of it right here, would be great if you could help me :) Error: Must use import to load ES Module: D:\ eactJsProjects\\weatherApp\\weather-app\ ode_modules\ ode-fetch\\src\\index.js require() of ES modules is not supported. require() of D:\ eactJsProjects\\weatherApp\\weather-app\ ode_modules\ ode-fetch\\src\\index.js from D:\ eactJsProjects\\weatherApp\\weather-app\\functions\\fetch-weather\\fetch-weather.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey thanks! I'm not at my computer right now but I will be later and can probably offer better help then. My guess is that you're using node-fetch in your frontend which I don't think will work. Different module systems are used between the two. Try using just "fetch" instead and see if that works?
@Anunachi
@Anunachi 2 жыл бұрын
@@DanFletcher90 I imported fetch in the netlify function because it actually tells me that fetch is not defined The error im getting when not using node-fetch: Request from ::1: GET /.netlify/functions/fetch-weather?lat=51.50853&lon=-0.12574&units=metric ReferenceError: fetch is not defined at Object.handler (D: eactJsProjects\weatherApp\weather-app\functions\fetch-weather\fetch-weather.js:7:22) at Object._executeSync (C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli ode_modules\lambda-local\build\lambdalocal.js:286:47) at C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli ode_modules\lambda-local\build\lambdalocal.js:95:26 at new Promise () at Object.execute (C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli ode_modules\lambda-local\build\lambdalocal.js:87:16) at Object.invokeFunction (C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli\src\lib\functions untimes\js\index.js:57:36) at NetlifyFunction.invoke (C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli\src\lib\functions etlify-function.js:85:41) at processTicksAndRejections (node:internal/process/task_queues:93:5) at async handler (C:\Users\anunachi\AppData\Roaming pm ode_modules etlify-cli\src\lib\functions\server.js:104:33) Response with status 500 in 13 ms.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@Anunachi Oh I see you're adding this in the Node side of things. Ok so "fetch" is only available in browser-side JavaScript which is why you were getting the first error. "node-fetch" probably can work in replacement of (I haven't used the lib myself) but make sure you're importing like: const node-fetch = require('node-fetch') The original error you posted is related to not supporting ES Modules which is the `import "name-of-thing" from "directory/to/thing"` syntax. Which you can use in newer versions of Node now, but just not with libraries that don't support it. Hopefully that helps!
@Anunachi
@Anunachi 2 жыл бұрын
@@DanFletcher90 thanks for the response, actually in case someone has this problem, I fixed it by downgrading node-fetch version to 2.x have a great day Dan!
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@Anunachi Awesome! 🙌 Glad you got it sorted out :)
@fraternidadeaustriaca2625
@fraternidadeaustriaca2625 Жыл бұрын
extremely long winded, this video could easily be 10 minutes long
@DanFletcher90
@DanFletcher90 Жыл бұрын
Appreciate the feedback 🙏
@deanelie7775
@deanelie7775 11 ай бұрын
Thank you so much I was so frustrated with securing my Contentful API Keys (even if they are only read-only), this helps a lot!
@DanFletcher90
@DanFletcher90 10 ай бұрын
Glad this was helpful!
@beloaded3736
@beloaded3736 11 ай бұрын
Dan you are awesome thanks
@DanFletcher90
@DanFletcher90 10 ай бұрын
Thank you!
@vanib7873
@vanib7873 2 жыл бұрын
Thank you for the tutorial, at around 16:00. When I run npm run dev, I got a page showing me Index of / (-rw-rw-rw-) 564B App.css (-rw-rw-rw-) 179B App.js (-rw-rw-rw-) 61B index.css (-rw-rw-rw-) 222B index.js instead of hello. What am I doing wrong? I have been following everything. I would appreciate if you can help me out
@DanFletcher90
@DanFletcher90 2 жыл бұрын
Hey there! If you put your code up onto GitHub and share the link I can look into sometime this weekend and figure out what's going wrong :)
@vanib7873
@vanib7873 2 жыл бұрын
@@DanFletcher90 Thanks for the response, I think the problem is that I am doing it on a react project. From what I have learnt so far we don't do anything on the index.html which is different than what the video is showing. We use ReactDOM.render in index.js to shows the UI. I think that's why it's showing me all the files name on my src folder which are App.css, App.js, index.css, index.js. Is the method in this video works on react project? Or are there another video that specifically targeting react projects? I am relatively new to front end development and I am learning react. I hope what I am trying to say make sense.
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@vanib7873 Hey yeah what you're saying totally makes sense This video doesn't cover react unfortunately but from the Netlify side you'll want to make sure in your settings that you're running `yarn build` and set the root directory to `dist` I didn't have to do that for my app because its just plain JS/HTML with no build step Hopefully that helps I was thinking of doing a follow up to this tutorial to clarify some things too because you're not the first to get stuck following along :)
@vanib7873
@vanib7873 2 жыл бұрын
​@@DanFletcher90 I made a build folder using yarn run build. I don't really understand what "set the root directory to `dist` " mean. Am I supposed to make a folder called 'dist' myself? Can you please elaborate on it or link me to a material I can better understand? I think it would be a really good idea to do a follow up or make a separate video on react specific project. It's really hard for newbie like me understand all these. Thank you for all your hard work! :)
@DanFletcher90
@DanFletcher90 2 жыл бұрын
@@vanib7873 Hey no worries So I'm assuming you made your react project with create-react-app. If you run `yarn build` in your project you'll see that a `dist` folder gets created automatically This is where your application should be served from when you deploy it to a live environment like Netlify. In your project settings in your Netlify dashboard you can set a "build command" and you'll want it to be `yarn build`. Netlify will run this command every time you deploy your app which will then create a `dist` director on one of Netlifys servers. For Netlify to know where to serve your app from (build directories can be called anything) you need to set the "build directory" setting to be `dist`. This link may be useful too docs.netlify.com/configure-builds/get-started/ Good luck! And thanks!
Netlify Serverless Functions with Netlify Dev
12:17
James Q Quick
Рет қаралды 28 М.
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,7 МЛН
路飞被小孩吓到了#海贼王#路飞
00:41
路飞与唐舞桐
Рет қаралды 66 МЛН
HOW DID HE WIN? 😱
00:33
Topper Guild
Рет қаралды 40 МЛН
5 JavaScript API Key Mistakes (and how to fix them)
12:49
James Q Quick
Рет қаралды 73 М.
Deploy Websites In Seconds With Netlify
22:06
Traversy Media
Рет қаралды 225 М.
Hiding Your API keys in your code from Thieves
5:55
Tech-At-Work
Рет қаралды 948
Learn React Hooks: useCallback - Simply Explained!
17:15
Cosden Solutions
Рет қаралды 77 М.
Netlify Tutorial - How to build and deploy websites using Netlify
3:32:20
freeCodeCamp.org
Рет қаралды 110 М.
Hisense Official Flagship Store Hisense is the champion What is going on?
0:11
Special Effects Funny 44
Рет қаралды 2,9 МЛН
ИГРОВОВЫЙ НОУТ ASUS ЗА 57 тысяч
25:33
Ремонтяш
Рет қаралды 350 М.
Игровой Комп с Авито за 4500р
1:00
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 2,1 МЛН
Мой инст: denkiselef. Как забрать телефон через экран.
0:54
НЕ ПОКУПАЙ СМАРТФОН, ПОКА НЕ УЗНАЕШЬ ЭТО! Не ошибись с выбором…
15:23