Next.js & Identity (auth) Tutorial #8 - Netlify Dev

Key Takeaways

okay then so now we've created our first netlife function and we've deployed it and we can access it using this endpoint right here we can access that from the browser and we get that response that we want but i want to test my functions locally before i deploy them and currently i can't do that because our local dev server doesn't run them or even know about them so if i was to try and access our functions using localhost port 3000 like this it doesn't work however we can install the netlife cli to give us access to a special netlify dev command and this will spin up a local server so we can preview our site just like before just like this but it will also allow us to run functions locally too now netlify does this by running our functions on one port and our next js site on another port so we have two separate things running on different ports one with our site and one with the functions now by default they can't communicate with each other because they're on different ports so netlify dev spins up a proxy server as well on a single port to bring these two things together under this one port so they can communicate with each other so now we can just use the one port on localhost preview our site and access our netlife functions so let's try installing the netlife cli to do this so you want to install this globally on your computer so in a terminal type npm install netlify hyphen cli and then hyphen g to install this globally on your computer so press enter to do that all right then so now that's installed we can now run netlify dev but before you do this make sure the other process which is running our site on localhost port 3000 when we typed npm run dev right here make sure you cancel out of that process so control c and then yes because this command over here netlify dev is gonna spin up a server at port 3000 as well to show our site on but it's also going to create the proxy server on a different port but it is going to use that 3000 port so make sure you cancel out of the other process first then you can run netlify dev and if we take a look at this let's just make it a bit bigger we can see we've got localhost oops it's opened up already for me let me cross off that we can see we've got up here localhost on port3000 this is for our website but then also it's created this proxy server for us as well and using this we can preview the website but also we can access the functions so we can see that's the one that's opened up right here now there is a problem we don't see any of the links inside the nav bar over here and that's because we're using this different port right here now before when we started to use netlify identity we had to enter in the development settings so it could communicate with netlify on the back end now we've not done that for this port so we need to go to our nav bar just very quickly and i want to close this for a second and what i'm going to do is comment out this where we say auth ready and this as well and i'm going to save this come back over here and now we see this login thing now when we click on this it's again going to ask us for the url of our netlify site so it can communicate with it so every time we use a different localhost port you're going to have to do this so i'm going to go back to our project and i'm going to grab this thing right here so copy that and paste it inside here set the site's url and now i can log in and log out and all that kind of jazz so now i can go back over here and uncomment this because it's now going to work oops don't know what we've done there let me just uh ctrl z let's get rid of this right here and we just want to add in our parentheses again riley messed that up but now that should work so if i save we can still see this let's just test the login flow i'm going to say mario at the netninja code it uk and then test1234 and then i'm gonna log in and now we can see this all works and i can log out as well awesome so now we're previewing on this port i can access the functions on that port as well so if i go to functions and grab this function endpoints all the way up to here so not the domain right here but this part of it this part of the path i'm going to copy that and i'm going to paste it after localhost port 8888 and now i should be able to access it oops i've grabbed all of it i want to take a lot of this away so all of this so just from netlify if i press enter now now it works now we can use that function locally which is awesome so what i could do now is make a request to this endpoint right here to fetch this data from one of our page components so i'm going to do that from the guides component right here so let's open up that guide component inside the pages folder right here and to do this we're going to be using use effect so use effect and i'm going to click on this to auto import it from react this is gonna fire a function and we're gonna pass in an empty dependency array so it just fires once when the components first mounts all right so let's do a fetch request and we're gonna paste in this url right here so it's a relative url so this is going to work locally and also when we deploy this as well so we're going to fetch that resource and then down here we tack on the then method to fire a function when this is complete because it's asynchronous it returns a promise so we take the response inside this function and we do something with it now when we're using the fetch api like this we have to take this response and grab the json data from it and pass it into something we can use now to do that we say response.json which is a function this is also asynchronous and returns a promise so we tack on a then method again to fire another function when we actually have that data returned to us from this and we take that data into this function and we can do something with it so i'm just going to log that to the console console.log data and remember that data is going to be this thing right here so let's give this a whirl i'm going to open up the console now over here and if i refresh it's going to make that request and now we see this data right here this object so we've made a request to our function the function runs at the minute locally but later on it's also going to work when we deploy this as well and it's retrieving that json data for us and we're just logging it to the console so now we know how to work with netlife functions we know how to deploy them we also know how to work with them locally using the netlify cli and netlifydev in the next video what we're going to do is create another function that is going to help us work with netlife identity to detect whether a user is logged in or not and then we can return a response dependence on that status if they're logged in we'll return data if they're not we'll return something else some kind of error so we'll start that process next