Thanks a lot! Your tutorial is clear, at perfect speed and focuses on the topic. I understood everything! Now I can have fun with serverless functions 🙂
Hi man, before of everething, sorry for my bad english. It's going to end this year so I would like to watch a video about the new trends in tech for 2019 and trends for development methodologies. Congrats for all your videos
im glad im not the only one that thinks AWS is over complicated. I wanted to install an SSL cert and enable HTTPS for my domain but its been like 3 days and I could not do it. I have HTTPS on my digital ocean droplet.
If you are getting an error try changing the code in main.js from: await (await fetch('/.netlify/functions/getusers')).json(); to await (await fetch('/.netlify/functions/getUsers')).json(); getUsers instead of getusers
Cool. would love to see a netlify identity tutorial for Single Page Application.. Where to store the token? localstroage, cookies, how to authenticate etc. Also what about netlify CDN's for static site and functions? i cant find much information or where their edge servers are located? my website hosted on netflify ping response times are over 600m from aisa, so i guess all their servers are in the US, which is little disappointing, would like to get it down to 30ms (regional)
Hi ImpZero. I have used Now for a couple of small side-projects. Question is: does Now have the same sort of simplified wrapper for AWS Lambda functions like netlify-lambda?
Can you perhaps do a small video on how to get started with the GitHub API ? Also is using server less functions a standard way of hiding API keys on the client side ?
Using server-less, lambda functions, is not a standard way to hide your API Keys. I suppose the standard might be to store them on the server somewhere but, when you netlify or a JAM (javascript, API, markup) stack setup, there is no server. Unless build one or, find a hosted solution like Heroku or digital ocean etc. even then, you might have to build your own API. This is where server-less, lambda functions come into play. Though you can hard Code your API keys 🔐 in your functions and no one will see them it’s not recommended. If you’re storing your code in a public repo, there is a chance your keys will be exposed at some point. There are probably some other ways to see the keys, but figuring out how to do that is above my skill level right now. A better way to hid your keys is to store them in environment variables but, the keys still have to be stored somewhere. Like in a config file on your server, but, we don’t have a server. You can store them in a file, like with Netlify you can store them in your .netlify.toml file but, this file might end up on github if you don’t add it to your git ignore file but, having your .toml file in your .gitignore means everyone that clones / forks your repo has to recreate the toml file. So, the best way to hide your keys, when using netlify, is to use the GUI Setting in the admin panel. Then, In your toml file you can either leave out your api info or, you can just reference the environment variables in the tome file. Maybe with some comments for other devs on how to setup their own API Keys using the netlify admin panel. By storing you API secrets in the netlify admin panel no one can see them, ever, unless they are elite hackers and or have access to your netlify admin panel. So, back to your original question. Kind of. When your website / web app calls your function, a container is created to run it. This container could technically be called your server, it does the same thing any other server would do but, it’s a temporary setup, and it’s stateless, it remembers nothing and will be destroyed at some point in the near future. This is the main downside of netlify, the JAM Stack and server-less functions in general. But, this means that we don’t have to pay to maintain a servers along with allot of other benefits. To save us from having to figure out how to store sever state and invoke the state whenever we run a function, netlify gave us a place to store our secrets so we don’t accidentally deploy them to github or bit bucket or whatever version control system we use. They store the keys on their servers, I think 🤔, and just inject them into our temporary server environment at build time. This means our function can access the keys and whatever else we inject once the container is up and running. Our function just needs to reference the environment variables we set in the admin panel. Once you get your head around that, you can do all kinds of stuff that maybe netlify never thought of. We could potential store our entire application state this way. I hope that all made sense. If you have more questions feel free to ask.
Great tutorial. Just wanna say the above link for the code (github.com/netlify/netlify-lambda) is from netlify, so if people wanna follow what Brad did, this is the code in github. Maybe Brad made a typo? github.com/bradtraversy/netlify_lambda
hello sir.....i don't like your videos .......bcz i love your videos...sir you are doing great work i really love your way of teaching in deeply.........and you make the contents so simple for understanding....keep it up a lots of love from INDIA...
Well it is not that hard to setup AWS Lambda/ API gateway/ database stack :) few days of learning IAM roles etc and you can do it without third party services 👍 I think this was kind first your video that I was figuring immediatelly that why Brad whyyy 🙂
Another question: why not directly access the Netlify environment variables (such as authorization credentials) in JavaScript (client-side) code rather than passing off that functionality to netlify functions? That will still keep them hidden, right, as they are not hard-coded in the client-side code? Right??
Alright that doesn't make sense if client-side code can directly access the env variables. So... Netlify environment variables can only be accessed inside Netlify functions?
So what really is the difference between netlify-serve and netlify-build? What is the difference in the effect that they have? As far as I can see both have the same effect except that Netlify-build does not start the local server - is that correct?
How would you do this with an API that requires Basic Auth? I'm confused as to if it's just an additional line of code that can be added, or if the whole entire program needs to be rewritten. Thank you so much!
At 16:30, why do we need to use JSON.stringify again? Isn't the parameter called *body* already in that format (because it has been received as such from the GitHub API)?
Hey Brad, thanks for the tutorial. I followed along and everything works properly. However I have a question about workflow. Every time I want to work locally I have to add Access-Control to the headers and change the fetch URL. Then before pushing to GitHub I need to make sure I comment out the access control and change the fetch URL again. Is there an efficient way to do this? And also is there a way to make sure I don't push to GitHub unless the proper netlify functions fetch URL is being used?
Hey Bard, this weekend please try out a scrolling animation library front end project... Like you did with scroll reveal.... But scroll reveal is updated now... So I would request you to try out a library like sal.js.... I tried it but really got confused so just waiting till you try your hands upon it
Always innovative!I would like to ask you if you have lessons of how to make mutipage website dynamic with node js?I have i 5 pages static website and i would like to make it dynamic.If not can you make a course and you how we can do it.of course i am going to pay you the course.
Hello travis. I am having an error with the function whenever i try to run the lambda-serve command. the error says digital envelope routines::unsupported. Ive been troubleshooting for a while to no avail. at first i assumed it was because i did not have openssl downloaded but after downloading it i still recieve the same error. If you or anyone would know about this issue and possible solutions I would be so grateful and you would be helping me out big time. Thank you for your time
what is the difference between build environment in netlify lamda function vs the build environment of react app(i.e create-react-app) deploy in netlify
You should gitignore the compiled folder, not the source folder. In your case you should have gitignored the 'lambda' folder, not the 'functions' folder. And then on your Netlify dashboard you go your build settings and tell Netlify to run your build command on deploy. "npm run lambda-build". This way your compiled functions won't be exposed (a potential security risk) and will allow you to do continuous deployment without having to manually build your lambdas every time you make a change. I see on your github that you already fixed half of this after making this video, by removing 'functions' from gitignore. But you're still missing the other half of the solution. But great video nonetheless. It was a huge help. Thank a lot and keep up the good work!
Am also not a fan of AWS. I found the console to be over-complicated and there's no clarity on what is billed and what resources are free to use during the trial period
Brad ,Please make a simple tutorial on how your set your google welcome page that says" Welcome Brad or Good Morning Brad", displaying the time as well. Please Sir
Brad loves the noobs! It’s just hard to cover everything in one video. He has some pretty bad ass courses on his and on udemy. I took his es6 course, best jabascript course ever. If you go through it 3 to five times you will be a JavaScript Jedi and web development wizard.
You not only mentor me, you inspire me at the same time... you are one of the best teachers out there
I was looking for some tutorial to deploy serverless apps, then I found this one, honestly it's a great one. Thanks Brad.
Thanks a lot! Your tutorial is clear, at perfect speed and focuses on the topic. I understood everything! Now I can have fun with serverless functions 🙂
This video right here unblocked me after being stuck for 8+ hours. Subscribed!!!
Great tutorial. Cleared up few confusions on netlify. Thanks a lot.
all time favorite youtuber...great work Brad...this is all I need
It is really great job how you organized your thoughts and the flow of explaining the subject, thank you, you are an amazing instructor
U r good teacher 😍
Thanks :)
Absolutely, no doubt about that.
Hi man, before of everething, sorry for my bad english. It's going to end this year so I would like to watch a video about the new trends in tech for 2019 and trends for development methodologies. Congrats for all your videos
Ángel Ugarte the JAM stack is where it’s at.
Suuuuuper helpful. Thanks for walking through each step
traversy media
Awesome video. Netlify is way cool. More please on this and look forward to JWT /Netlify video
Thank you for the thorough explanation. Well done tutorial.
im glad im not the only one that thinks AWS is over complicated. I wanted to install an SSL cert and enable HTTPS for my domain but its been like 3 days and I could not do it. I have HTTPS on my digital ocean droplet.
Same, I tried to use S3 buckets in a project and couldnt get it working!
If you are getting an error try changing the code in main.js from:
await (await fetch('/.netlify/functions/getusers')).json();
to
await (await fetch('/.netlify/functions/getUsers')).json();
getUsers instead of getusers
Best video on lambda functions thanks a lot for the video
Cool. would love to see a netlify identity tutorial for Single Page Application.. Where to store the token? localstroage, cookies, how to authenticate etc.
Also what about netlify CDN's for static site and functions? i cant find much information or where their edge servers are located? my website hosted on netflify ping response times are over 600m from aisa, so i guess all their servers are in the US, which is little disappointing, would like to get it down to 30ms (regional)
Yea please
one headache conquered, thank you so much
Hmm... this might be the best way to learn website callbacks... Just what I want!
awesome! this channel keeps on giving me good content. I binge watch your vids man! keep up the good work.
Oh man I don't know how you keep making awesome videos about things I can't wait to learn about!!! Keep up the great work 😎🔥
Azure function are pretty simple. Maybe you should cover that. Would love to see you cover microservices.
I feel like a little girl in a candies-job ....please continue!
I see that you use Mac now mostly for your videos.
Why do you like it more for programming over Windows?
Thank you for all the videos btw! :)
Cause it deletes files randomly? lol
Mac is the best for developers....Next comes Linux.....Even Microsoft Developers use Mac...just check it out
Probably to test IOS apps. You can't test IOS apps on windows.
@@thedeveloper4207 it didn't work that way.
@@androidgeeking So you support Microsoft??.... And not Linux and Mac?
Thanks Brad!
You should really give azure a shot great documentation and it’s very intuitive
Mukundh Bhushan I was all about azure until I wrapped my head around server-less functions and realized I could do everything with netlify.
I love your videos, and I'm curious to know your process for creating these screencasts, it'll be great if you do a video about that.
Great tutorial!
What do you think about Now 2.0
Are you interested in making a video about it? Great tut btw! 😁
Hi ImpZero. I have used Now for a couple of small side-projects. Question is: does Now have the same sort of simplified wrapper for AWS Lambda functions like netlify-lambda?
@@LesCarbonaro I see
Even though you're a Red Sox fan (go Yanks!) I still always watch your vids. Great stuff as always.
GOAT in Javascript Development 🙂 cheers
tokyo ghoul reference ? LOL
GOAT = Greatest of all time
That was Great! But what are the pros/cons using Lambdas instead of using a restfull api node js server?
awesome work!
WOW, this is cool! I really enjoyed :)
Can you perhaps do a small video on how to get started with the GitHub API ? Also is using server less functions a standard way of hiding API keys on the client side ?
Using server-less, lambda functions, is not a standard way to hide your API Keys. I suppose the standard might be to store them on the server somewhere but, when you netlify or a JAM (javascript, API, markup) stack setup, there is no server. Unless build one or, find a hosted solution like Heroku or digital ocean etc. even then, you might have to build your own API. This is where server-less, lambda functions come into play.
Though you can hard Code your API keys 🔐 in your functions and no one will see them it’s not recommended. If you’re storing your code in a public repo, there is a chance your keys will be exposed at some point. There are probably some other ways to see the keys, but figuring out how to do that is above my skill level right now.
A better way to hid your keys is to store them in environment variables but, the keys still have to be stored somewhere. Like in a config file on your server, but, we don’t have a server. You can store them in a file, like with Netlify you can store them in your .netlify.toml file but, this file might end up on github if you don’t add it to your git ignore file but, having your .toml file in your .gitignore means everyone that clones / forks your repo has to recreate the toml file.
So, the best way to hide your keys, when using netlify, is to use the GUI Setting in the admin panel.
Then, In your toml file you can either leave out your api info or, you can just reference the environment variables in the tome file. Maybe with some comments for other devs on how to setup their own API Keys using the netlify admin panel.
By storing you API secrets in the netlify admin panel no one can see them, ever, unless they are elite hackers and or have access to your netlify admin panel.
So, back to your original question. Kind of. When your website / web app calls your function, a container is created to run it.
This container could technically be called your server, it does the same thing any other server would do but, it’s a temporary setup, and it’s stateless, it remembers nothing and will be destroyed at some point in the near future.
This is the main downside of netlify, the JAM Stack and server-less functions in general. But, this means that we don’t have to pay to maintain a servers along with allot of other benefits.
To save us from having to figure out how to store sever state and invoke the state whenever we run a function, netlify gave us a place to store our secrets so we don’t accidentally deploy them to github or bit bucket or whatever version control system we use.
They store the keys on their servers, I think 🤔, and just inject them into our temporary server environment at build time. This means our function can access the keys and whatever else we inject once the container is up and running. Our function just needs to reference the environment variables we set in the admin panel. Once you get your head around that, you can do all kinds of stuff that maybe netlify never thought of. We could potential store our entire application state this way.
I hope that all made sense. If you have more questions feel free to ask.
Great tutorial. Just wanna say the above link for the code (github.com/netlify/netlify-lambda) is from netlify, so if people wanna follow what Brad did, this is the code in github. Maybe Brad made a typo?
github.com/bradtraversy/netlify_lambda
hello sir.....i don't like your videos .......bcz i love your videos...sir you are doing great work i really love your way of teaching in deeply.........and you make the contents so simple for understanding....keep it up a lots of love from INDIA...
Lots of love from Toilet Country
Well it is not that hard to setup AWS Lambda/ API gateway/ database stack :) few days of learning IAM roles etc and you can do it without third party services 👍 I think this was kind first your video that I was figuring immediatelly that why Brad whyyy 🙂
Nice video!!
If I have many endpoints, should I insert these as environment variables?
What is the advantage of serverless functions in comparison to just writing a classic backend app?
No server needed
Another question: why not directly access the Netlify environment variables (such as authorization credentials) in JavaScript (client-side) code rather than passing off that functionality to netlify functions? That will still keep them hidden, right, as they are not hard-coded in the client-side code? Right??
Alright that doesn't make sense if client-side code can directly access the env variables. So... Netlify environment variables can only be accessed inside Netlify functions?
So what really is the difference between netlify-serve and netlify-build? What is the difference in the effect that they have? As far as I can see both have the same effect except that Netlify-build does not start the local server - is that correct?
How would you do this with an API that requires Basic Auth? I'm confused as to if it's just an additional line of code that can be added, or if the whole entire program needs to be rewritten. Thank you so much!
At 16:30, why do we need to use JSON.stringify again? Isn't the parameter called *body* already in that format (because it has been received as such from the GitHub API)?
Do you have to set budgets / price limits on the lambda functions?
You are Great !
Hey Brad, thanks for the tutorial. I followed along and everything works properly. However I have a question about workflow. Every time I want to work locally I have to add Access-Control to the headers and change the fetch URL. Then before pushing to GitHub I need to make sure I comment out the access control and change the fetch URL again. Is there an efficient way to do this? And also is there a way to make sure I don't push to GitHub unless the proper netlify functions fetch URL is being used?
It would be great if you did the project with Identity (authentication) too
Thank u for this awesome video
Hey Bard, this weekend please try out a scrolling animation library front end project... Like you did with scroll reveal.... But scroll reveal is updated now... So I would request you to try out a library like sal.js.... I tried it but really got confused so just waiting till you try your hands upon it
Is it possible to send files in POST requests rather than just JSON? Netlify does not currently support "multipart/form-data".
Always innovative!I would like to ask you if you have lessons of how to make mutipage website dynamic with node js?I have i 5 pages static website and i would like to make it dynamic.If not can you make a course and you how we can do it.of course i am going to pay you the course.
Will you potentially do any AWS videos?
Still first , stay blessed sir
amazing
Hi Brad, please can you make a tutorial on Flamelink (Firebase CMS) to create a blog website!
if you make a request atleast spell the guys name right! peace.
@@nikhilgoyal007 Sorry I didn't notice .. I was writing through my phone.
Edited ...
@@ghanimalmarzouqi3277 it's cool, no apology needed please. thanks for your attention!
Hello travis. I am having an error with the function whenever i try to run the lambda-serve command. the error says digital envelope routines::unsupported.
Ive been troubleshooting for a while to no avail. at first i assumed it was because i did not have openssl downloaded but after downloading it i still recieve the same error. If you or anyone would know about this issue and possible solutions I would be so grateful and you would be helping me out big time.
Thank you for your time
Wonderfll !
Is it possible to do something similar to make a crud with MySQL using lambda functions?
Ahsath yup, you would have to build an api for your database calls though unless you can find a hosted MySQL database that comes with an API.
what is the difference between build environment in netlify lamda function vs the build environment of react app(i.e create-react-app) deploy in netlify
I don't get it, functions folder isn't in VCS? how do you develop it? Only you can deploy it, noone else on your team can?
You should gitignore the compiled folder, not the source folder. In your case you should have gitignored the 'lambda' folder, not the 'functions' folder. And then on your Netlify dashboard you go your build settings and tell Netlify to run your build command on deploy. "npm run lambda-build". This way your compiled functions won't be exposed (a potential security risk) and will allow you to do continuous deployment without having to manually build your lambdas every time you make a change.
I see on your github that you already fixed half of this after making this video, by removing 'functions' from gitignore. But you're still missing the other half of the solution.
But great video nonetheless. It was a huge help. Thank a lot and keep up the good work!
Am also not a fan of AWS. I found the console to be over-complicated and there's no clarity on what is billed and what resources are free to use during the trial period
Brad please make a course on Wordpress theme development :(
Why is the functions folder ignored in git & not the lambda folder?
Because the lambda folder is the source folder that netlify uses to build the functions when deploying.
Netlify + Nuxt, maybe another udemy course?
tnk u sir!
please make playlist for creating project or making a site in php................please
let nextVideo = "Nuxt and Netlify Large Media"
Please make a more videos on php.
Thanks love u
Wouldn’t you use environment variables to hide your API secrets etc?
That's what he did
Why using axios, node.js couldn't make the http request on it owns?? I am kind of newbie :)
Axios just makes requests simpler
Can I use this with Spotify’s Web API and deploy it to Netlify?
Kevin T you can.
Brad ,Please make a simple tutorial on how your set your google welcome page that says" Welcome Brad or Good Morning Brad", displaying the time as well. Please Sir
it's a chrome extension chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=pt-PT
Web development guide 2019 ..
anyone else need to use body.data in their JSON.stringify() function to avoid a type error?
So is Netlify just an AWS retailer?
*receives json data back from github*
> It looks like shit...
nice
I find another serverless named zeit(zeit.co). It's also free and supports Dockerfile.
AGAIN 😂😂😂
First
greate
Exactly; aws overcomplicated. Hate their madeup tech names.
You don’t favor the newbies😒
Brad loves the noobs! It’s just hard to cover everything in one video. He has some pretty bad ass courses on his and on udemy. I took his es6 course, best jabascript course ever. If you go through it 3 to five times you will be a JavaScript Jedi and web development wizard.