Netlify Serverless Functions with Netlify Dev

what's up everyone if you have followed my content at all you will know that i am a huge fan of netlify for hosting as well as serverless functions in this video i want to talk about your netlify serverless functions and how to run them locally with a command called netlifydev so that's what we're going to talk about and i'll see you there [Music] alright so first off i want to mention that this video is sponsored by scrimba and specifically their front-end developer career path i created a video about this a couple of weeks ago but this is a full path for you to follow to become a web developer i spent a lot of time going through youtube videos and little one-off courses this puts all of that stuff together so that you can be on your path to becoming a full web developer so for 25 a month this is a special that ends at the end of july so you've got a little bit of time left to sign up you got 75 hours of content with lots of challenges and some really amazing instructors and different courses that are in here i want to scroll you down to uh the section on what you'll build pacman a joke generator a netflix clone some really cool apps and then you're going to have some amazing teachers that you have probably seen before cassidy williams kevin powell bob zero gary simon and myself is one of them and then a couple of more anya and dylan israel and carl and jesse hall so a lot of these people are top-notch creators i definitely recommend checking out the curriculum and seeing if it makes sense for you to get on your path to becoming a front-end web developer so all of that said what we're here to talk about is again a command called netlifedev so let's start with just netlify in general netlify is first and foremost a hosting platform for static sites netlify is really active in the jamstack ecosystem and with these static sites basically what you do is you take your files from your site and you usually go through a build process and react or something and you take those files and you upload them to netlify or you connect netlify to your github repository with your source code and then have it do a build and then host the static assets for your site it's super fast it is a cdn a content delivery network things get replicated all across the world it's the easiest way to host a static site hands down in addition to that a lot of the concern that people have with the idea of the jam stack is how do you add that back in functionality well this is where netlify serverless functions comes in and they are in my opinion the easiest way to get started with net with serverless functions is netlify functions now i do want to let you know if you're interested in what we covered today in terms of netify and how to set all this stuff up on learn.jamesquick.com you can find a bunch of different resources that i've created including the netlify functions cheat sheet this will give you kind of a one-pager two-pager of the things that we talked about today so that you can go and set this stuff up yourself highly recommend checking that out so with netlify functions what happens is i'll show you i've got a project created here that is deployed in netlify it has a section here for functions and you can see that i've got a couple of different functions that are hosted by netlify and this is all just from having files inside of my repository so i want to show you what this app is it's a course tracker and this is all just dummy data here but i could add a new course and say www.jane something um anyway and then i saved this thing and it comes up in one of these sections down here i think it's this one anyway so all of this information is stored in air table it's a react application on the front end and then the middle layer of air table and react is serverless functions and again this is the easiest way to get started with serverless functions is through netify i love them if you're interested in how to build this app in a week or two from now when i'm recording this and when i release this uh there will be a video explaining this and then i will add a link to that video up here when it is ready so let me look at uh let's look at the source code for this uh inside of my functions directory i've got a bunch of different files which i should probably move around a bit but the main one is i've got a courses file function where i detect which method the user is calling get post put delete and then i call the appre appropriate function to handle that incoming message now this is not a course on serverless functions i'm just kind of showing you what's here and then i'll show you how i run these so that i can do everything together so this uh if i actually well i guess um this is basically your back end right like these are the serverless functions and netlify all you have to do is add a functions directory it actually could be titled anything you want typically people call it functions and then you need a configuration file a netlify.tamal file that does two things it specifies where your functions are so this is saying my functions live in which directory just so happens to be called functions as well so that's where they live and then for a little bit of a convenience i've added this redirect where instead of having to type out the full default path of localhost blah blah dot netlife function slash and then the name of the file that's where the name comes from from the endpoint is the name of the file i did a redirect so i could do slash api star so slash api slash and then the name of the file so this is the configuration that you'll most likely want to have when you have that in place you will want to make sure that you have npm installed g the netlify cli installed so this is the package that we're going to use to be able to run this site locally so this netify cli i had an issue with this the other day where make sure that you have a version greater than 2.50 so i think what i'll get is like 2.58 or something make sure you have 2.5 something greater than 2.50 to make sure this will work well when that thing is installed and yet this is 2.58 what we'll have access to is the netlify dev command now keep in mind this source code is a react project so all of all the stuff is react except for the functions directory which will be our function if you want access to this to the source code you want to get a look at that early before the video comes out you can grab this on my github and it is build a jamstack course tracker with react serverless and airtable so you can go and grab this source code as well just to take a look so when i run this netlife dev what netlifydev does is it looks for or it knows about common different types of uh applications that you might be running in this case it recognizes that i have a react project it can recognize vue and next and gatsby and nux probably and all these different things and what it does is it takes the functions for the serverless functions and it runs those and then it takes the front end and it runs that and typically those run on different ports so react by default runs on 3000 i think the serverless functions by default uh here it's 60109 that's probably just a random port but they can't necessarily talk to each other because they're on different ports what netlify dev does is it goes ahead and sets up that proxy so that now for my front end and if we look at let's look at one of these components the course form for example you can see all i do is make a relative path call to slash api courses now the reason i'm able to do slash api is because of this redirect right otherwise i would have to do netlify functions and since this is just a relative path netlifydev takes care of the proxying from the front end to your serverless functions and now if we look at this on localhost 8888 you can see that we've got this running and if you notice that that data loaded let's actually refresh so i can show you this call it's making a call to localhost let's look at this uh 888 api slash courses and netlifedev takes care of the redirect uh behind the scenes which is absolutely incredible so by running netlifedev it can run your local project your front end and your serverless functions and let them talk together just as if they were deployed now after you deploy this by uh just connecting netlify to are creating a site and connecting it to a github repo so you can clone that repo and you could connect your own site to it inside of functions again netlify recognizes where your functions directory is and it adds a function for each one of these and technically i should move these around because the only one that's actually a function or like a serverless function is courses.js but that's besides the point so let's look in one more thing i want to show you is if i look in my deploys none of my deploys my deploy settings there's a setting in here for environment variables that i didn't want you to see i'm gonna have to edit that out but in my environment variables i've got things like my api key for airtable now when i run this locally i have a dot env file that includes those variables and then i use them inside of my application so inside of my serverless functions if you look at the airtable configuration i'm using process.env.airtable api key so while running locally i have to add the environment variables and configure them myself but if we do a netlify link so with the netlify cli you can run netlifylink and this will go out and look in netlify you have to log in first so you'll have to go through a login process in netlify after you do run netlify link you can choose to connect your local site to the site out in netlify and so i'm going to do that based on the get remote origin so the site indelify is connected to the git repo that i am working on locally so i can connect it that way and it's looking for a site and it says it's linked what it does is it creates this dot netlify directory included in it is a state.json and it has a site id a unique identifier for that site so what's really crazy is if i had gotten rid of that dot env file which i won't do for now but when i run netify dev again you'll see netify dev will actually grab the environment variables from i have to let it load and then kind of scroll back up but it's going to grab those environment variables from netlify dashboard and inject them into me running this application locally now then it follows up and overrides it with things that are in my dot env file but i could again i could get rid of the dot env file i could get rid of the emv package and i could just run netlifydev to run all of this stuff together let it talk to each other and then pull the environment variables from the netlife dashboard uh this is all so sweet this is the coolest easiest way most fun way to get started with netlify functions to build a full stack jamstack application and i did want to share one other thing recently i created a jam sac crash course i guess i'll have to skip ads on my own video you think like if it's your own video you could kind of skip it but so inside of this jam stack crash course another video you should check out um you can learn how to put all of this stuff together netlify serverless functions netify hosting you see that i'm on that page to start and react in everything that you need to create a full stack application so go check out that video i will also have a link to the coming video for the build a jam stack course tracker with react serverless and airtable you've got lots of different resources that you can check out whenever you are ready so that's going to wrap it up for this video i'm curious how many of you out there are already using netlify maybe for hosting or specifically for serverless functions and how many people are using that netlifedev command to run locally let me know in the comments below i'd love to hear from you and share any cool projects that you're working on so i can go and see them as well thanks for checking out the video and i will catch you in the next one

Channel: James Q Quick

Views: 12,435

Rating: 4.7446809 out of 5

Keywords: netlify dev, netlify, netlify serverless functions, netlify functions, netlify hosting, netlify static hosting, jamstack, javascript, netlify tutorial, netlify deploy, netlify deploy static site, netlify deploy github, what is netlify, web development tutorial, netlify lambda functions, netlify environment variables, web development, aws serverless, netlify hosting tutorial, netlify lambda tutorial, netlify dev functions, serverless, netlify cli

Id: bVmUHvVK8Hs

Length: 12min 16sec (736 seconds)

Published: Tue Jul 21 2020