Getting started with Azure Static Web Apps

with azure static web apps now being ga anthony chu is here to join us to show us what exactly it'll take for us to deploy our laser applications into the cloud stay tuned and check it out [Music] hi everyone thank you so much for joining us for this episode of on.net my name is celeste phillip and today we're going to be learning about azure static web apps from my friend anthony chu anthony how are you doing man good how's it going good good good so for the folks that don't know who you are why don't you introduce yourself and let us know what you do yeah my name is anthony chu and i am a program manager on azure static web apps as well as azure functions awesome so why don't we just go ahead and get into it what exactly are static web apps like like what is what does that even mean yeah so like uh traditionally especially in the dot-net world um you know like we deal with a lot of you know asp.net mvc as well as web forms a lot of stuff happening on the server um but over the years um the browsers have uh have gotten a lot more powerful and folks have started running lots of javascript in there so you know offloading all of the compute to the browser and more recently browser support started supporting webassembly as well and with blazer webassembly that brings.net to the browser so now.net developers are also starting to shift a lot of the processing into the browser um what that what that means is that the asp.net you know mvc app or some other app that's running on the server are now doing two things one is it's serving api like like basically like you know like the the front end is calling some api returning some data and and whatnot um and it's also returning the front end so so this job is doing serving a lot of static assets and um so what that means is that you're basically it's like you're deploying an asu.net app whose job is just basically becoming a web server so there's probably a better way to do this um which is to to kind of split off the the serving of the static content um from the rest of your app and that's that that's typically what you know what we call a static web app or you know like something called in the javascript we'll call it the jam stack app because uh you're you're not their static content separate so you're able to really optimize for serving static content having this content distributed around the world so super close to your customers so when your users go to your site you'll grab you know whether it's a javascript site or a laser site you'll download that super quick and start up and then when it needs any data it'll call off to an api and with the api you can now host it in a serverless kind of platform like azure functions for example that will really kind of dynamically scale the compute as you need it so you're yeah so you really just you know like really just be paying for your compute when you need it and when you're not then you don't pay anything so one of the things that i've been familiar with is the concept of a spa right like a single page application so i'm kind of wondering what's the difference between a single page application spa as we call them and a static web app because it kind of sounds like to me what you're describing is something where i have my static assets separate from some back end or some api or whatever the case is like you said like i can optimize on that you know that static experience whether it's through caching or cdns or whatever the cases but that's not a separate concern right like but how do i think about that differently than how we used to think about spots um i think like you know like static web apps is really just like like a probably a super set of spas right so like spas are typically when you think about it you're thinking of angular apps react apps view apps blazer apps um but there's also like a whole different world of you know like these things called static site generators where folks will you know pre-process some stuff at build time to turn out you know basically you know create a bunch of static files to serve uh both of those work really well with a like as a static web app um and then typically in you know like most of those apps requires a little bit of compute on the server and that's kind of split off into a serverless api got it okay that makes sense that makes sense all right so are there any demos or anything like that for us to see can we kind of yeah but let's talk let's talk a little bit about um how you would host a static robot first and we'll start off by just talking about if you were to just you know to host your static web app yourself what you would need to do to kind of make that happen right so typically you want to place the host of static content um quite often this is some object storage like azure storage or something like that um and you have your source somewhere and then you might be going through like a proper ci cd thing to actually build your app um in this case it might be a blazer app and then deploy that to your blob storage and then um maybe you need uh to distribute your application all over the world so so like your customers can access it super quickly so you typically would create some kind of a global distribution thing maybe a stand up a cdn in front of your static content and then your customers get your site and they're happy and then if you need apis then you would have to go off and spin off some serverless kind of compute thing like azure functions and then also figure out how to deploy to it right so there's a lot of stuff that you need to do in order to kind of set up something if you were to do this yourself and then on top of that there's some questions about well what if i need a custom domain whatever do to get that how do i get myself an ssl certificate uh how do i set up authentication how do i set up routings and stuff like routing and stuff like that that's typically required by these static um or our single page applications yeah it just seems like there's just so much stuff that needs to happen just thinking just to get this thing like deployed and not only just deploy but deployed in a secure um and scalable way right yes absolutely what i'm hearing from you is static web apps helps with that so it's not just about putting my static assets up in the cloud somewhere in some storage location you know but it's again like what are some of those required um additional things that we need as developers to make sure that this app is performant it's secure and you know it scales well as we needed to yeah so what i was showing you earlier um like works really well like if you were able to you know if you wanted to set those up um it actually will will serve your static contents as well as your apis really well but it does require a lot of work to set that up so what static web apps in azure um sets out to do is that we want to make sure that it's like you know everything that you need in your toolkit um is available to you and it's there out of the box so you don't have to worry about any of that stuff i talked about earlier you just create yourself a static web app and yours and your and your web app just deploys to it so um so in the static web apps toolbox um obviously we have some way of distributing your or serving your static content and that's globally distributed so we'll distribute your content around the world so you don't have to worry about setting up that cdn in order to get your content close to your customers and then we also provision behind the scenes for you an azure functions app if you have an api and this is like not even visible to you we're like we're actually taking care of this for you entirely so all you see is a static web apps resource when you're in azure but behind the scenes if you want to use azure functions we have that available to you and then we're pretty opinionated about how we think this workflow should be and then we expect your source to be in get somewhere so whether it's in github or it's in azure devops or some other source control provider that you might have so we kind of expect you to kind of like commit to a like or kind of push to a branch in order to kick off the deployments and then we set up uh automatically we set up a github action for you to actually build your both your front-end app as well as your azure functions and out of the box we know how to build most of the popular javascript frameworks as well as blazer apps um so you don't you don't actually have to configure anything you just have to tell us this is where my app lives and this is where my api lives in my repo and then we take care of building those and deploying them to the right place nice yeah and then lastly um we also have like this kind of like front end or kind of proxy layer that takes care of your you know like if you want to set up a custom domain um you can really easily set that up and then for every domain that you set up we just give you a free ssl certificate so you don't have to worry about any of that stuff um if you want to kind of have like authentication you want to have customers log in using github or twitter and stuff like that uh you could actually just you know without writing any code um just hit a couple of endpoints um that static web apps provides you and you can just log in yeah so i get a free ssl for my domain unless we get you know apex domain support and again i i get some i don't have to think about it right i could publish it to azure and like let azure do what it's supposed to do and now i can just focus on deploying my application yeah just focus on writing your application and then we take care of the rest for you nice i love it i love it yup and then lastly there's like typically in you know static web apps or like especially um single page applications you kind of have to deal with some routes you know a typical thing that you need to do is like this thing called the fallback route so you want to deep link into different parts of your application that's only accessible using client-side routing that your site still comes up properly so we make routing really easy for you to set up with a config file and you can also lock down various routes based on roles so if your customers or your if your users are logging in you can say that certain people can can have access to this route but not others right okay yeah and then yeah so i've already talked about all these features um there's a couple more that i want to touch on so we have a pretty good local development experience currently it's using vs code but we're also working with visual studio as well to make this happen as well as a local cli and what the cli enables you to do is to actually run the entire stack locally so you don't have to deploy your app to see what's happening and then using like emulators or just some type of shim that's going to act like i'm in the cloud but i'm not really yeah yeah so um so yeah this is like sort of like the architecture of the emulator itself so it's just an executable that that you run locally um but typically what you like what you would end up doing without like something like this emulator is that you have to figure out a way to start up your front end app whether it's using your your blazer dev server or some static kind of file server thing you then have to set up you have to start up your functions runtime and both of those run on two different ports so now your functions runtime needs to be configured with cores before your front end can call it and you can't test out the authentication of the routing and all that stuff right so there's a lot of things happening there that you can't test out locally or can't test out easily locally so what this emulator does is that we you know it'll start up and basically give you one endpoint that you can hit that will proxy to both your front-end stuff as well as your back-end routes and then also it understands routing and auth as well so you can actually you know fake out authentication so yeah so you can test it out without deploying it to the cloud i think that's one of the one of the things i've always wanted as i've been working with things inside of azure is being able to do off locally whether it's with you know easy author functions or whatever the case is like being able to simulate that locally in the offline way has been like a big ass for me so i'm glad we have something similar to that you know for azure static web apps yeah yeah i want to see a demo yeah of course let's let's do it all right code all right so um so this is a pretty basic app like i gotta say like i literally just you know spun this up in like 15 minutes last night um so it consists of like three different projects um just to show how you can you know how you can lay out or structure your application that consists of both the server the serverless function app in function in azure functions as well as a front-end app um so i'll show you the front-end app first it just lives in a folder called client and it's the very basic um the blazer web assembly app that's got the counter and the fetch data and the um and just the index page pretty simple and then they and then also there's an an api which is your azure functions project it has a single endpoint that serves back some very random um weather information yeah that makes absolutely no sense uh but it'll do for a demo and then both of these projects share a basically like the dto if you will um for the um the the data transfer object for the weather forecast so um so yeah so you're able to share code from you know with your you know from your front end with your back end using a shared project so the first thing that i want to ask you so when you created this project right now did you use any particular templates or anything or did you just structure it this way or was there like some pre-generated thing that helped you create this um so i um so in this particular case i i created this myself uh so i just like did done that new laser wasm for the for the client app and then i used the function cli to scaffold my my api app but we are actually working on some templates that will allow you to kind of suspend this all up really easily i'm also working with visual studio to do this as well so if you're a visual studio developer you can do this all in there um hopefully we will be able to kind of get to that in the next few months um yeah so um and also like we we have in our samples or in our documentation we also have a link to a uh basically like a github template repo so if you don't want to like you know create the three projects yourself you can just really easily just generate a repo from that um from that template and you can just be up and running nice okay yep so it's gonna be great if we have a template that'll make that easier like just one less step or a couple of steps for us to do that that'll be awesome yeah absolutely so i'm going to go ahead and just like start this uh blazer app locally just to you know show how you would test this out locally so i'm going to just go net watch run oh i'm in the wrong you're in the right folder no yeah first step uh there we go um this happens to be a net 6 preview um laser app so that's uh that's actually has like hot reloading and stuff configured and if i if i go to the site it opened up in another browser somewhere but i'll just pop open a browser here oh and open here okay cool uh so this is my site but if i go to fetch data you can see that it's not working because my function app is not up and even if it were um it wouldn't work because my code is actually trying to access it at um slash api weather right so um so how i would make this work um is that i i can use use that cli i was telling you about earlier from static web app so you can grab this from npm just go npm install um if you don't like javascript the only thing that you need to know is that you have to install npm and then install this thing you don't have to worry about about the fact that it's written in javascript um it works just as well with blazer and to start it up it's pretty simple um we just have to say sua start and then because my laser app is already running i just pass it the location of my blazer app to proxy to so let's say localhost 5000 and i also have an api app so and so i have to tell it where the api lives so that lives in api that's it it's going to go and start up um both the emulator itself as well as the azure functions core tools that runs the uh my my api so i don't have to worry about starting that at all and if i wanted to serve static assets instead of like proxying to a dev server i can do that as well so now my app is up and if i now go to localhost 4280 see the app still works okay but if i went to fetch data oh it's that um it's actually working yeah and then if i just refresh it you can see that it's um yeah giving us the the the very wild uh wildly kind of like fluctuating weather from from the random generator right so what i'm seeing now is that if i know a little bit of blazer and i know azure functions works the workflow shouldn't be too much different for what i'm used to today right all i'm doing is i'm bringing them together and then now like you mentioned i could use that swa um cli tool to kind of you know create that like development environment for me and i guess the only thing left for us to do is deploy the thing right whenever obviously like the app is working locally yep so now that i've tested on my app um that the only thing left to do is deploy it so to do this i'm just going to stop my app first okay uh i i can use my um or the azure static web apps which is video code extension there's an extension too wow yeah you should um it's a great extension and um so yeah so to deploy it there's a there's one command that you need to use and that's create static web app and right now um i already have my code in a github or in a git repo but it's only local it's not deployed at all so um what it's going to help me do is it's going to first ask me for the name of my static web app i can just call it on.net then it's going to ask me for the name of my github repository so it's going to help me push it to github at the same time and the next thing that i have to let it know is what kind of app it is so like it supports a bunch of different frameworks and these are just presets so um so but it's kind of based on conventions if conventions is going to just tell me hey um like i i think that your app uses clients as my as the as the front end which is true in this case and then the output folder for um for blazer is in triple w root so i have to select that so that knows where to take the build output and deploy it and really that's it it's it's it's now gone off so like that's created it's uh my my my static web app in azure already and the other thing that it did is that it actually committed this github action workflow to my um to my repo um so it's got some information that i kind of typed in so client and triple w root you also knew my api was an api um so it's um yeah so i kind of commit that to my repo and what that does is that if i went to my github and i and i look for my app waiting and here it is and go look i can go take a look at my github actions so that that the existence of that workflow now kicks off the uh the deployment and this is gonna actually go off and build my front end app which is my blazer app as well as my api so you can see that i found the client folder as well as the api um it's going to take about three minutes to build but i already have one pre-built earlier on so that i can kind of show you that's been completed yeah that'd be great so one question that i do have for you what happens if i'm not in github like what if happens if i'm on azure devops for something different because i guess in that case the github action wouldn't do me much good right yeah i thought that's that's right so for for azure devops we produce a an azure devops task so um so yeah so like the flow would be very much the same uh first for but for azure devops you have like an extra step of actually setting up your pipeline yourself which a lot of azure custom azure devops customers we're finding want to do that anyway because they want really good control over what happens in their pipeline so so they would go to the azure portal and actually go and create their azure static web app and then they would set up their pipeline and then use that azure devops task for static web apps to do the deployment that makes sense yeah so this is earlier an earlier deployment that i did and you can see that it's completed and at the end there it gave me a url so if i click on that you'll load my site and it's the same type as running right there it is yep awesome and when i hit the api there it is it's working so yeah so that's how easy it is to kind of go from local um kind of test out your site locally and then get it deployed to the cloud awesome anthony this has been great and like we mentioned azure um static web apps just went ga well just a couple days before this recording i don't know when you're gonna see this video but now it's ga definitely go ahead and check it out um there's links you know we'll have links to documentation to code samples um and definitely let us know what you think about it your feedback is really important to us so again thank you anthony i really appreciate you my friend and thank all of you this has been another episode of the on.net show where we learned about deploying azure static web apps you

Channel: dotNET

Views: 4,000

Rating: 4.9649124 out of 5

Keywords: .NET, web, static, dotnet, azure, Static Web Apps, Azure Static Web Apps, ASWA, visual studio code, programming, Microsoft, software, cloud, cloud computing

Id: gkpxGhJ31ks

Length: 22min 29sec (1349 seconds)

Published: Thu Jun 17 2021