The Launch Space: Deliver Static Web Apps in Azure DevOps

[Music] greetings everyone and welcome uh to another episode of the launch space uh today we're talking about delivering static web apps in azure devops and uh stephen marowski is here with me my name is brian benz i'm a cloud advocate at microsoft uh and uh steve is a fellow cloud advocate and uh i just want to mention before we get started that um this is a live broadcast and uh welcome to those of you who are on the microsoft developer youtube channel if you want to interact with um with our guest and myself during this show please go to aka.mslash learn tv to access the chat and we'll be monitoring your questions um during the broadcast so uh stephen welcome uh how are you today i'm doing well thanks brian thanks for having me it's my first time on the launch space i'm excited yeah well this is a new release we're talking about it's a it's pretty cool it's very useful for people who um you know might already have a full investment in azure devops and have pipelines and they want to use uh static web apps as well as part of their deployments so this is pretty cool uh stephen you want to tell us a little bit about yourself yeah so um so as you mentioned i'm a cloud advocate at microsoft uh you and i have been on the team for a long time now you know i'm going on four years here and i've mainly focused in the devops space and my background is both on the upside and on the development side so i kind of fit really nicely into this kind of devops world um and i came into this project uh from a focus of i've used azure devops a lot i've used github actions i've used a lot of different ci cd systems and azure azure static web apps really provides a nice onboarding experience when it came out for uh when it came out in preview we had this great experience with github actions well we've got a ton of customers that love their azure devops and so there's been a ton of uh feedback asking for hey when is when are you going to support azure devops out of the box well we're here to kind of show some of that and talk some of that right but i think maybe we should level set a little bit on what azure static web apps is sure absolutely cool so we've had app service right you're uh most most people are familiar with with app service basically you give us your code stuff you'd run in tomcat or you'd run an iis or you'd run you know in you know fill in web server of choice and we run it and you don't care about the virtual machine well we've we've had a that was a little overkill for uh and a little bit over you know quite a little too much configuration or so for a lot of the static site options that we have today we see a lot of blog content you know things like hugo or jekyll where we're generating a bunch of html for a static site and hey great that's all we need we don't we don't actually need uh a back end like you know dot net app pool running behind the scenes to do something right that just it's not it's not a problem that we have in that space we also see a lot of investment in things like angular and react and svelte and vue and you know and now with uh you know some of the web assembly stuff in blazer or rust generated web assembly right we can do all of these cool things you know even more so just directly in the browser so we're sending the whole app in the browser and maybe call back to some apis and things well azure static web apps really exists to kind of fit nicely into that space and make it make it a nice uh easy deployment experience easy to wire up to ci cd as well as you know support a bunch of the features that you want for that things like custom domains and ssl certificate um global cdns to get your content close to where the people are who are using your application um you know there's a variety of things that we've built in to make it a very nice experience authentication right do you want to authenticate with active directory or azure active directory uh facebook google github twitter right let's let's make that an easy experience to just wire up and make that part of the platform so we got static web apps and as i mentioned right we had this really nice experience you go into the portal you create your static web app you wire it up with github and it would drop in all of the ci cd functionality that you needed to make deploying your site a reality well now we're getting to the point where we want to build and deploy from azure devops maybe maybe we're we're in an organization that has a large investment like say microsoft right we've got a pretty big investment in our azure devops use so i've spent a lot of time using azure devops and it that's actually how i would deliver my blog and um so i wanted to dig into how we could use azure devops with this unfortunately the product team agreed and they created a task in azure devops that we can use to deploy into static web apps and one of my colleagues uh april edwards she crafted an article for our docs platform on how to do so and we're going to walk through in just a little bit um pretty much the a very similar workflow to what's in this what's in the tutorial there and you can go to the show notes if you want to get if you want to go check out that tutorial as well as documentation around static web apps check that out in the show notes we got the link right down below so we're going to go through and set something up there and in that in that process we're going to kind of talk through what the task is doing as well as you know to make this a really cool experience a cool joyful experience as well as you know what maybe some of the differences in the experience are that you're going to see between github and azure developers so sound like fun sounds great so far yeah i was gonna say as well i have my own blog uh published on hugo uh you can use hugo jekyll um and a couple of others the gatsby and viewpress uh those are the actual uh platforms that we support right out of the box there's actual templates for those and there's actual documentation uh in the link that steve uh shared a little earlier the show notes you can go to that doc and you'll also see links for all of those different platforms so if you're using one of those you can actually deploy it out to azure static web apps and uh for now anyway uh actually using azure static web apps if you have an account on azure is free so it's kind of cool and you can play around with it so you can build things from scratch the way that steven's going to show us today but you can actually use one of those other platforms as well and it's kind of nice you can have uh you know you can have your code local you can test it you can preview it and then you can just deploy it using you know traditionally github actions but also now azure devops too so this is cool yeah and there's a whole ecosystem of tools and um and experiences that are kind of coming up around static web apps now that's a little out of my ballpark right i'm a ci cd guy uh infrastructure's code person right like javascript frameworks not my cup of tea but you know what uh it take it takes it takes all kinds to make a world and i'll tell you what if i i used to build my apps on uh wordpress yeah uh you know so you had to set up a full lap stack right you had to have a back end my sequel and you had to worry about it being hacked and all this other stuff so um this is definitely in my opinion uh for a blog or something simple where you're not doing a lot of interaction there's not a lot of dynamic needs for the actual website where you're just actually building something that people are going to read it's uh it's pretty cool stuff having those those frameworks so yeah oh yeah and it makes those simple use cases really easy but it also simplifies some of the more complex use cases now i'm not the one to talk about the complex use cases but i can definitely show you how to how to rub some azure devops on top of this process so yes let's let's dig into it right so i'm going to go to the azure portal and uh and i have a pretty empty resource group here i've got key vault we'll come back to that later we don't need it right away and i'm going to add a resource and we're going to get a static web app and there we go now i'm just going to click my create and it's going to ask me for some information so i want to go to my subscription into my resource group let's give it a name let's do my plain old blog and we'll put this in east us our easy s2 because that's where it wants to go and now it's gonna ask me for deployment details now if this was github it would have that nice little experience wired up in this case we're not gonna do that we're gonna go to other and it's gonna tell us hey okay great uh you know after the app's created go follow some other instructions you don't have to worry about that i'm going to show you what to do all right we're going to review and create and create after it validated and now it's going to go create the all of the resource all the resources and things it needs behind the scenes to make all this happen that goes relatively quickly thank you and we get a little bit of information in here about our static web app including this nice little uh custom url that comes up now you can you can get custom urls like your own urls and configure those as part that's custom domains that's another that's a whole other topic we also get a lot of it a little bit of information about how the site is behaving you know site hits data and data out just some rough information there now the most important thing that we're going to need is the deployment token because that's how that's how the task in azure devops is going to be able to tell azure which site to deploy to and authenticate itself so we're going to go to manage deployment token it's going to give me this really nice long deployment token copy it to my clipboard i can close that up and now we're going to go to azure devops so i have a project here and as you can see my naming skills my plain old blog static web app for being my project you can tell i am a master of naming and we need to create a pipeline so i've already got my code here um i've got my code in azure epos i've i've got basically my blog content there and it's all set up uh the way it should be for uh for a normal hugo site and so i'm going to now we can just set up a build here let let's go with the flow here i want to go with a starter pipeline and it shows me some example steps that i might want to run i don't really need those so i can get rid of that but i do like this assistant because it helps me find the tasks and then helps me set up the syntax that i need for them i can look for static web apps and look here we got deploy static uh azure static web app task here so the app location is just going to be the route at build command we're not going to have to specify anything there so this is this is the really cool thing so um you may be familiar with azure app service and how you can give it um your pre-compiled application to run or you can give it a container to run or you can give it source code for a number of different languages and if you give it source code it has a build engine there that watches uh watches what comes in and then looks for certain cues and based on those cues it will go and compile the app compile the code you know resolve dependencies for you um all sorts of cool stuff and that's the aurix build engine well azure static web apps uses that same build engine but it brings it into your ci pipeline so rather than waiting till you push it up to azure app service you can get that feedback right in your in your ci pipeline so the output location is going to be public because that's where hugo uh when you run hugo will generate your site to um api location is going to be api because we don't really have an api for this so it'll just be blank and that's fine and we can provide some additional metadata there or additional command data there which i don't need at the moment so that helps me set up my task now i did mention that we need a that we need to provide a deployment token right well we need to pass in an environment variable to help with our uh help with our release so i'm going to go back over the tutorial because i never remember this thing offhand and in the tutorial we've got an example and there we go so i'm just going to grab this and go back to my new pipeline and drop that into my ammo and this is this is an environment variable that the build that the build container that static web app is using is going to look for now i still need to create this deployment token now i just made a little boo-boo because i went and copied this out of this when i also had my my key remaining in my um in my azure devops environment here so um we need to go back and get that key again so i'm going to grab that that key we can put into a variable so we're going to create a new variable and we're going to make it a secret variable and since i use the name deployment token we'll stay with that value in there we can make it overrideable at runtime and we can see examples of how we reference it well that's how we're referencing it there we'll save that now if this was anything other than a hugo app that has a theme we would be all good since this is a hugo app and hugo likes to use a pattern of sub modules for their themes we do have to add one more step so i want to check out self sub modules true to make sure that we clone that we get the sub modules so we get my theme built and that's it this is the sum total of what you need to build an azure static web app from azure devops so let's save that and get that to run so what do you think brian a gap should work yeah uh yeah it looks like one thing i was going to say um we do have a question from ayan mulik actually a couple we have a statement and a question so thank you am for your uh contribution uh but uh the first one is uh he was saying enabling github pages on github is still more seamless than doing half an hour devops and half on the portal agreed uh i can take this one is um but see the situation is you have a lot of organizations and a lot of uh websites that have a need for some dynamic applications and then they have some part of it that is also static and uh you need to be able to coordinate the deployment between the static and the um dynamic parts of your website uh together and to do that it's great you know azure devops is great for a pipeline so if a lot of people might have already invested in azure devops to build out their website and uh they have to manage the static part of it separately or they have to put a script into the uh like a powershell script into the um deployment that would actually run the static website deployment something like that so uh this is a way to interactively build the static portion of the website along with the other portion and you can take it through the testing and make sure that everything works you can do things like a b testing and things like that and just sort of basically it's just rolled into your regular azure devops process so that's that's the reason why it's cool to have this uh stephen do you have anything to add to that yeah no you're spot on right like if you have a if you have in your organization a strong investment in edge development like there there are other ways to deliver static sites especially static you know especially like like a hugo site or a jekyll site right github pages being one of the options but if you have a strong investment in in azure devops and you need to add some static content or you want to simplify some of the your static existing static content deployment and build that's great you know for example at microsoft we do a lot of component governance and so if you want to ship something it has to go through a specified process well we've made that process you know we we have it tried and true inside of azure devops a lot of other organizations have done the same so in some organizations while github pages or some other tool might be a couple steps less to do it might not necessarily satisfy all the organizations requirements where this could be a nice easy happy path to getting to getting your air application deployed now if we can actually pop back over into my uh into the azure devops screen here we actually have a successful deployment and i just kind of want to show so it pulls down a container and here's where it starts to run the orex build engine and detects oh hey we're going to build with hugo and so it generates my site copies it all out and then it pulls until the site becomes available and gives you the url right to that site so i could click that right from the financial devops and it's going to take me to my blog now i'm using a different theme than my my published blog actually has so that i know that this is my that these are my demo environments and that's something i really meant to keep around right but yeah and yes there is a little bit of bouncing back and forth yeah uh there was one other question i am as well um uh could the entire process be done from az devops in the future like one can be from the repo settings for get github pages so i'm getting what he's asking there is you know can you actually create the um the target static web app and things like that through azure devops i know we could do that with other platforms including you know uh regular azure web apps is that on the roadmap or are you aware so i i don't i know it's feedback that i have given uh the product team early on i don't know if it's in scope however we've got i've got a couple more things to show you i got a few things left up my sleeve here that uh to make to make this experience a little less jumpy around and if you hang on for just a little while i'm going to show you how you can create the whole thing right from within azure devops without having to go to the portal for anything so you set me up setting me up for for later and uh i had another one which is uh is there a powershell documentation for the document uh so you're gonna be covering that as well i know that for sure so i'll let you go with that and uh we can we can circle around and answer that question later perfect all right so so one of the things you know that we mentioned people might want to use um azure devops for is maybe because we've got some compliance uh some compliance process or that we've had we have our security audits kind of melded in and for me when i start thinking about copying api keys around and sticking them in random variables here and there it makes me a little bit nervous right and and i keep thinking of oh so when i get audited how how am i going to show these things well one one nice thing that we have inside of azure is key vault right so i could take that secret that we were getting from my plain old blog here and i could take that deployment token and go back to let's close that go back to my resource group and to this key vault that i created almost like i knew i was going to go here and i could create a secret and so let's create a secret we'll call it um my deployment token and there we go and enabled and create now you can get more you can get more funky with key vault and set some expiration dates and use it to help rotate secrets and so it gets to be a very nice tool there but once i have it once i have it in key vault how does that help my build inside of azure devops well let's take a look so again if you have if you have an investment in azure devops and you're using key vault this is going to fit really nicely into your process because we can go in azure devops hop over to in my pipelines group into library and create a variable group now a variable group is an easy way to reference a number of variables that we can use across different pipelines one of the bits of magic that we get is that we can link secrets from a key vault as variables so let's call this thing blog secrets because that's easy for me to remember and i am a master of naming and i'm going to link secrets from a key vault as variables so i get to pick the subscription that i want to use and then i'm going to pick one of my key vaults that's there and i need to authorize it i need to tell key vault that azure devops can with this service principle come and read secrets and then i can pick secrets from that from that live from that ver uh from that key vault now there's only one here so we'll go with that i've got this here right any of the builds that i use inside of this project could take could take advantage of these secrets now let's make our static web app build take advantage of that so we want to edit our pipeline [Music] now the editor here wants to be very helpful and sometimes it's good sometimes it's bad so i want variables and my variable group is going to look like so there we go always got to remember the syntax group there we go now i want to be helpful and our group is blog secrets and now this deployment token is going to be the same as the uh key vault secret that i named so let me see my deployment token i'm getting old and my memory is not what it used to be so that's why i always kind of have to poke back and check and now i started talking again and that made me forget what i'm doing i'll just look at the smart thing copy paste it there we go so now we are going to use our secret from key vault to control the token that gets used to deploy our static web app so another way we can bring our secrets into a more centralized place get a little bit more enterprise feel and managing and dealing with that uh with that deployment we could kick that off and let it run we can go to we could get rid of that other variable if we really wanted to but i don't know about i don't know about you brian but every time i show that key vault thing it's usually something new that somebody uh you know at least a couple people haven't seen before so i always like to highlight that one because it's a great way to bring that key vault experience into azure dev ops yeah it's an often ignored feature in uh azure devops uh and the nice thing about that uh correctly went wrong but if you have a group of people using this deployment even if it's your secret in your subscription once you've put in the library it can be used by others because it runs on the host um yeah well it's using the service principle that i that uh so azure devops uses this uh service principle to connect into azure and so part of that process was because i had permissions to uh to the key vault i could white list that service principle to get secrets from it yeah exactly and once that's done then yes anyone on my team could could use that and then i can go and rotate those secrets in key vault and my pipelines will just pick up those new secrets as they're as they're available right so that that becomes a you know i could have them because we can set expires and available on we could have that rotation even automated right so we don't even you know have to get into uh any of the mix there now we did just talk about based on the questions like simplifying the process and here i think we just made it a little more complex so you know and like more secure correct like there what i'm what i want to what i kind of want to show here is really there are ways to help this process along and feel like it's more part of our enterprise compliance uh experience right and and that we can put some we can put some controls around the secrets that we're using now we can go another way and we cannot put that secret anywhere all right that that's another option that we have and i found because i like to dig around and things i found how we can actually get that api key or that deployment key from one of the apis in azure in our pipeline so we'll take a look we'll take a look at that if uh that sounds interesting to you absolutely yeah one thing i want to add is you know you mentioned it makes it more complex it makes it more complex if you're the only person working on this but it actually kind of makes it simpler if there's a team working on this right because uh otherwise you'd have to pass around okay so you're using my credentials now you know maybe you i don't know what you'd have to share in some cases you might have to share your uh you know delegate a person on your subscription or something like that but this is just a way of okay so the keys are already built in just don't change the ammo and and uh you know don't change that reference at least you can go ahead and change anything else but uh as long as that reference is still in there this will run and it will be secure and it will use the secret so we've set up for our site obviously for your using it on a production site you don't want everyone to have access to the production site directly uh so this just gives you a way of only the people who have access to this azure devops project and have permissions to run uh on the hosted agents are going to be able to affect the website so yeah yeah that was a really good point brian you know i i do so many demos myself um that i i've you know that you're right it does it can actually simplify the experience for a team working on a particular project yeah so very cool other people have a spreadsheet with their keys in it and go i don't care this yeah you wouldn't yeah just theoretically yeah theo theoretically yeah so um at least at least the last handful of jobs i worked at uh it was either like a lastpass uh password vault or one password password vault or uh going back several jobs uh a key pass password vault uh that that was uh shared like on a file share or something but yeah so you know we we've been managing ways around um i've also seen it in the text file left in a file share somewhere but um yeah so let's let's look at another way that we can that we can do this with a little bit of crafty powershell and um and a little bit of a little bit of exploring so so in azure static web apps and can i can i give can i give folks uh kind of a little sneaky little hint here or uh or or all right so here's here's the here's the deal folks right um azure devops or azure is all api driven if there's stuff that you see happening from from the portal it's almost guaranteed to be they're almost guaranteed to be some api behind it and so a little bit of creative splunking can help you automate what may seem unautomatable and for me yeah so i i don't like things that are unautomatable i like i'd like to automate things and it's sort of the reason for my existence and um so you know when i get this manage deployment token and copy the clipboard and go here with the secret and go there with the secret and that just that does not make me happy so um what i like to do is i'll go into my browser's developer tools and you know watch let's go where's network there we go and i like to watch what's actually happening in uh in my browser here let's get now our manage deployment token and if you dig in deep here and i'm not going to show you exactly where i'll i'll leave that as an exercise to the reader but our watcher but buried here buried in here you can find the api call that's getting made to uh to make things happen so anyway i will i will let that be and thanks to a little digging there i found the api that we can use to get that there's our build that we just left off yep with everything oh something didn't something something wasn't happy what didn't it like oh um i probably fat fingered something somewhere in the uh in the api token oh nope wrong i went to the wrong page uh this was this is something we're gonna talk about in just a little bit so after we after we do this one i'm i'm going to talk about something that doesn't work right so we got all these cool things that work i'm going to show i'm going to show you a little something that doesn't work so we did have a successful build here like successful builds that makes me happy now let's go ahead let's go edit again and add some a little bit of a little bit of help in here now um to make this a little easier i've got i'm just going to copy some stuff in here and i will walk this through what's here all right so i'm changing up the variable group i'm just gonna use a couple of variables that i want to be able to pass into some powershell and so i need the resource group and the site name so it can find the static web app to to get the token from and then i still have my uh i still have my uh azure static web apps deployment looking the same as before um but i have this one another step here where i'm going to call this powershell script and we'll go take a look in the repo of what that looks like and it's a really simple powershell script and hey could you just get on that a little bit oh you bet yeah let me uh see if i can close this yes and we'll make that a little bit bigger thank you better yeah that's good okay so i've got a short little powershell script here that takes a resource group and a site name and it's intended to run when the azure powershell module is available and logged in and so the there's a task in azure devops to run uh run the azure powershell uh run powershell with the azure module loaded and there's in in that module there's this invoke azrest method there's an easy there's a similar azcl command as well there's uh i think it's uh easy rest um if if i recall correctly um so you could do this from easy cli i'm an i'm a powershell guy so i tend to go the powershell way with this um but you can call the rest api and you're calling the list secrets method of the site that you've of the site that you're trying to get and it will return the api key which i can then set as a secret variable inside of my inside of my deployment which is cool because you're not storing it in your code which i've seen before right so yes i'm not storing in the code i'm not storing it in a variable and we can go to the we can go to the static web web app and reset that token as much as we want and the next build is going to pick up whatever the current one is so that we and my variable is now just called token all right and by the way i should you should point out that i mean no one not everyone can run this on they have to have access to the azure devops project that you're working on to actually be able to run this powershell script yep and and the way the power so they could modify the they could if you you have to have some level of trust in people who can commit code into your repository now um this is only running ci on commits actually to a branch and if somebody were to make a pr and in the way things are configured right now this does not run npr's it could however um that's not uh there's there's always a little weirdness in in pr's because there's some security challenges especially if it's coming from a repo that's not uh it's not a branch off the main repo because that's where your security boundaries are right um so um so and repository security and things that's a whole another discussion so you could actually for example you could set this up with a separate build that only runs on test servers that accepts prs right so you could say uh anytime a pr comes in run not this yaml file but run a different script that would deploy this to a test server and then see if there's any problems with it and then if everything's okay you merge it into the main branch and commit and uh your and then it would actually run a real deployment to production so yeah right yep yeah you would almost never have like your main build be you're the thing that goes right out to production unless it's something like for example my blog right i'm not going to uh right and even even my blog i go to a staging site first right so yeah because i like i like being able to review things i don't know if you're uh the same as me but uh microsoft has very very good uh security people not people but they have routines that watch your sites and your repos and everything to tell you if there's something vulnerable and you're probably like me you get a lot of trouble because you're writing these demo things that you don't have a biggest infrastructure built and you get all these flags and warnings and oh you're going to be you know you're going to be in a lot of trouble if you put this in production so yep that that's why that's why that key vault stuff really came into came in handy for me because uh yeah building building these demo environments and trying to separate the uh the secrets that i needed as par because i built i built almost everything with infrastructure as code and so i need to need i need somewhere to put those put those secrets um so key vault can uh played in real well here i don't i just here we're we're taking a step away from having to go retrieve that secret um manually and bring it back over and we're letting an automated process pull that thing over and put it into a secret um a secret variable in the build so we'll kick that off we'll let that guy run and while that's running uh we're gonna go back over this thing that look uh or uh we'll we'll hop back over to the releases and i'm going to show you something that doesn't work now this is a little bit of pain for me because i want to show you all this and um and i couldn't because there's a there's just a little bit of a headache right um so we have this experience inside of azure devops called classic releases and a lot of folks use them it helps you build a structure release pipeline you can integrate testing you can integrate quality gates you can all sorts of stuff that you might want to do well for uh for us in the tasks that you can use in releases and in build are pretty much the same thing so i was really happy to see hey the static web app thing it's here in release now what i'm going to show you um and brad let me see if you can spot what's missing so i i'm going to go back over to my pipeline and i'm going to just hit edit and let's look at the task all right so we've got our api look we got our app location our api location our output location and this environment variable those are the four the four things that we really care about with the task now let's go over back to our release and let me know if you see anything that might look a little uh different even if we change this to that and that notice anything that might be missing uh it looks like the token's missing yes yes yes there's there's no way for us to pass the token um and we could pass it as a variable where a non-secret variable where it could become a environment variable however if we take a look at this the environment variable it's looking for is all lower case and azure devops when it converts a variable into an environment variable capitalizes everyone capitalizes of all of them and this is running in a linux container which is case sensitive so problem right so before you before you go out and say hey i'm going to add this to all my release pipelines you're going to have a little bit of a hiccup there don't fear if you the yaml experience wonderful right it's this is classic the classic release pipelines which is um which we have this little bit of a hiccup and i've given that feedback to the product team and i know there's been a couple of uh people who've uh kind of early adopters who've also given that feedback so uh if if it's something that's important to you and your environment go share that feedback with the product team through the through their github page there's a feedback mechanism in docs and the the product team very responsive loves to hear from you cool all right let's i know that made you i mean that makes you a little sad brian because i know you're a fan of those release pipe other classic releases and the gates and all of that stuff yeah well you know talking about investments um a lot of people have a big investment and the the uh there's i mean you showed a very simple example of one artifact and one stage of a release pipeline uh you know a lot of people have 40 or 50 or more and it's incredibly it's a beautiful little uh diagram that you see there but it represents multiple threads of a deployment and things like um you know even if something goes wrong or something like that there's all kinds of things that are built into that release pipeline and so people have huge investments in those so i i can i can uh i can't promise anything but i can assure you it's on the roadmap to make sure that we have that release at par with the ammo releases yeah yep so it looks like a fat fingered a little something that's okay um we can actually um i can actually build off of a different branch for for our next next example because we're going to build on this right we're going to take we're going to take what we've done and now instead of we're going to go to and we're going to create a brand new static web app one that does not exist yet and what we're going to do is let's is we're going to use a let's get the pipeline going and i'll show you then i'll talk about what it is all right so we're going to create a new pipeline oh no um sorry we're going to create a new build with this pipeline but we're going to build off of a different branch i'm going to build off my template branch and we're going to use an arm template to create the static web app resource the powershell script that we have there will then run and retrieve the secret so that we can build and deploy out to the out to the site so yeah you know fingers crossed we we should be uh we should be good to go so let's try running that for those who might not be familiar so arm templates or azure resource manager is what arm stands for and arm templates are json files and they interact with our internal apis to actually create resources and manage resources on azure so you've got the azure cli which is a way to actually manipulate things through the command line interface but you also have arm templates which is this runtime engine and then you you control it through json files and this is what the json looks like um right here yep so we take a couple parameters uh optionally it'll put in the resource where the resource group lives unless we specify otherwise but this is the uh this is the the declaration that we need for the static site so we give it there's a type we have to specify a name for the site we specify an api version uh that we should use that has the definition for static websites and we can pass in some properties and so in this case that we're making sure we're using the free tier because i'm not made of money and we can pass some outputs as well and i felt like we had some connections at microsoft if only right no the free tier is it's it's perfectly fine to run a demo for sure and actually a lot of different websites run free tier anyway so it's uh it's one of the features i think of of azure and it's being able to run these static websites for oh free and that's by the way not a trial free it's free i'm not going to say in perpetuity but it is free for now until microsoft decides that they need to charge for it but uh for now it is is uh all static web apps are free all right let's make a quick tweak because i tried to deploy to east u.s which doesn't work i have to go to ecus too so let's fix that and we'll get that going so let's yeah the folks probably won't have this issue we have internally microsoft uh we have certain resources we're allowed to use because um honestly business is so good that a lot of our dancers are packed and so internally we're not allowed we have to get special permission to run in some basin especially uh cloud advocates like ourselves who are running demos so we're actually limited on what we could do i do run into this myself every now and then but folks at home probably won't have this issue um because your customers so this is for the uh this is for the back of the house paying customers before uh before us right which is the way it should be right that's that's what i mean so now now we've got our build going out um and it's going to go and deploy now i'm not using the i i'm i'm deploying the the arm template out of a powershell script uh out of an azure powershell uh using azure powershell instead of the azure devops task because of the behavior of the resource itself uh green check marks i like that um and and there we got our deployment token and see the static web app go but um so the reason i'm deploying via powershell script is so i can do a check to see if it exists already because if it already exists arm templates are designed the experience is supposed to be item potent where we deploy the template and if it if everything matches it doesn't do anything if things are out of order it will bring them into compliance however some metadata gets pushed back into or gets uh gets added to the arm representation once you deploy into the static web app and that won't match what i have in my template uh it'll look like it needs to recreate things and so it'll throw an error so i just check to see if it exists already if because if the static website exists already i'm gonna get the deployment token i'm going to deploy something out to it so functionally it is what i expect it to be um for the most part um the you know we could also write some checks to make sure that oh that the you know that the other resources are or the other aspects of the resource are what we expect in that case too from from my purpose here i just wanted to make sure that if it already exists don't try to redeploy it again so we got our deployment token we save it as a variable we deploy our static web app let's see if we actually got something so um we got our build and we have a nice random url and the blog shows up so we created and this one went to a brand new let's uh let me show you here this went to a brand new site which is called let's look at what did i call it here really likes your title so so the we called this one template blog so if i go look in my azure portal back into my resource group i should have a new static web app template blog which was not there before so we got the whole static web experience without having to go through the portal so hopefully that solves that question that came up earlier right yeah i think that covers it i mean that was the question was can you just can you have an experience like github where you're gonna you know create resources from uh without having to do half in the portal in half in the uh devops and yes you can uh if you use that uh and um yeah if you use the the powershell you can you can make that work as well a couple of the comments i wanted to add we did have one from anthony chu anthony hello thank you for uh joining anthony's one of our engineers and he wanted to mention that uh you know the difference between static web apps and github pages is you can also um automatically build most apps you know not just jekyll of course and the main differentiator for me anyway is you can also use serverless apis so you can add you know use azure functions to build uh huge infrastructure needs in the back end with massive scale and connect to all kinds of backhand services uh not just aesthetic web apps so so uh yeah of course static web apps were designed so you didn't have to to actually use back end stuff but if you do need to you know today if you need to access something on twitter and retrieve it into your static web app uh you can do that using uh using static web apps yeah i mean it well because we can do so much more in the browser our browsers are so much more powerful now and we've we've built patterns for for building more complex apps in browser and we've built this better experience for creating just apis through through things like azure functions it it it it really sets us up with a nice pattern for development right like i'm i remember i did a lot of uh development and deployment of like end tier applications right you remember you you probably have some fun memories of those brian oh yeah um and this just this just changes the distribution of where the code runs a little bit right so we're front loading some of the processing into um into into the web app things that we might have put in a thick client before right and bring some of that back and then have a cleaner interface of apis rather than maybe some private uh private channels or or you know embedding something in our in some monolith that's running and having to post back for all these for all all the different activities that you want to do so um it's just we have a richer way to work uh with with a you know fully browser-based application now and then yeah we might want to call back to some api so having that nice experience i think is a really it's a really big win yeah hey we've got about five minutes left um if anyone wants to ask any questions uh or interact with us at all uh go to aka dot ms learn tv uh and uh we have a chat set up but i'm looking to the right all the time as i'm actually watching for questions over here so i have it on another screen that's why i'm doing that but uh we do have um a couple of comments um so ayan i hope we answered your question about powershell documentation uh and uh chad did want to chant fardswear thank you uh for pointing out that abel wang does have a dev blog post about using azure devops to deploy to an azure static web app and that's using i believe powershell um for that um the other one uh is uh somebody was mentioning we would love love uh levy was mentioning he would would prefer uh yellow with with arm and uh yeah okay uh but uh out of scope for this discussion sorry yeah uh so the able lane post that he's referencing is is actually a uh us creating a static web apps like experience yeah but it uses app service yeah right and so he's using it so he created like the experience that you get with github and static web apps but using app service for it so uh a very very similar experience but it was just sort of like hey here's how here's how i would do that today now we now we're having now we're actually bringing the actual static web app experience into azure devops we've formalized the process now as part of our application um fabio posada was asking how do we inject environment variables into a react app step for static web apps uh i'm assuming it means an and i'm guessing it would be the variables just the way we showed it earlier yeah so you so you can specify build commands that would go in by default it will try to it will try to create a build definition for you um and then based on the based on your build it can take environment variables from uh from what's available on your build server for example uh let's go back to our pipeline definition here [Music] and so we can specif we can map in so there's a number of automatic variables up there that are present on the build agent but you can map in whatever you would like custom into that task as well and then your build whatever build command that you are going to provide would have to know to pick that thing up and go so orex will try its best to infer the right build process but you can specify what you want cool um so a couple of minutes left uh a couple other questions here um is there any documentation about best practices for approvals and other manual checks when using a yaml pipeline and a totally scripted pipeline generation um that would be in the if it is it's in the azure devops documentation and i'll add that to the show page um i can do that ms slash uh what is it today the launch space ado rswa there it is there it is i will um in fact we'll be posting the chat as well uh i'll put that up in the it's probably a totally separate topic that's going to take us a little longer to discuss but um i'm posting the chat right now and then you'll see it there as well but you can check that out they're not there yet the links aren't there yet but i'll add them uh right after the show um awesome yeah and also the um let's see uh how is how uh fabulous i've seen how is the management of tenants for uh ad in swa so um in static web apps uh i can tell you it's integrated so ad is integrated with uh static web apps the same way it's integrated with anything inside your azure subscription so you manage things the same as you do with any other azure tenant that's on your subscription or not tenant any azure resources yeah yeah the only the only thing that's i think that's different is the deployment key right and that and that that's accessible if you have the right rights to the to things so but i think i think we are bumping up on time here brian it's been a blast yes thank you very much thanks again um anyone who needs uh show notes or more information please do check out the launch space ado swa and um thanks steven this is great a lot of information and it was a lot of fun uh someone wanted to mention that your son has a lot of stickers impressive collections so you might want to pass thank you very much thank you

Channel: Microsoft Developer

Views: 1,204

Rating: 5 out of 5

Keywords:

Id: voMCCfhpuMw

Length: 60min 3sec (3603 seconds)

Published: Tue Apr 13 2021