--- title: "Tim Tries: Azure Static Web Apps" description: "I sometimes just try out new tech or web services for the first time and give my feedback as I go. In this video I look at #Azure Static Web Apps. Azure clearly noticed the trends in the JAMstack world and likely also figured out that just static file hosting is not enough." date: "2020-06-15T10:48:34.000Z" url: "https://timbenniks.dev/videos/tim/086-a54ifas8rts" youtube_url: "https://www.youtube.com/watch?v=A54iFAS8rts" playlist: "tim" image: "https://i.ytimg.com/vi/A54iFAS8rts/maxresdefault.jpg" tags: ["composable-architecture", "api-design", "cloud-infra", "frontend", "developer-experience"] --- # Tim Tries: Azure Static Web Apps I sometimes just try out new tech or web services for the first time and give my feedback as I go. In this video I look at #Azure Static Web Apps. Azure clearly noticed the trends in the JAMstack world and likely also figured out that just static file hosting is not enough. Watch on YouTube: https://www.youtube.com/watch?v=A54iFAS8rts ## Transcript what is up welcome back to the channel so today is the second video in the series Tim tries it's probably not a series just yet because it's only my second video but we'll see what comes from it if I like it I'll probably keep doing it umm I'm stealing this concept from Scott to Lenski whom I interviewed a couple of weeks ago and he does this really well he just goes to a new surface or a new piece of software just tries it out and see what happens so these are like legit first experiences today I'm going to try out Microsoft Asher's static web apps this was recently released and it's kind of like a competitor for net Levi or for fur so and probably being Microsoft they add a whole bunch of extra features because they have this whole cloud platform right there must be a whole bunch of other things as well so today I'm going to do the legit first look I have not done this before the only thing I have is an azure account because I've used there as your functions before I'm just gonna see if I can actually take my own web block which is a create some static site gems tax ID if I can then deploy that quickly or you know smoothly I don't know whatever with static web apps of a sure so let's do this all right first of all let's have a look at the azure static web apps web site to see what they offer so I can learn a little bit of what I'm going to be doing right funny thing before this I try to Google like as your static sites and you get like articles from 2018 where they introduce blob storage there's nothing about this and this is kind of funny right because Microsoft offers so many solutions especially on Asscher so many things it's really funny but I couldn't find this thing even though it's like their new big awesomeness so I had to go to different Twitter accounts of people I follow it's like oh yeah it's actually acid it's a short static web apps not static sites I found it so a modern web app surface that offers streamlined full stack development from source code to global high availability that is some sentence awesome that is well written it also covers a lot of cool stuff and they give you a free trial I do have a trial you can I do have an account you can see I'm logged in so let's have a look so you fell up modern web apps fast with global reach and skill sure it's like Nathalie Phi or first of all it's similar so productivity from local development to get have native workflows with CI CD actually this is interesting so this is like they are now connecting the github universe to the azure universe and I think that's like github actions and stuff and I'm really interested to see how that works once we start this up okay manage the global availability for static content so this is just a CDN edge I would assume like Nathalie fire offers dynamic skill for surface API so this is there as your functions like Amazon lambda functions that net LIF I actually uses and then streamlines management including custom domain configuration authentication and authorization that's pretty cool too so reading from that and from what I know from the msbuild conference they kind of have certain routes could you need also authenticate or you cannot see certain things with certain roles and you can have a custom domain um I don't think today we're gonna go into that because it's probably gonna be a little video that's a bit too long and I just want to see the first step so all of you who do gem stack can make an account and actually run with a website quickly okay so it's all C icd its github yeah so this is kind of the the gem stack approach right and they also have assure functions this is cool um have lifecycle management build with confidence sure you know what why don't we just jump in so let me just go to portal a sure calm beam okay logged in always when I see this interface it's a little bit jarring to me there's like so much stuff and the design is so tech focused it's not that friendly then again it's generally really tacky people going in here I'm you can see I have my fall tech account I have been luckily given this by my company this is great so what I think is we're gonna have to create a resource and most likely we're just going to search for static yeah that was pretty easy I did not expect that to be here here we go okay so there are different plans I have my own fault ex subscription so I should be able to just create okay it's not as scary as I thought are there some scroll bar here though hmm Hey okay let's just not look at how they did that it's it's all good it's some sort of panel flow let's not get bogged down by that so basically um subscription yeah this is my own subscription a resource group in Azure is basically you need to have a group where your resources lift that is managed and you can do a bunch of different ones I have a bunch of them so I'm just gonna use my own Tim been extra source group that I built like months ago okay so I'm gonna do my blog because we're gonna take my grits and website that's actually this so this website that is basically a static website that works really well and it's super fast and it's all fun grits um check it out super cool also it uses Priss make as the backend so this is my Tim Mannix blog region well I am in Western Europe I'm gonna choose Western Europe SKU if it's free i I don't know okay so we're gonna have to connect my github account okay because of course it's gonna take my website or my in the code that I have from github so in this case this is pretty similar to how Natalie Phi does it they basically look at your git repository if there's a change in a certain branch they will actually rebuild your code and deploy it on the CDN edge I'm assuming this is the same so I have my own organization sure my repository then this is my blog branch just master ok there we go so application okay so this is basically in that master branch where my aunt lives which is in this case the root so I'm assuming yeah so the slash represents the root okay so it's no root sure if I had an API location or if I had an API I guess less API is fine and the artifact I know that when I built my grid some website it goes to the dist folder so basically what they say with deployment terms artifact is basically the thing that comes out when you run the compilation of your project so they take that thing those are your static files and they put them somewhere ok what are tags text our name value pairs that enable you to categorize resources and few consolidated billing by applying the same tag to multiple resources and resource groups oh yeah so if I had a whole probably or like a whole bunch of static apps and other things in a sure I can you say this is block and then when I saw gopher block you find all of them we have one I'm not gonna need this so review and curate you know what I kind of like this step-by-step thing it's it works you just need to know the concept of a resource group and is it done so there's a subscription level blah ok so oh now I can click create okay sure so we're just checking it reviewing we go initializing deployment deployment is underway now the scroll bar is gone by the way we're not stepping in it's still very nerdy it's a crazy interface but you know what it works it works deployments succeed it okay go to resource holy moly I think it worked guys well we don't have anything yet but it's on my research group it's my subscription idea it's the master branch and okay so this is my github action that I just mentioned so let's have a look at that URL that I just created for me so okay so we don't have anything deployed on this yet it just created MySpace shall we say let's have a look because actually there's these github actions right so what let's just click on this ooh so I think because I connected to github they created an action for me right so there's an SEO static web app see I see D action on my repository tip MINIX 2020 okay so but why are there two of the same running cute let's have a look okay so there's actually a build process going now ooh that looks like natla fighting me but now it's in github I like I wonder can I use like a sure def tools or you know the azure DevOps get or can I use git lap I wonder I'd love to see that um so can we check if there's like a console output of this thing okay so they did a check out or I can actually not see that the output okay oh oh okay okay here we go okay NPM install happened a few moments later oh I think now it's done and it's actually copying files somewhere I think it might be finished okay okay so it's still running though okay so I have an API n-no so we just refresh huh oh yeah and so basically I am now on Selman coast in Azure static fnet and everything works if you compare this to my experience of trying out s your functions this is ridiculously easy we actually just set up something and it works so if I now do commit to this master branch here it will actually do another action most likely like this job completed it just runs it and redeploys it here and you know here my pwace stuff everything is running why don't we just do this oh the new light hose oh no this is actually not the new one this isn't this is still the one older chrome this is not canary well let's see it would be fun to see if this is different from the net leaf I built for example approximately 10 hours later okay good not bad at all ninety-eight performance on my net if I website I have 99 I don't know what's the difference there but oh by the way it's just the new no this is not the new lighthouse but what is this 93 here I have errors in my console oh yes of course on my own browser I'm blocking things like Google Analytics so when there's errors it it gives you a stab here for this ok anyways um that was ridiculously simple so you can probably do a whole bunch of other things in here you have some configuration stuff probably I can add environment variables which is really cool I've custom domains I can do role management you know what let's not for now go into this let's just keep it at this because if I can do it this easily you can do that too so I'm impressed this is cool this was a very smooth team tries I'm impressed I'm happy with this you know what if this works well I might switch to this for now I'm really happy at net defi it's been surfing me well for a long time so who knows maybe when I do a new project where I use Azure functions and I need more stuff like authentication and all that kind of stuff I probably move to this because I have an account anyways thanks for watching and I'll see you next time