Azure Static Web Apps Review - 2 Months later

hey guys welcome back to gotta be geek in today's video i wanted to talk about azure static web apps and i've gone over them a little bit in the past in a previous video which was my microsoft build 2020 kind of favorites uh video that i done you can check that out and click on the link that i'll have up there for you to click on if you are interested in seeing the other things that i like from microsoft build but azure static web apps was definitely one of the ones i really liked and i said in that video that i would do a follow-up one talking about my experience and rebuilding my website using that so that's what i've done and i mentioned in a previous video that this was coming so here we are i'm going to go over my experience and time that i've spent on and off for the last few weeks rebuilding my website using azure static web apps and i'll go over pros cons and any extra gotchas that you might want to know for building your website using azure static web apps let's get into it [Music] before i get into the pros of azure static web apps the first thing i wanted to do was to welcome anybody that's landing on this channel for the first time and this is the first video that you're watching of mine so welcome my name is mike and in these videos i go through different tutorials talk about dev tools and just a lot of coding and software engineering related stuff because that is what i love to do so welcome if you like the video make sure you hit that like button down there because it definitely helps me out and if you really like the video then hit that subscribe button and hit the bell icon so you get notified when i drop the next video now the first pro that we'll go over in azure static web apps is going to be that it is free i mean that's that's i think that we're done right i mean we just say free and you should just use it right no okay so other than the fact that it's free i told you it was free right because i mean you just like free stuff right who doesn't want free stuff i mean i like free stuff but anyway the next part is that it comes with serverless api integration so it uses azure functions written in either typescript or javascript however you want it to work and you can create different function apis for different things that you need to do you can integrate it with azure's free tier of cosmodb or cosmos db and then you have a data set for whatever data you want to get and you can have that retrieve whatever it is you need to retrieve whatever data you want and it's still all free end to end so you get a static website you get the serverless api with whatever you need it to connect to and you get cosmos tv's free tier to store whatever it is you need to store so you just get this whole awesome package of integration all for free which is really neat the third and final pro that i'm going to go over for the azure static web apps is that the deployment process is relatively simple while there is a little bit of customization that we'll get into here in a little bit towards the end because the deployment process is simple because you just go to the azure portal you go to create your azure static web app and then you can select it to link into your github account and then select the repository the branch that you want plug in a few variables and then it will commit in the workflow or the the yaml file for the deployment process so that every time you commit a change to that branch then it will automatically deploy that for you and it just makes the process relatively simple so you don't have to sit there and figure out all the stuff with the ml file it does most of the legwork for you and getting that all set up now getting into the cons of azure static web apps the first one that i wanted to go over is that local development can be kind of funky and so what do i mean by that well as i said earlier one of the cool things about azure static web apps is that not only do you get the static site support but you also get the serverless api support with azure functions which is neat but trying to develop and debug those locally together can be kind of a weird experience and it really depends on how you're building your static website and so the first part is that a lot of people are going to go or gravitate towards either next js or next js if you don't know what any of those are i'll have links form in the description below and i may do a future video on creating applications with those if you're interested i actually chose well actually i went through both using next js and next js initially and try using both of those to figure out which one i wanted to land on it next js uses react and knox js uses vue both of them are really awesome my site actually is right now is using next js because i think i've just preferred react overview for a little while now but view is definitely still got my eye so i'm still not 100 sold on whether or not i'm going to stick with next i may go to next but we'll see i might view you know if there's any interest put in the comments section below and i can do kind of a review or tutorials either or both on both next and next js in the future if you're interested but i'm not gonna go over those today so getting back to the development being kind of funky in a local environment is that depending on what kind of static site generation you're doing or how you're doing your development the folder structure that you're using can be kind of different so for next in particular you can use the command for like a lot of different development servers it's like a run dev command that will allow you to have a local server running and serving your files or your content for you and you'll have hot reloading so you can just save your files and it will automatically reload everything so that you can get live updates but the example that azure has is that you would may have some like their example assumes that you have something really simple like just a basic index html page with some simple content on it and they use an an extension called live server to be able to render or load your or serve your static content for you and you can certainly do that but it's kind of different in that you're not going to get at least in the case of next js and next.js you're not going to get the hot reloading kind of aspect that you normally would because normally if i were developing just the front end part locally i would be able to you know edit files save them it will rebuild and that will be shown in the browser but if you want to be able to use the live server which i'll get into why you would need that here shortly is you would need to generate or export the site and build where it creates all those different static web pages that way the live server can render it properly and there's some settings that i'll put up on here screen here that you can see there's one setting in particular which is the um i've forgotten what it is let me pull it back up here so i can actually talk about it uh the setting was the live server settings dot settings.root which allows you to specify the root of a of the which folder the live server is going to serve from if you don't set this to wherever the index html file is then the way it serves the content can be it just doesn't work properly so you need to make sure to set that but that wasn't something that was covered in the microsoft documentation for static web apps now the reason that this is kind of weird is and or funky is because when you're trying to both run the front end with your hoppy loading and using just the dev run where next.js serves the files for you and if you're trying to debug the serverless api which you can just do in vs code you can go to your like index file that you would have for your functions you can hit f5 and it will run the api locally but the downside is is that if you use next.js to serve your files using its local development server it doesn't understand the route that you need for proxying over to the server list api so things don't function correctly so you'll see here that when i'm doing this on my local one if i don't use live server and then use live servers proxy settings to host my site and render it the live server provides the proxy to point extra api requests or filter those over to your serverless api but next.js doesn't have a way to really do this unless you were to maybe go into their webpack config and figure out some way to do that and so unfortunately there's not an easy out-of-the-box way to do it not to say that there isn't but it's not something that's just relatively simple to do with a couple config options kind of like live server so if you want to be able to debug or not necessarily debug but you want to be able to run your static website locally and have it hit your serverless api endpoints to make sure that everything functions correctly you have to use the live server extension because running it with a local development server through something like next js and xjs or depend unless you you know do something super custom with your own webpack config you're not going to be able to run those together so i've just had to do some graceful error handling on my side when i want to just debug or test things on the front end irrespective of the api and then if i want to test the api i usually just do f5 in visual studio and then i'll hit the end points with postman to make sure that things are doing what i want them to do and then also you'll you can use breakpoints and vs code with your azure functions so other than that i think it's not horrible to work around but i just think that it would be nice if it was a little bit of a cleaner experience to be able to run both of them at the same time without having to use visual studio codes live server extension so there you go the second con that i wanted to talk about for energy static web maps is going to be that there's no root domain support so what is this and what is this what does that mean so a root domain is also referred to as an apex domain and in my website as an example you may see www.gotobegeek.com well on apex or root domain is just that website without the ww so it'll be gotta be geek.com now unfortunately the reason this is a problem is because when you go to set up a custom domain in azure static web apps you cannot use your root or apex domain and this is something that they're planning to add in the future but unfortunately it wasn't included in the preview release so how do we fix it well the way i fixed it is using cloudflare's free account that you can have you don't need to pay for anything from cloudflare and the way this works is you for me i have namecheap as my domain provider i set up the domain name servers that cloudflare provides in my domain provider which uses them instead of the free dns that my domain provider has and and now cloudflare uses a feature called cname flattening which you can look up i'll have a link for cloudflare and the documentation on their cna flattening in the description below for you to check out so go check that out if you're curious but and i can if you need to or if there's any interest in it i can do a tutorial on this whole process if anybody wants so in the comments section let me know if you think i should do a tutorial on the root domain kind of work around in this instance but anyway so it uses the cname flattening there's a couple records which we can have up on the screen here for you to check out and it forwards anything that goes to my root domain or apex domain onto my www um domain and then there's a page rule that i have configured in cloudflare that takes any uh anything extra so if you want to like the about page in the apex domain it's just gonna forward you to the about page on the www part and this all happens transparently to you and you don't see it so it works out because it's still free so i'm not having to pay for anything the downside to this though is that there's even a little bit more work that you have to do to get this all working and that's if you're using email forwarding from your domain provider like i was then this is going to be broken because or at least in my case it was broken where namecheap doesn't allow you to do the email forwarding if they are not your dns provider so i had to use two different services because there was a couple recommended options to work around this but one of them is no longer free and this was kind of the recommended path for several years if you look online but that was to use mail gun and so mail gun has a an ability to send mail for free but if you want to receive it for free or you can no longer receive it for free you don't have to pay like 35 a month for that that may change at some point but when i looked it up that's what it cost and i didn't want to pay any money for this my goal was that i was removing my regular azure web app service to azure static web apps because i wanted to try and get something for free or save a lot of money so if i was going from paying 45 50 bucks a month to paying 35 a month i was saving money but not nearly as much as i wanted to so what i found was you can use mail gun to send mail for free and then use improve mx to receive or have email forwarding for free and so when i looked up in different some forums this was kind of a recommended path that you could take so i'll have some links for all those in the description below for you to check out but i have all my email forwarding now coming through improve mx and then i can send mail through mailgun and now i have cloudflare doing my senior and flattening so that i don't have to worry about the root domain support so it all works and it's free still but it it does take some extra work to get set up so it'll be nice and the future if azure static web maps can add that root domain support so i can just kind of get rid of all that extra work and just use my normal domain provider's dns moving on to the last part which is kind of more of an fyi not really a con and i kind of mentioned a little bit about this earlier and that was from the deployment pro that i had mentioned in the beginning is that the deployment's really easy to set up well the deployment is easy to set up but again this is really dependent on how you're building your static web app and where the content or the you know the files that you're going to be server serving are loaded or or hosted i guess you could say and so there is some configuration when you're setting up the deployment where it asks where those artifact files are and then when it creates that yaml file it doesn't really mean it can't account for every scenario so you may be using next.js like i am or you may be using sjs or you may be just manually building your own static website and if that's the case then some all those scenarios are probably going to end up meaning that your content is all built or rendered maybe a little bit differently and for me that static content isn't built until i export which is what next.js calls it and i think next was the same where you export it and that's what turns all of your page routes into different html files versus just one bundle that's on a single html file which is what you might do with a normal react or view application or angular and then so in this case i had to go through the yaml file and edit that yaml file to actually call the npm script for generating and exporting the the right content that we needed for the website because this was not included by default so you'll need to make sure that that yaml file is set up to run whatever mpm commands you need it to run to either build or transpile or whatever you need it to do to get your content into the right directory that you're telling the yaml file is the right directory for your static content to be served from so i have an example of that up here on the screen for you to check out so you can kind of see the before and the after of what my yaml file looked like and what i had to do to make it work so that if you're using xjs like i am then this will be probably really helpful and easy for you and i think it's pretty much the same for next.js the folder name may be different before it gets exported to so if you have any questions on this or any challenges make sure you let me know about them in the comments section below and i'll try and answer any of your questions about this whole process down there and again if everybody feels like there's a need for like a big tutorial video i can do a longer tutorial video that kind of goes over all this setup if anybody's interest so let me know in the comment section below or post any questions you have down there and i'll try and answer them there that's going to be it for me but as always it's not it for you if you haven't liked yet make sure you hit that like button because it definitely helps me out and if you haven't subscribed and you like this video and you want to know about the future ones you're going to need to get those notification bells turned on so subscribe and hit the bell and i will see you guys in the next one [Music] you

Channel: Gotta Be Geek

Views: 723

Keywords: azure, azure static web apps, serverless api, static website, static web apps

Id: MOigv1NLOiU

Length: 16min 18sec (978 seconds)

Published: Tue Aug 11 2020