Full-stack .NET with Blazor WebAssembly and Azure Static Web Apps

hi everyone welcome i am simona i'm a product manager on static web apps and i'm here with my wonderful and good friend and colleague anthony hey everybody good to see you all so today we're going to talk about fullstack.net with laser web assembly and azure static web apps and yeah let's dive right into it so blizzard web assembly is a front-end framework just like you know reactor angular it has things like client-side routing and data binding and components all the things you expect from from these these kinds of frameworks and the main difference uh from from these other frameworks of course is that you can build laser web assembly apps with c-sharp and razer and it runs in the browser in a.net runtime that's compiled to webassembly and the runtime executes your.net dlls directly in the browser so that's super cool so for donet developers what this means is that you can use c sharp for the front end and your back end of your app and you can even share code between the front end and back end and as well as other parts of your application and sometimes you need to interact with things that require javascript and this laser web assembly also allows you to do that you can call your uh you can call to your javascript code from c-sharp and you can also have your javascript code called c-sharp as well i think i said that right and and recently uh there's been a popular approach for uh running um web apps called the job stock what is it simona well anthony uh the jam sack is one of the coolest things that i have i've come across over the past few years or so and it's really uh it gives a name to a set of widely used architectural patterns when building for the modern web and it stands for wait for it javascript apis and markup so since it's blazer and not javascript does that make it the bam stack it absolutely makes it the vamp stack uh you heard it here first and it's definitely gonna be a thing so so blazer um and the bam the bam sac stands for blazer apis and markup and b is blazer for your runtime uh and we also have api so reusable apis um we have strict decoupling in the jam stack or in the bam stack we have string decoupling between the front-end and our back-end services and this is so that it gives us more autonomy when it comes to our deployment and development practices and strategies and then with the markup um the jam set where the bam stack approach is to pre-build all of our markup up front and serve it directly to the browser from a cdn or a point of presence that that's close to your uh users and there's plenty of advantages to using the bam stack and i'll focus on a few that are actually worth mentioning one of the things that's most important is that we usually get much better performance because our assets are pre-built and then delivered from a cdn that's close to users they they will automatically experience much better experience and much better performance especially when it comes to let's say traffic surges uh we know that our application won't crash or it will be relia our experience will our users will experience our application in a reliable way and we also get simplified developer experience the typical workflow that you would normally expect when using jam stack or bam stack platforms is that you will as a developer you will push your code to your source control and then the platform will automatically build and deploy your application globally distribute your static sites to or static assets to a location close to users and because we're only shipping uh static assets we don't have to figure out um how to configure things like your server or your caching strategies or even think about database and scaling your your database there based on uh incoming workload um and one of the awesome things as well that we get with the bam stack uh community is really the fact that we there's a very active community that creates content and creates a lot of best practices and tools that are very useful to get started and build awesome applications nice i don't know how i'm going to keep a straight face every time we say the word damn stack so but i'll try uh so let's talk about how to host a blazer web assembly app uh there's really two ways to do it uh the first is what we're showing on the screen right now where you kind of run in an asp.net server and because laser web assembly is just a bunch of static files like html and css and a bunch of.net dlls asp.net can serve that really well and if the app needs to run any backend logic it can call apis that are also hosted in the same asp.net server um the advantage of this is that uh you just have one thing to deploy but there's some downsides as well and one is that you because the asp.net app is serving both the front end and the apis you can scale these things independently and actually kind of host them in a way that are optimal for each one so another approach would be to host them separately and uh so you can host your front end on a server that's designed to serve static files and you can also distribute these files around the world using the cdn so they're super close to your users like someone i was talking about earlier and for the backend apis you can run them as serverless functions that can scale on demand so you know whether you know your app is not doing anything at all and in which case will be scaled down to zero or that you know a bunch of people are hammering these apis um it's just going to scale out gracefully with no problems at all and this is basically the the jam stack or or bam stack i guess approach and static web apps is built for this and in case you haven't heard about static web apps um you definitely um should give it a try um it is one of the newer services in the family of azure app services and it's a service that enables you to build and deploy uh globally distributed full stack applications you can extend your front-end with back-end apis that are powered by azure functions and they are actually managed by static web apps and all you need to do as i mentioned earlier is push your code to your source control um that could be github or devops and the platform will actually build and globally distribute your assets and provision the infrastructure so that you don't have to worry about that and you also get built-in authentication and routing rules so um as well as custom domains and free ssl certificates um and for every pr that you make to your repository we also spin up a pre a preview of your website so you're going to get a url where you can check out this new version of the website if you're familiar with app service then you're probably familiar with deployment slots as well and it's a bit similar to to that and you might also be wondering like what should what types of applications can run on azure static web apps and there's several types of things that you or several types of applications that you should um as you're building them you should consider whether they should be hosted on static web apps or not we've seen a lot of customers run a large large-scale applications so think about your e-commerce applications those would run very very well on static web apps and your portfolio or blog websites and personal pages they're usually one of the top choices for services like azure static web apps as well as your internal business applications you can run them on on the platform as well yeah and for internal business applications we support private link so you can actually have an azure static web apps that's only available in your virtual network so that's pretty cool love it yeah and um yeah a couple days ago we announced that azure static web apps now supports.net 6. and yeah what this means is a couple of things one is um our we're we understand how to detect and build and deploy dot net s6 blazer web assembly applications including um you know including installing the the the webassembly workload so that we can do things like building ahead of time compilation um so all that is supported and it just deploys nicely to azure static web apps and then the other piece is that we support dot net six azure functions now so azure functions a couple days ago also announced the support of dot net six azure functions in both kind of like the execution models both in process as well as isolated models for building function apps and i think it's time for some demos what do you think samara i cannot wait for our demo to start it's gonna be so awesome and everyone get your browsers um make sure to have it ready because um we're we're gonna have some fun here yeah but i think first of all yeah i think it's going to be fun i hope i hope everything will hold up uh but first of all i think we're going to try and kind of show everyone what the local development experience of a static web app looks like um and i'm going to actually have simona join me on live share so i'm gonna do that first and then while she's kind of connecting we will um kind of talk about the the app itself so let me grab the url send it securely to simona and as simona is joining us i'll kind of quickly walk through the app itself so um you can see that i have a couple of folders here one for api and one for the client and i can even make this even bigger and let's look at the client first and this is a standard laser application there's um you know some pretty standard pages in there if we actually look around in here i have some razer as well as some code and the you know the interesting part of this code is that i'm actually going to make a connection to a websocket and this websocket is powered by a new service in azure called azure web pub sub and that's actually ga today i think i just saw the announcement this morning super exciting check it out so we're going to use you know a websocket from there and do something pretty cool um and in order for us to kind of get the url for the websocket we don't want to put a connection string into our client-side code that's not super secure so we have a an azure function app to hand out um not the connection string but tokens based on the connection string and it's actually going to be based on whether whether you're logged in or not it's also going to have your user id baked into it so it's going to use the azure static web apps authentication to actually know who you are so you can't pretend to be somebody else sending messages um and also you know only when you're signed in will you be allowed to be sending messages at all so um so like it's a pretty simple you know a c-sharp function that is built um using the.net six in process um model and we're just returning a really simple response that has the url in there and i see that simona is joined the uh that the session so um we might be seeing her cursor um on the screen popping around and um and i also want to point out that we have a shared um project here as well so it's not super fancy i just have one class that i'm sharing between the front end and the back end so um so yeah we're able to kind of share code this way which is pretty neat and um so i think what i'm going to do is i'm just going to go ahead and run this project by pressing f5 and yesterday when we tested this because we are uh because i'm sharing the screen i think it might run a little bit slower so um so while we're kind of filling time here while it's kind of starting up um let's uh let's kind of browse around the code a little bit as well so yeah so i think uh i also have a little bit of javascript in my app as well so i'm using a couple of libraries here that help me uh basically connect to the camera on my laptop as well as to kind of turn that camera you know footage i guess into frames that are built with ascii so that that display is ascii so uh it's a fun little thing it's totally useless but that's okay i like useless things um and then down here very cool yeah and then down here you can see that i'm actually invoking one of my method methods from javascript um in into that but in into my.net app um so that um every time i get a new frame i'm actually sending that frame over to my net app and then that's how my screen is updating in blazer so let me bring over the app here and then um what i'm also going to do is i'm going to go ahead and share this port with simula and hopefully someone i can join um and so so what she's able to do is um kind of like browse the localhost 4280 just like i am but on her machine and actually you know she's able to test out the app and i supposed to talk about how this app is running so it's actually behind the scenes running in the static web apps cli and the cli is able to start up a local version of static web apps oh my goodness and there's simona right now i'm already logged in and um and and using this uh and using the static web app cli we can actually test a lot of the features that only exist in the cloud like authentication and things like that so if i click on login um instead of actually going through and talking to github or whatever um we decided to actually give you an experience where you just tell us who you are because you're just testing locally and you can so you can actually really easily test you know if i wanted to be somebody else and see how the app reacts i just go ahead and change the um the information here when i click click log in um my blazer app just interacts with this information and it just all works um so i can go ahead and start actually like uh i can show off you know things like setting breakpoints as well so if i go into here my screen is too big i can't scroll oh there it is um so we can set a couple of breakpoints and let me refresh it so hopefully you'll hit at least one of them uh so you can see that i'm actually hitting a breakpoint in my blazer app so here i can actually inspect things like i'm not semona but you can see that uh you know here's here's my information that kind of came from my from from the login provider and uh if i kind of press play here uh i should be hitting my breakpoint in my function app too so in my function app i can also tell that um what can i tell him well it's not showing me oh that i i think i get it twice or something no i i i did i did i i played okay yeah so so so now i learned like yeah and we should all have learned from this as well do not let simona join your vs code live share sessions that's perfectly fine because uh let's go ahead and log in or i mean start my video so like now i'm broadcasting my video simona can see me i can see simona so that's pretty cool um so simone do you want to talk about how we typically deploy in a static web app like this yes so um i mean currently we're in vs code and um i'm assuming that this repository is actually connected to a github repository so let's say if we wanted to make a quick change here maybe we want to send a different message or like we have this huge new feature that we want to we want to publish what we would do is we will push changes to github and you can do that directly from vs code or you can use their terminal as well and then what that will do it will trigger a github action run which will build your application and globally distribute your application and then this will basically create a staging environment that you can share with others so let's say anthony and i are working with a team of ux designers and we're working on a feature that allows us to build beautiful ashy interpretations of our blazer applications or faces and um our ux designer will be able to provide us feedback on the preview version of our application and then once we are happy with that um version of the application we can merge our um our branch into our main branch and that will push a change to um to production and i don't know if you have your github repository up anthony if you want to show a bit that workflow i do not but we can do that if i can find it going off script this is great which is exactly what i love so uh yeah so you can see that um right before this call this morning i was actually working on refactoring my project which is something i highly recommend any presenter doing right before any presentation because what can possibly go wrong um did you also update your your laptop and your dependencies to the latest version yeah i actually did update something but i like it actually did not work um i won't share what that thing is but i don't want to get in trouble but uh but but but that's okay that wasn't something that was needed for this talk um but i think this is the moment that we've been kind of waiting for um we want to know how you know like kind of share this with everybody out there so if everyone wants to go to net conf dot anthonychu.dev and don't worry that actually like the the urls up top on the screen here hopefully in large enough text i know there's a bit of a delay so it might be a little while before people show up what i'm hoping for is that other people will uh will browse this site and then um they'll join this and we'll see more and more people up here on the screen i don't know if this is really going to work um i have not tested this for a load this is the maximum load that i've tested it so far as myself and use the mona so if more people pop up on here then then we'll find out how this thing is going to perform so yeah so it's it is going to require you to log into github but that's using static web apps um built-in uh github authentication um yeah anything you want to add well we hopefully have people join this well you did talk about um the fact that the authentication that we're using here is uh provided and managed by azure static web apps and we're already seeing folks joining in uh hi everyone this is a dot-net cop party and it's an ascii [Laughter] yeah so hopefully we'll have more and more people i think i did this like maybe last year i think we had about 20 people show up so i'm trying to hopefully break that record because there's nine people streaming now more and more people are joining so yeah i can also see on the youtube stream that it's finally reaching the people that uh hey it's our friend seth how's seth doing how are you doing seth as if we could play as if we can talk to us but um but yeah this is super cool um so let's kind of recap like everything and you know that we've kind of seen in azure static web apps so yeah as we talked about um we now support the building of net six blazer web assembly apps including um aot compilation and other cool things like that as well as uh.net six azure functions application i don't know if anyone else's laptops fans are kind of um turning on now because you're streaming all this video but mine's getting louder so this is super cool to see thanks everyone for joining donate conf this is so cool um i'm just gonna scroll up and down for like you know 30 seconds here because i i like this is this is just wild um so we have now 66 people streaming here and like double your previous record right yeah and more and more people are showing up this is bonkers [Laughter] so i'll quickly cut over to the slides because we have one more slide just to show you know like where you can go to get more information but i think we will come back to this just to see how many people actually get to so don't go anywhere people all right so um to learn more go to aka dot ms slash swa that stands for static web apps um dash blazer and there's a tutorial there to kind of go through how you can clone a repo and deploy a full stack blazer and um done six functions application to azure static web apps so let's see where we're at um while more and more people are showing up wow like this is just not stopping i don't know what's happening so and my computer is is it's melting um i can see a hole burning into my table but yeah so this is azure static web apps thank you everyone and kendra are you are you still with us actually you've got me and i am such a fan of blazer jeff fritz here and have we got some questions for you simona and and anthony so good to talk to you because we really like blazer static web apps so cool there's a bunch of folks with questions including this one here from the dot net core show saying bam stack makes them think of the old batman tv show all right all right i like that um there's a question here from uh is this let ladek asks uh can we improve the seo for bam stack apps by some sort of pre-rendering mechanism so so that's usually baked in to the um frameworks that we use and the fact that we're pre-rendering um when we we're using static site generators um we're pre-rendering all of the content so that that gets deployed to your cdn and that gives you better seo as well okay let me go to this question i have from jefferson up here saying a few months ago couldn't create a static web app without creating azure functions but i already have my azure functions api and just need to connect the static web app to it is it possible to create a static web app and bring my own functions app to work with it yeah absolutely so we have a feature called bring your own function app where if you don't want to have static web apps deploy a managed function app on your behalf you can deploy static web apps and then link a function app to your static web apps and then it behaves pretty much just like a a static a function app that is managed by static web apps except that it's your own and some of the advantages of that is that you can kind of use any functions plan that you want to use or if you want to use other triggers other than http all those things are supported with bring your own function out awesome awesome i love seeing that that we can extend and take the static web app a little bit further there some cool stuff in fact we have a comment here that was the best demo we've seen yet look at that all right wow right wow yeah and and and i'll be back in an hour for another session and i i have to now work on something else so that we can top it so you can top it wait hang on where did this come from kendra okay um anyways uh there's some other cool comments that have come in here that we want to make sure that folks see and we we talk about including can a person create a progressive web app for a static site and make it run completely offline in.net 5 when using static sites if a person was offline didn't work is this something we can do now yes i believe so um so a yeah so i think we've had some folks deploy progressive web apps and from static web apps um i haven't done so personally i don't know if you have tried it simona well i what i know is actually that the pwa builder is running on top of azure static web app so if you have been building progressive web apps using pwa builder and you've got inspiration for your service workers and like just read content on pwa builder just know that it streams from a static web app that's close to you very cool all right one more comment we have here from dan dan says static web apps with blazer is a next-gen development for net developers oh i think we love seeing that fantastic thank you dan really appreciate that and i think that's all the time we have for anthony and simona thank you so much it was great having you join us for dot net confident anthony we'll see you in a little bit yeah sounds good thanks for joining everybody

Channel: dotNET

Views: 5,001

Keywords: .NET

Id: RZhEScjKVHE

Length: 26min 56sec (1616 seconds)

Published: Thu Nov 11 2021