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!
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! :)
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 :)
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.❤❤❤❤❤❤❤
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.
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 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?
@@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!
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.
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!
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?
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 🙏
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?
Hmm I'm not sure if I can answer that question very well as a RUclips 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!
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?
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!
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!
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())})
@@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
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.
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!
@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!
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!
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 ?
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 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)
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?
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
@@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🙂
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.
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!
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 🤗
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!
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
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!
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
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 )
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.
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
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?
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 RUclips 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!
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 :)
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); })
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!
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!
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?
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 RUclips 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!
@@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.
@@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 :)
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 :)
@@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?
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 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 😅
@@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!
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?
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 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?
@@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!
@@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… :/
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 😊
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.
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?
@@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.
@@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!
@@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!
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 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.
@@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 :)
@@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! :)
@@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!
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!
Glad this helped! Thanks for the comment 😊
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! :)
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 :)
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.❤❤❤❤❤❤❤
Awesome!! 🙌 Glad you got it working!
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.
I appreciate the feedback! Thanks!
So good!
I really appreciate the nice slow pacing and detailed over-explaining!
Thank you!
Thanks for making this video. I was having trouble finding a solution to manage secrets and now I know.
Glad I could help!
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.
Thanks Felipe!! ❤️
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
Hey glad this helped 😊 Thanks for the kind words!
Thank you, really appreciate a long and in depth video about this topic. Its often overlooked
Hey glad you found this helpful! Appreciate the comment 🤙
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!
Hey thanks for the feedback! Yeah definitely agree the font needs to be larger in this video :)
@@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?
@@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!
such an underrated video! Half way in the video and i already leraned so much. Great stuff!
Thanks you so much! 🙏
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.
Oh that's amazing! Appreciate hearing that feedback :)
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!
Hey thanks so much for the kind words! Glad this was helpful!
Spectacular video Dan, really helpful. Thanks a lot!
Thank you!!!
This was super helpful! Got my first netlify function to work 🥳
Awesome 🙌 glad this helped!!
Hi Dan,
This video helped me a lot. Thank you for your well-organized explanation!
That's great to know! Really appreciate the feedback!
Finally!!💃💃 Thanks for the video
Glad you liked the video! 😊
Thank you so much Dan! I am really grateful for this amazing tutorial.
Glad this was helpful!!
Thank you so much Dan, this helped me a lot. Very well explained!
Hey Rosella, thank you so much! Sorry that I'm only seeing this now. I'm just realizing RUclips hasn't been sending me notifications more comments 😅
WOW thank you !!! you got a talent to teach. Thank you for sharing your knowledge.
Aww thank you so much!!
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?
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 🙏
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?
Hmm I'm not sure if I can answer that question very well as a RUclips 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!
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?
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!
What you finished typing at around 24:11 doesn’t work for me. It says “response isn’t a variable” or something like that.
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!
@@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
@@DanFletcher90 so I do res.json and the promise gets rejected saying “Syntax Error: Unexpected token < in JSON at position 0
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())})
@@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
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.
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!
Well taught mate. Thanks 😀
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!
Glad this was helpful!
@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!
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!
Thanks for your video! Netlify documentation on functions is shit, you saved my day!
Hey no problem! Glad this was helpful ☺️
Thank you so much, your video helped me a lot
Glad it helped!
Thank you Dan 👍
You're welcome!
Amazing video, really helpful. Thanks.
Hey, thanks so much!
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 ?
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 :)
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
@@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)
@@DanFletcher90 i will do this, thanks
@@kevinalexanderrodriguezria6555 no problem!
Great video!
Thank you!
Would this also work if my API key has to be inside a header?
Yes absolutely! From the Netlify function you can authenticate with the API however the API needs you to
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?
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
@@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🙂
@@phillbaska hey no worries! YT failed to show me this notification though so sorry for the late reply lol!
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.
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!
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 🤗
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!
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
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!
@@DanFletcher90 Hi! Everything works! Thank you!
Tutorial much appreciated.
@@CamillaTofani Awesome!! Glad you go it working 😊
great video. thank you for your sharing
Glad it was helpful!
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
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 )
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.
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
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?
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 RUclips 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!
@@DanFletcher90 Thanks alot for taking the time to reply. Really appreciate it!
Hey, no problem!
Hi Dan, thanks for this. Can I ask if the API Key is accessible in Dev Tools should anyone inspects? Thanks
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 :)
thank you for making this simple!
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);
})
You're so welcome!
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!
Thank you. Very helpful.
How is your VS Code auto complete is very smart? it even auto completed the API params.
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!
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?
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 RUclips 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!
@@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.
@@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 :)
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 :)
@@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?
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
Hey no problem! I actually don't know what tomcat is 😅 do you have a link?
@@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 😅
@@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!
thanks man!
No problem!
im using sublime and windows
is this will work?
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!
I love your VS code Theme.. what is the name please ;)
Thanks! It's Monokai Pro with the "Machine" theme set. Font is Cascadia Code with ligatures turned on :)
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?
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.
@@DanFletcher90 Wow, that’s amazing… There is a same restriction for cloudflare Workers function and Cloudflare page requests ?
@@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?
@@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!
@@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… :/
This tutorial was ver helpful.
Please, what's this theme used in vscode?
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 😊
@@DanFletcher90 Thanks!
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.
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?
@@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.
@@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!
@@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!
@@Anunachi Awesome! 🙌 Glad you got it sorted out :)
extremely long winded, this video could easily be 10 minutes long
Appreciate the feedback 🙏
Dan you are awesome thanks
Thank you!
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
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 :)
@@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.
@@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 :)
@@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! :)
@@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!