Azure functions revisited for v3. Conclusion: AWESOME

in this video i'm going to revisit azure functions um and i'm saying revisit because um a while ago i used azure functions when it was still version 2 but version 3 was coming out just like soon and so there was a bunch of blog posts about version 3 but there's also some documentation about version 2 and it seems like when you google for stuff like how does this work everything got mixed up and i was a little bit frustrated when i worked with it especially um i didn't understand the azure portal just yet and how cloud stuff worked so all in all i was successful but it was a bit hard to work with and recently i had a look at azure static web apps and that worked so well that i thought you know why not look at azure functions again now that version 3 is out for node.js well it has been out for a while i guess but for me that was new so i'm revising visiting it this video i'm just going to build a function and then we'll just look at that together and see what comes out of it let's do this [Music] first things first i recently learned that azure functions comes with this amazing vs code plugin and this plugin helps you to not having to go to the portal website because to be pretty honest i don't really like the portal website it has a kind of a super nerdy interface and it has so many options and features and you know what kind of works but it's also really nice to have everything in one place and in this case that's vs code so if you look at my screen here you have azure functions here as a plugin and it helps you with a lot of things because it can kind of scaffold your azure functions project and it can create functions for you it can publish functions for you you can put your environment variables in it you can do a whole bunch of stuff that basically makes this work quite seamlessly and this is the thing we want right we want like a no-frills developer experience and i think microsoft kind of nailed it for this and they had this in previous versions i just didn't know of it and i didn't know how to locally do debugging and stuff like that but actually it's pretty simple so this page just shows you a little bit like how do i make a new features project how do i connect it to my debugging how do i create like a local function how do i upload my functions to the cloud so they work how do they get a url stuff like that right so this is actually a really nice thing and you can see it here so you actually get an azure icon here and it lets you log in into your azure subscription so i've already done that because you don't want to look at me logging into an azure subscription so when you click on that like i have a visual studio enterprise account because of my work at valtec which i'm really privileged for and as you can see i have fatty strife officialize and tim's start page so fatty and strava visualize our version 2 azure functions projects and tim's start page is the newest one that i built like yesterday so i'm going to show you a little bit about this so tim's start page is actually this page this is my start page so when i when i open a browser you see this so i wanted quick links to click on stuff but what i also wanted because i'm a content creator and i like data i want to see how my projects uh are going and how my youtube stats are growing so this statistic stuff and this statistic stuff actually comes from my azure functions and i'm planning to enrich this a little bit more with more functions because i want my google analytics for my website i want more twitter stuff and i do that all with functions and that's a really nice way because this page is basically a pwa it's static it loads instantly and then there's a basically an async call and ajax call to those functions and then this comes back so if you look in the code my local project is here so it knows when i'm in a folder of azure functions it found those functions you see i also have google analytics stats even though you don't see them yet on my page still working on it so now when we look at the code here you can actually see a fully scaffolded page by that plugin from azure so i didn't do any of this i just added the twitter stats and the youtube sets in the ga stats one and i'll show you in a sec how i did that but like it creates files for you it creates your package.json of course i myself added my dependencies but local settings all of this stuff is added by azure so this is not a video where we go into that but just know if you didn't use this you had to set this up yourself and you read all the docs and of course it's good to read the docs not that i do that but you should it scaffolds it for you that's really nice so now you can actually see when i open this up here so it goes to azure fetches project settings for me so i can actually see here when i click on my youtube stats it gives me the basics of what this function is so it's an http trigger so when you hit an http endpoint it does something there are many different ways we won't go into that now but you have the out level so this is a public one everybody can just hit up this function and get data you also have ones where you need to log in or have a key then we have application settings and here you can put all your environment variables because like i'm querying google i need an api key i store it here and then it has a whole bunch of other stuff we don't really need to go into now but when you look at my code and you look at let's say my twitter statistics it creates for you an index file a function.json and a sample dot dot so data file i actually haven't used the data file but you can use this as data into your functions so the function itself is actually relatively simple one thing to note it's an async function right so the module exports is an async function in node.js and um basically what you get is context and you can also get request but i don't use a request in this one so i i removed it but so basically what you have to do because it's an async function you you basically have to do stuff with promises or async await right so i'm getting my account statistics within a weight my user data becomes something and then basically the rest is for response so the context is basically the server and you add a response to it and because it's an asic function this like this whole thing just returns so the data that i catch is the body of the response and then i can add some headers and this basically just returns and this is this is how simple it is so if i wanted to let's let's just make a new function to show you what you get and then what you can do with that okay so here in tim start page i want a new function and we're gonna you see there's a whole bunch of stuff but we just want to have an http trigger now so it's a youtube test whatever we are youtube right okay so we're gonna make it autonomous and now it already worked right so you see including my typo my youtube test is here and this is what you get by default so it created for me this function and it it created for us that schema that we looked at before and you get that sample data file so now we can actually run this locally and see how it works so you can actually do npm start and you can do this inside your project directory because it's scaffolded by a vs code and this is really really cool so now you can have a look actually at this is our youtube test with typo and it just created this for us so we can have a look here and please pass a name on the query string or in the let's zoom it in well if we look at that code and we look at this thing it basically wants the request query name so it needs that name so it can actually return hello so we can do name is tim and then it says hello tim this is a really simple azure function clearly and so when you don't add that it just gives you the error message which is here so now that we have this and you understand the fact that you have to add the stuff to the context and you get stuff in request you can do a whole bunch of stuff so if we now go back to my youtube function that for some reason oh this is my twitter function it was not saved but so what i basically do i just haven't get account stats function that returns a promise which basically i create a twitter client it's just the mpm twitter package it has all my environment variables and then i basically just create a new promise twitter get user show with options and the option is screen named me the minix it gets my stuff i map it a little bit to whatever data i want and then i fulfill it so the promise returns something once i get it and there's an error i actually just go directly in line of my promise and i say this is a 500 error and the body is the error and i send it as json and if it's not an error i will just output it like that so let's go there and then go back to where is that this is my twitter stats it loads a little bit okay so it's calling twitter now so this is likely why it takes some time or maybe it's off or there's an issue cannot read property id of undefined i might have a booboo but i don't know why oh most likely because locally the process and is maybe not working i've had that issue before let's not have this stop us i'm not going to type these keys in here to show you how it works locally this is something i have to figure out myself so if anyone from microsoft is watching this please help me what we can do however is say let's upload those functions to the cloud so you can actually say deploy function app let's do deploy so i'm going to deploy to tim start page and then i say deploy overwrite sure okay so now it's called also going to add our youtube with typo test and but you can see it just goes into the terminal here in vs code and it does everything it does an npm install a prune to clean up the packages and now we just wait a little bit a few moments later ah so completed so we can actually view the outputs to see what happened so currently it's querying some of the triggers and there are our functions so now when we visit it on timstartpage.azurewebsites.net open yes would be nice if it worked this time right there it is so now it was able to get the process dot infer and variables and it worked so you can see my latest tweet and my followers um so now it's online and i can just query it so that's what i do here i basically query that and i do the same here um so how that works is another video that's just doing a window fetch getting an a call filling a few ds store stuff like that but this was actually a very simple thing to do it was very smooth to do it was very easy to make new applications or new functions i just added the youtube test one right so let's see if that works youtube test name equals dim beam there it is zoom in it works that was how easy it was to create a new function so that's it for this video short but sweet and i encourage you to try this like decentralize your stuff because it's very easy now to add additional things it's very easy to scale only one of them and if you don't use a function you don't pay for it so go away from the big hosting packages where everything is a monolith but decentralize and use this stuff ok thanks for watching and i'll see you next time