 No commercial. We're going to go directly to Jeff Holland, who's probably going to get us to think about servers less, his words. That is exactly right. What an amazing transition for the Blazer Power Hour that we're having this morning. I am Jeff Holland. I'm a principal PM on Azure Functions working on Azure Serverless. Today, we are going to continue the amazing conversation and very flashy conversation that Daniel had this morning with his Blazer and his pillow around Blazer, both server side and web assembly. We're actually going to apply that into a very common scenario, which is running Blazer and Azure Functions for serverless web apps. So to start with what to expect for the next half hour, let's start by talking about what are serverless websites? What's some of the architectures that people are using? What are some of the benefits of why people would look into doing this? Where Blazer fits into the story? Whereas your functions fits into the story, we're going to talk about how you deal with things like domains and delivery of that content, and then finally we'll have some time for question and answers. So to start with when we look at a traditional web architecture, like the web app that you probably built before has been the one often talked about as a three tiered web application. It works a lot like this, where you have a client who's got their browser and they make a request to some website. In this case, I've got a cool hip.dev domain. So let's say I want to call jeff.holland.dev. That's the website I want to go to. Well, the browser makes that request, that request travels across the Internet, it ends up landing on some server, and that server is running some code, right? Maybe this is an ASP.NET app, maybe it's a Node app running Express, it doesn't really matter, it's just the architecture I want you to be aware of. So it's going to land on that server and that server is going to process the request, maybe it has some things like Razer files or CSHTML, it's got some assets and images, and the server is going to render in index.html page, and it's going to return that page back to the browser, and the browser pretty much just paints it for you, right? So this is the traditional web architecture. You've got your browser, you have a server that's running some code, maybe talking to a database behind the scenes. This is a fine architecture, but it does have some limitations. One of the limitations is that I need a server there. So in this case, I have a website, jeff.hollen.dev, right? That might be my personal website. I'm not a super popular guy. I don't really need a server running 24-7 to process those requests, but in this architecture, I need to have a server running all of the time ready to process those requests. So I'm paying maybe some whatever a dozen, couple 20, 30, $40 a month on a website that's maybe only getting a few hits a week. But on the other side of it, maybe actually have some traffic that is incredible load, right? Maybe I actually need to scale out. With this three-tiered architecture, I have to scale out all of these servers because as I get all these browsers that are coming, I have thousands of browsers that all need their rendered version of an index.html page, and they need that to be processed in the server, returned back. So I also have to now scale these large servers, which can be a cumbersome process when I need to then serve this for high traffic, right? So now let's talk a little bit about a serverless web app architecture and how you can write apps in a serverless way. It starts the same. You have a user in a browser and they say, hey, I want to go to jeff.holland.dev. But in this case, instead of hitting a server, they just hit some files in storage. So it's like pulling directly from a storage account. You could almost think if I open OneDrive and I get a link and I email it to someone and they click that link, that's all I'm doing here. I'm just routing the request to say go pull in some files. So the storage account is going to return back an index.html page and some code that needs to be rendered on the browser. So in this case, since there's no server that's rendering the page, what I'm actually relying on is the browser to render that page for me. So all of the code, all of the logic to draw the elements to update the elements, now actually needs to run on my browser because I don't have a server behind the scenes. I just have this storage account with static assets. Now, this is a popular architecture because in many ways it's a lot less expensive. I'm not paying for a server. I just need files in a storage account. I can also just have the browser do all the processing. For scale out situations, it's very nice too. But one of the challenges with this architecture in the past is that really it was JavaScript users who were able to benefit from this architecture because JavaScript had frameworks like React and View and Angular that you could do this rich native rendering on the browser. You couldn't run .NET in the browser. But as we've talked about already a lot today in this week, you can now run .NET in the browser. You can have the same architecture but have it be .NET code that's rendering an Edge or Chrome or Firefox. And this is all made possible because of this amazing technology of Blazor and WebAssembly. So WebAssembly is like an underlying universal technology that lets you run compiled binary code from a browser in a safe way. Blazor is the .NET implementation a part of .NET Core 3. So now .NET developers can build these serverless web architectures too. I mentioned here it might look a little something like this and in the case of I do need to call a database while I could write Blazor code that connects to something like SQL or Cosmos DB directly that makes me feel a little bit antsy to be thinking about all these browsers making a direct connection to my database. So the other pattern that we often see in these serverless web apps is that when you do need some code that runs server side like a database connection or anything to deal with data really you can call an Azure function. And these Azure functions are serverless so you're only paying when an execution is actually happening you still get this amazing scale so you get a lot of the cost benefits and the scale benefits but you can still have some code running in the cloud and what's nice about Blazor and Azure functions that I love is I can now write .NET code running in my function I can run .NET code running on the browser it's .NET across the board right even if I need to pass maybe a class or an object from the browser to an Azure function I can use the same class file in both spots I can share code between the server and the client this is really nice and it also gives me benefits that when I need to scale let's say a million people go to jeff.holand.dev all of you watching now are like hey what is that jeff.holand.dev maybe you're poking around it right now my functions just scale automatically and my storage account is super elastic and how it can scale as well and what's nice here is that while I might need thousands of rendered index.html page all of the compute all of the processing to actually render those pages is all happening on the browsers right I'm kind of taking advantage of all the users computers I'm making them do the hard work their smartphones their laptops their desktops are all rendering the page and it's just up to me to make sure that I'm serving that static content so it's a super appealing scenario this is how I personally run my website or jeff.holand.dev because I pay pennies a month for this thing I get amazing scale and I'm running .NET in the browser and .NET in the server as well so I want to take some time now and demo this to let you know how you can get started building something like this so the first one to note I have .NET Core 3 already on my machine and to start using Blazor I just want to make sure I've installed the Blazor templates right so here at docs.microsoft.com I have templates for Blazor right here that I can install in and be ready to go and once that's there I can create a new project so let's start with the client side let's create a new Blazor client side WebAssembly app so I have here a folder already ready to go and I can just say .NET new and I'm going to use the template Blazor WebAssembly or Blazor that's going to run in the browser right so I go ahead and push to create it's using the template to create a Blazor WebAssembly app and let's go ahead and open this up in Visual Studio Code now so that you can see what this app looks like and some of the stuff that it scaffolded for us okay so this is pretty familiar you probably already saw this in some earlier demos this week as well I have things like my startup file which it feels very familiar to me program.cs I'm able to inject in some different builder and configuration aspects I have here some different pages these are razor pages in these cases these are razor pages that are going to render in the client the index.html page is pretty boring it's just some HTML the counter example is a little bit more interesting because here I have some code and it's going to increment a counter using current count plus plus and then finally the fetch data example is fetching some data from an external source my favorite line of code in all of this template too is this line right here and I don't know why but just the fact that I'm using HTTP client and I know that my good old buddy HTTP client is going to be the thing making this request from my browser in my case using edge on Mac just tickles me I love it I love HTTP client I love the fact that I can use it in the browser so here I have some code some basic pages here if I want to as well like let's go ahead and just test this out without even making any changes I can just say .NET Run it's going to compile this Blazor template in this case it's going to compile it along with some web assembly kind of artifacts so that it knows how to run cleanly in a browser and in just a second here it should expose for us a local host that we can actually browse and start to navigate to so right here localhost 5000 if I open that up here now is this C sharp app knows code server side it's not even doing code locally it's just compiled it and handed over to my browser and my browser is now doing all of the work here through web assembly okay so now let's talk about how we can start to call some data from an external source right in my case I said sometimes you might have a database something like Cosmos DB or Sequel that I don't want to call directly from my web assembly app so here let's add in some function information so since we're already at the the Blazor side I'm going to start by creating the Blazor aspects to call a function so let's add a new page here that's called my function dot razor page and here I'm going to type faster than a speeding bullet and paste in some code I wrote before that says hey I have a new page here called functions I'm going to get my handy dandy HTTP client that tickles me as I mentioned before and here when I'm trying to initialize the page you'll notice I'm actually calling an azure function now in this case it's calling a function that would be running in the cloud if I'm debugging this locally I could change this to localhost and actually call a function that's running on my box and then it's it actually even has some information here so while it's waiting for the function to respond it's going to say loading and then once I get back my message from the function it will automatically populate the message so it's going to be dynamic as well and wait for those responses so here I can call that function let's just go ahead into the navigation menu as well and I want to make sure that there's a way to navigate to this new page so I'm going to type that very quickly as well too right so now I have what could be some code to call a function what about my function where's the function that I can call and that's super easy to set up as well let's go ahead here and open up another empty folder called function app I'll just create a new window for vs code I could add these to the same workspace now here in visual studio code I've installed the azure functions extension now I could do this from visual studio 2019 as well but since I'm already in vs code I'm just going to stick with it let's just go ahead and create a brand new function project using that function extension and as I mentioned what I love about blazer is that I actually want to write C sharp client side and C sharp server side or serverless side so let's go ahead and choose C sharp as our language these are apis so they're going to be triggered by hdp requests I want to call this my hello function and I can give it the the namespace and with that vs code is now scaffolding for me a azure functions project that I could use to run on my code in this case server side so here this is the default template it's pretty boring right it's just saying hey get a request look at the query parameter see if they passed in their name and then say hello to their name I could add in here you know connect to cosmos db do a query on sequel return the results in my case though let's just even simplify this a little bit and we're just going to say return new okay object result and we'll just say hello world okay so here now is my azure function when I'm ready to go I could debug this locally I could now publish this to the cloud so I can say actually want this code to be running in azure so it can be called whenever I need to right so I have a function already here called jholyn blazer which is the function that I could publish this to or create a new one and so now this code can be available to run in the cloud right at the URL that I decide so if I actually switch back over here you'll notice I've already published this same app ahead of time at jholyn blazer and I've said hello so let's go ahead and test this out now now that we've actually added some more custom code we'll do the same thing .net run it's going to compile this app create the web assembly bridge pass all those static content files over to my browser in just a second and here if we now open up localhost 5000 again same data before but you'll notice here's my new azure functions tab and when I click this you'll notice it says loading for a second if you caught it it said loading while it was making that call and then as soon as it got the call back it says the message is hello right so it called that function the function to turn some data in this case it was just a string but I could very easily replace this with data from sql as well so for the last part of this I want to show now that I have this running locally how do I get it so that it could actually be accessed from somewhere that's not localhost 5000 right I mentioned before this needs to be in a storage account so how do I go actually get this into a storage account this is actually my favorite part of this entire demo because it could not be easier so I'm in visual studio code already I mentioned before that I have the azure functions extension already installed let me show you one other not tasks sorry let me show you one other extension that I have installed I have a lot of extensions because I love vs code in addition to the azure functions extension I have the azure storage extension which will let visual studio code know how to talk to a storage account and with this extension I can actually get a one-click publish to a storage account so first I need to generate the bits that I need to publish right so right now I've just been debugging how do I actually generate the static content that I need to upload to the storage account so if you're familiar with the .net cli this next command I run is going to be very familiar it's really just .net publish I'm saying publish me a release this isn't for debugging anymore I'm going to define my own output folder in this case just use the publish folder I could use the default if I wanted to and when I run that it's going to compile my app as well it's going to create a release profile for it and it's going to stick it in this folder I just defined called publish so if I come here once this is done compiling you'll notice I have a new folder called publish and I open up publish it's got all of my bits here now you might be wondering what are the files that I need to copy to my storage account there's some web config there's some dll's here the answer is right here do you see this dist folder for like distribution this is the folder that I want to copy and paste into a storage account you'll notice here's the index.html page this is kind of the static content it's going to return it's a pretty boring page it just pretty much says load up all the amazing web assembly stuff I've got some framework things here which have all my web assembly bits my bin folder which has my dll's so this dist folder is the one that I need to get into a storage account and I mentioned this was my favorite part of the demo because check this out I'm going to right click this folder and because I have that azure storage extension in vs code I have this one click gesture right here which is deploy to static website now really all it's doing is it's just going to copy this folder and copy it into an azure storage account for me and it's going to configure the azure storage account so that it can serve web content so I could do this manually I could do it through azure dev ops if I wanted to but for getting started I really like to just say you know what deploy a static website here it's going to ask me to either create a new storage account or select an existing one I already have a storage account called Jay Holland website so I'll just say you know what publish to that one and let's go ahead and tell it to deploy and you'll notice here it's saying copying over those 49 files into the web folder of this storage account so as it copies those files over it just takes a second now all those files have been copied and here I can now go to Jay Holland website dot z5 dot web dot core dot windows dot net that's super easy to fit on a business card but I can browse to that and here I'm just hitting that storage account and the storage account now has returned to me back all this static content that I've been able to render into this blazer page right so this is no longer localhost 5000 this is now my storage account running in the cloud in fact if I come over here to my storage account I can even open up this storage account there's no magic here let's use the storage explorer preview and here in my azure storage account this is just that disk folder right so all I'm pointing to is that I've configured this storage account to do I'll show you all the settings here static website hosting so I've turned this on which gives me a nice endpoint and then visual studio code went and copied all my files into this folder that it creates for web hosting and all that's happening is my browser makes a request to this domain and my storage account returns back this index to html that it can use to render the page right so no server anymore just storage now the last thing I want to talk about again I'm not in localhost anymore but I'm not really at a nice domain right I'm at jhollandwebsite.z5.web.core.windows.net and all of you can browse to this and it will work but it's not the kind of website I want for a blog right if you remember the one I actually wanted was jeff.holland.dev is the actual web page I wanted right and you'll notice here when I go to that I actually do have jeff.holland.dev set up calling my azure function and it even has a beautiful certificate so that it's htdps enabled so the last thing I want to talk about is how did I pull that part off right how did I actually get the storage account to be able to use with a custom domain like holland.dev or jeff.holland.dev so the other aspects here if you're going to go set this up for yourself and there's some great docs and samples as well is that in azure I have a few resources that are helping me out for one I've hosted my dns records inside of azure so I have holland.dev it's a registered domain in my azure account and I've actually told it and I apologize my zoom here is a little bit aggressive as I've been zooming in and out I've actually told it that when I go to holland.dev I've configured this to route to azure front door right so azure front door is a kind of like a cdn plus plus service for azure I could also serve this directly from a cdn but I like azure front door for a few features that it provides I've even had some other c names here too so I can go to like jeff.holland.dev or functions.holland.dev which will call my functions so I have some dns here and then I mentioned the azure front door this is the thing that gives me custom domains right so at my azure front door which is kind of the delivery network resource I've told it to serve resources for requests to holland.dev to jeff.holland.dev to functions.holland.dev I've set up some routing rules here so that it will redirect always to hdps front door gives me free certificates I've also redirected it so if you just go to holland.dev it's going to reroute you to jeff.holland.dev because I'm vain and I want my full name in the url and not just my last name right so there's a few other helper resources that if you're starting to build these architectures again that resource group I was showing you here this is all I needed so I have my function app I have my dns records I have my azure front door I have application insights to monitor the health and that's really everything that I need to get started in hosting my new blazer apps so hopefully you get a sense for how you can get started using tools like visual studio visual studio code create a serverless blazer app and while this is fun for things like blogs maybe we're all finished too is we also see people using this for bigger scenarios right so one of the things I'll leave this page up here on learning more one of the cool scenarios we ran into actually about a year ago is we had a large retailer who was running a massive promotion they need to be able to serve like 10,000 requests a second because they're going to be giving a huge huge deal and they were worried because their website traditionally was this massive wordpress site and they're like we it's really hard for us to scale that out to handle 10,000 requests a second so what they did is they took just the page that was going to be hit with the promotion they made that page into this serverless web architecture where they had azure cdn they had storage they had functions this was before blazer so they were using javascript but the world still lives the same like the the truth are there but they were able to run this massive promotion this page scaled incredibly elastically the only paid for the number of hits that it had and the rest of their site could go be happy as a wordpress site so this is a really interesting pattern to be aware of I'd encourage you to try it out for your own blogs or even if you want to try aspects of your website as a serverless web architecture as I mentioned if you want to learn more about blazer check out blazer.net there's templates and getting started docs there functions pair great with it for the server code so azure.com slash functions and thank you all very much for joining we'll see now set if we have any questions that have come in along the along the way we do actually have some questions I'm glad by the way well done thank you I'm always impressed this dude's such a good presenter let's start with this are you ready no matter what you use with azure functions is still one of the coolest and most amazing texts I just wanted to lob one to you I was gonna say I was gonna say is this my own tweet did I tweet some like adding blazer to it levels up the cool factor it's good to be cool you know every once in a while at least it was for me that one time now here's a serious one because I wanted a lob one to you and now it's a little bit of harder one Jeff Holland doesn't infinite scalability also mean infinite cost ah that's a fantastic question it can mean infinite cost so one of the things with functions that is fantastic is that you can scale per request but there's a term in you hear on the serverless sometimes called a denial of wallet attack where if you just hit this if someone actually did a DDoS right now on jeff.holland.dev you might rack up my bill a lot so one of the things that we allow today only in some of our more premium tiers for azure functions but as a way to kind of set caps so that you can be like look I want to have this be serverless but I never want to be paying more than whatever $500 a month so something to be aware of things like API management are also paired off and with functions so that you can do things like rate limiting and throttles so it can mean infinite cost even then it's whatever .00054 cents per request but it is something to be aware of yeah but if you're racking up that many calls your website is probably racking in more exactly right some ads on that right all right so last question when will .net core 30 be supported in azure functions yeah this is something we're really excited about so we actually made an announcement on github about two weeks ago in October so in a few weeks we'll have a preview of writing azure functions in .net core three it'll become generally available around quarter one of next year so keep an eye out for where you can start using that where we'll rewrite our entire host and let you write code that takes full advantage of .net core three in azure functions as well so I said that was the last question but I lied because people are putting them in and questions are important a question about this tutorial will this tutorial be available for people to look at yes so right now it's scattered in a few docs i'm actually working right now with the learn team to try to turn this into an actual step by step tutorial so there's a few docs both on the blazer page that talk about static hosting and the azure storage page that talk about this obviously it's a recording I kind of did everything step by step so it is there it's more scattered than I'd like it to be so one of the things we're doing before ignite is turning this tutorial into an actual module that people can follow step by step