Deploy a React app to Azure Static Web Apps

awesome all right well this is our first foray or an experiment into using uh open broadcast studio to record some video of a pair programming session between myself and Dave gin we are going to attempt today to demonstrate how to publish a react client web app to a static web app in azure so hopefully this turns out to be a a successful experiment and if that is the case then we'd love to start bringing you some more content on a weekly basis where we stream that live to our Microsoft Azure health and Life Sciences YouTube channel so how does that sound Dave that sounds awesome thanks for having me today Phil and static web apps or something that's new to me even though I've done a lot of react development over the years so I'm really looking forward to this session and learning from you here yeah awesome I know I've been um playing around a little bit lately with like how to publish a static web app how to publish a Blazer app like a Blazer webassembly app out to static web apps um and we do have some samples of that in our team repos on GitHub that we could maybe show off in a future session that might be kind of cool uh but you know basically any type of Client app or a spa that you want to host that even can have a certain amount of you know if you have like an Express backend API to it and so forth um that can be hosted using static web apps with an API backend using Azure functions which is really cool so we've got some other video content we could share around that but I think for today let's let's just try to get the sample app you've been working on a react Client app that demonstrates how to fetch some patient data and physician data from our graph fire project which is a graphql interface in front of the Azure API for fire so I think it's a good demo of you know how easy it is to create a client app and and maybe we can show off then today how to get that hosted quickly in an Azure static web app uh so I'm going to switch over here to our Azure portal and let's just go ahead and create a new Resource Group I kind of like to start here in the portal so we can see what the the bits and pieces are and as we'll see in a minute uh there's a ton of tooling that's now built into the Azure portal around like app service and static web apps that helps you get like Ci CD pipelines spun up as you're deploying resources so that you know it doesn't turn into that uh just right click deploy type scenario where you know you spin everything up in Azure and then all of a sudden you find yourself just you know like dragging and dropping zip files to publish or using FTP to publish uh we'll see how it's going to use some Wizards to create yaml pipelines that we could use in Azure devops or GitHub action workflows to create the whole process for us so that being said let's go ahead and get this new a resource Group created oh and while you're doing that which um what are we going to use for CI CD today I know I've got a pretty deep background in Azure devops but I'm not touched sure um GitHub actions much and I noticed you mentioned both of those with our email file yeah and and uh even further than that we'll see how templates can be generated that would be more portable too right so even if you're using like a system uh what's another good one like Jenkins or you know some other CIA system um the Azure portal is now able to generate those templates for us that you know we could use them in whatever system we wanted to just kind of giving the example of of devops and GitHub since those are kind of natively integrated um and can be wired up for us uh we'll go with GitHub actions though since the repo that you've been working on is already in GitHub then we can just kind of deploy that pipeline template right alongside of you know that yaml file right alongside in in your repo and the the portal will do that for us so we'll see how that works in a second uh I guess East US is an okay region we're just creating a new Resource Group here finish creating that and then scrolling called it yeah I believe I called it graph fire react yep there we go okay so let's go ahead and create a new static web app all right there we've got one right there all right now let's just go through the options here uh it's going to be in our hls hack subscription where we just created this Resource Group so that's all pre-selected which is nice uh we can just give it a name this works a little bit differently than you know if you're familiar with spinning up Azure app service where you have to come up with a name that's globally unique across like all of azure you don't need to do that here what ends up happening is in the background a dynamically generated URL and a public facing IP gets spun up for the static web app oh cool um and then you know obviously if you need to add like a custom domain or you know your own SSL search and everything in there you can do that but it's going to generate a name for us um so that way you know when we're giving the resource itself a name here we don't need to uh you know come up with something that's like totally unique or whatever so we'll just call it uh like our graph fire react client perfect that'll match the GitHub repo name awesome okay that's great um there's two different uh plan types or skus available right now with static web apps uh free you are kind of limited I believe in how many free instances you can have in a particular subscription um but free means free right and it says for hobby or personal projects we want you to use this we want you to try it out host some websites um and it's totally free um you are a little bit limited there again in the number of sites that you can deploy using that free SKU and then also in some of the capabilities like some of the more advanced capabilities um if you want to uh you know do things with uh like v-nets or you know if you have some like kind of network special cases that you want to handle with restricting traffic or if you want to do something called bring your own API backend so like if you wanted to integrate with an API that already exists someplace else and another subscription you wouldn't be able to do that with the free SKU you'd have to upgrade to the to the standard SKU but for us today since you know we're just trying to get a react uh pretty simple app up and running we can use the free one which is fine uh we'll pick East oh I guess um East U.S where our Resource Group default was selected isn't available for static web apps right now but we can pick East us2 that's close enough okay um for the default integration with uh Source control we'll say we want to use GitHub and you can see that it's already detected that I'm signed into my GitHub account I could choose to to change that if I wanted to um and then it shows me a list of the repos and organizations that I have access to so this is the wizard I talked about that will wire up the CI CD pipeline for us in our repo automatically depending on which one we choose all right let's do it yeah cool so um you know I the the repo that you have with your code is in the Microsoft organization which um kind of unfortunately for us like that's a pretty large organization right there's a lot of repos in there so usually what happens is when you select a Microsoft um and and maybe this is fixed now let's see what happens here but you know sometimes if you pick a very large organization it has to you know kind of iterate through all those repositories um and it made us time out so if you you know if you pick that and you see like this is just empty um that could be a reason um okay we called this graph fire react client uh client yep um and again I don't think it's like live time searching right there I think it just realized like hey this is a really big or we're not going to be able to pull back all the repos so there's just none in the list so so not a big deal one way to get around that is just pick like your personal uh uh org if you want to and then you know just pick like a placeholder just create an empty project or something so that we can get the template generated got it um or you can just come up here and say other and then what will happen is it'll show us the template at the end that it was going to use um and then we can just upload that manually so I think that's the route we'll have to go uh today here all right all right let me just make sure that's what I want to do uh we'll just pretend we're gonna use one of these do you have a main branch I think in yours right uh I do yes all right so and this is I kind of wanted to complete the wizard here too so you can see some of the other options that it gives you you know you need to pick the the branch which represents the main branch so it'll set up our our GitHub action workflow pipeline so that it only triggers a release uh when a change is made to this main branch so you know that way you can kind of set up your git flow processes if you want to um and then down here under build presets we've got a whole list of Frameworks to choose from so you know if you had a Blazer app like that's an option now you can just pick from Blazer and it's right there since we have react we can just choose react um It'll ask us like Hey where's the root of your application um and I believe we can select just the root of it here okay um let me double check though how what the structure of yours looks like um so when yours gets built I believe it goes into the public folder right like that's where the site is hosted out of uh yes when you're running it locally but I think there's also a build command that outputs a build folder um okay so we would want to yeah either configure it then to point at this public folder or figure out like where when you build it you know where is it going to go um and that's going to be like the home directory so that we want yeah if we want to test that really quick I don't know if you have Visual Studio code open and can open this repository really quick but you can run a npm or yarn build yeah and it'll it'll do that production build and I just did that locally and it output it output a build folder for this so let's see what that looks like and that can give us some clues for the configuration questions that were being asked about um yeah and just for everyone's information this was this react project was bootstrapped using uh create react app which I think is one of the common ways to do it but not definitely not the only way cool bootstrap okay so you're saying I should be able to do like a yarn build yep you should be able to just run yarn build and that's going to run the react scripts build from the uh package.json file and what you're going to see is it's going to Output a build folder to the root directory all right awesome yeah I see that there now okay so let's hop back over to my browser and look at this configuration [Music] um so output location yeah so the app itself is located at the root of our repo yep um and then the output location like you said when I ran the the yarn build there it goes to this build folder so it looks like they kind of picked up on that as a standard or a best practice with the react apps and pre-populated that for me which is which is pretty cool awesome all right so let's see if I can get this to you so question for you could you potentially then since since the Microsoft organization's having trouble loading could you potentially go Fork that GitHub repo that we have into your own organization uh yes yep I could but why don't we do that before we uh that's okay all right cool so let's do that and then we'll come back and and create it again so I will switch from here let's see I can just use the fork button right over here that's a great idea so we'll just Fork that right into my personal GitHub Fork the main branch that's okay all right awesome so now I'm in my personal one and if I go back to the Azure portal this time and we say we want to create a static web app all right so graph fire react there it is fire react client is what we want to call it okay these are options from before again we'll move to East us2 and now we should be able to just pick from my list here and let's see do we see it on the list yet graph or whatever react client perfect good thinking all right and we'll choose our react app again the defaults are fine now we should be able to review and create it awesome all right we'll set that deployment in motion okay so this is just in Azure portal deploying the static web app behind the scenes now what's happening is because we chose the GitHub repo and the type of app that it was and everything it's going to reach out because I was signed into my GitHub account it's going to reach out to that repository and place a yaml file a bill or a GitHub action workflow file out there for us that knows how to deploy the app into this static web app how cool does it do that as a pull request then that we're able to let's go check it out so if I go here and I might have to refresh we'll just see what we got so it did it as me and you can see it is running already oh cool the action runs right away um but if I look at the history of commits you should see that you know because because again because I was signed into my GitHub account on the Azure portal it was able to create this commit as me and this is what it did it did CI ads Azure static web apps workflow file and so here's what the file looks like I'll actually pull this up and this is the plane viewer so under your GitHub workflows folder you get a new yaml file and so here's our GitHub action workflow so this first section refers to the the triggers or you know what is going to kick off this action to run so anytime there is a push of code to the branch main it's going to trigger this um and then also this is kind of a cool feature of static web apps is um there's like a separate um what do you call it like similar to Azure app service where you have the different like deployment slots okay so kind of a concept like that where on a pull request it will deploy like a Dev or a staged instance of the app um that will be you know it'll display the URL of that temporary location or that staged app so you have an opportunity to test it on a pull request before it actually gets merged into your main branch and gets deployed out to the production slot in the static web app so that's kind of a cool feature there as well hey very cool hey Phil this is a kind of a side topic while we're looking at this code in um in GitHub in the browser would you mind changing your url to github.dev instead of github.com and we can show our users yeah so the cool new GitHub features yeah really quick I haven't used that much much myself you could also I I've got it to work before where you just hit period in the browser which is super cool it'll load up the same experience but effectively what we're going to get here is uh so again in browser editor of the files yep in the dev yep yeah I love it vs code in the browser so super neat very cool so is this a run by GitHub then or is it going to like an alternate uh like hosting provider or something that like just knows how to read the files uh this is run by GitHub I believe it is the feature that was shipped by GitHub as far as I know yep yeah I like that another thing I love too is if you have like GitHub code spaces enabled um super helpful like especially if you want to be able to run it and debug it without having to install a bunch of dependencies on your own machine that's another great option too to open up the repo just right in the browser using a code space um cool yeah this is great so now we can see that all the files right here in the solution Explorer and vs code um you may notice that it's even though I'm running vs code here in my browser it's picked up on the fact that like I want my um menu navigation over here on the right normally that's on the left so that's a setting that I've created for myself um and even though I'm running in the browser it's able to like synchronize all those settings and present vs code you know with with what I the way I want to see it or the settings that I've pre-configured so that's pretty cool so can we talk through this build file yeah this yaml file for a second because one of the things I was curious about and maybe you can answer this question for me is when we check in the code to this repository that build folder is get ignored um so it's not going to be there until we run that like yard build something like that that's an incorrect statement so the underscore GitHub workflows folder is not get ignored um sorry definitely will show up I'm at the build folder where we ran yarn build oh sure yeah so that order is get ignored so is this going to run that command for us to to generate that folder as part of the build pipeline process um so with uh again I haven't done this a ton with react app so we're just kind of playing around with this today and figuring it out like in the example of Blazer where it's a c-sharp application that's being compiled it does you know this build and deploy step will actually you know build like the c-sharp assemblies and everything for a Blazer and then they'll be made available um my understanding though is that yes the build and deploy job here which is the the first thing that's going to happen um or I guess that's uh the main job of the the action workflow here it it will based on the fact that we told it it's a react app it should you know do the install and run that for us that's awesome that's let's yeah I guess it's already run so let's see if it worked um I think in some cases though like if it doesn't do that then what you have to do is like right here this is an instance on line 21 of a step you know within the job you can see there's kind of a list of steps um it's kind of confusing sometimes because you know some of them have a name specified but like this first one doesn't say the name of the step you're running just which it's going to run um so some you know sometimes it looks a little goofy with with the list of steps there uh but my point being we could you know if we discover oh you know for some reason we've got some goofy new you know framework or you know maybe we want to use like hot towel or something and and there's not like an out-of-the-box build or you know the build isn't working for whatever reason we can add another step in between here that runs the build on this workflow Runner in GitHub as it's running this action workflow and then that would be you know output that's available for when it gets to this next build and deploy stuff so that it could to publish the app so I guess we'll find out in just a second here how much of that is is kind of wired up for us or if we need to add that intermediate stop um so pretty simple just two steps it's checking out your repo to the runner and then it's trying to run this Azure static web apps deploy action which takes in you know basically all those configuration questions we saw in the Azure portal in that wizard such as you know the app location it's just in the root of the repo the output build location it's in the build folder and we don't have an API that we're using so we can just leave that blank awesome um down here then on line 35 this is the job that runs on um you know like I said this gets triggered two different ways uh where either on a merge into the main branch it will run and do the build and deploy but also it will run on a pull request where it would publish it to that like staging slot or kind of the temporary test slot in the static web app um so they include this job here starting on line 35 so that when the pr is closed it kind of closes that all out and and cleans it up for you close and uh closes the pr got it cool um so let's go back to let's see if I want to go look and see what if if that yeah so if I look under actions right here um this will show me a list of all the running actions and like I said when this commit happened it you know that action was there and it ran right away because it was available immediately and it looks like it's green so it thinks it's deployed to our static web app okay so let's uh I mean you can click in and get the details on that it ran the build and deploy job which again was kind of the only job that it needs to do you can further drill in and see hear all the steps that happened can we expand that second one just out of curiosity yeah that one right there the building deploy yeah also something kind of new GitHub action workflow Runners will do and I keep using the term Runners if you're familiar with Azure devops you've got um uh what are the they're not Runners they're the agents yes so that's the Apples to Apples kind of you know comparison there it's the same thing as agents and in azure devops got it can we look at maybe the logging for that building deploy step a little bit just to kind of see yeah so let's see what happens let's check it out so here we can see it um is starting to run the deploy okay uh let's see it gave it an ID it found the root directory uh it uses this special um build agent in static web apps called O-rings I don't know a ton about that but um it it's kind of a cool little utility is my understanding that's able to like natively understand and be able to build like multiple different types of static web app framework okay apps all right so let's see what it did here detecting platform it detected yes so it's gonna say okay we need to use node.js all right we got some warnings down here so let's see resolving packages line 73 building fresh packages and then right here yarn build cool so creating an optimized production build that sounds like what we want uh we've got some js bundles here then that were the results which I think is also what we wanted to see yep those uh live out in the static app directory it's part of what gets deployed so that's that's great to see so that does take a little while to to run I mean you know one minute isn't like an eternity but when you're talking about running builds especially for just a simple you know basically Hello World app um you know this this can take a little while to run so just be advised of that I guess you know you may see um several minutes even like with blazer apps I know specifically those will sometimes take like almost five minutes to build those and um again I think it comes down to like that orange agent just because it's kind of like a you know one ring to rule them all kind of a tool that can understand all these different Frameworks um so depending on your framework like your mileage may vary on how long the build takes there but it looks like the build was completed and then here's where it's going to deploy it um again this looks like kind of an error here but I think that's expected we didn't have an API or want one so it's just telling us that that was empty and then you know it does the work of uploading that to the static web app so deployment was complete and then it does give us the URL here and again this is the generated URL um for the app so we could just click on that and go straight to it or if I go back over to the Azure portal and go to the resource it will also tell us here on the overview page the the generated URL of the app so let's click on that and see it renders your app so far so good so yep and it looks like it was doing an automatic uh redirect for login there to Azure active directory and it did come back you saw that it you know kind of some URL jumping around was happening up here so we did go over to Azure active directory I'm already signed in so it kicks me back then to the redirect URL and now my suspicion is you know we we haven't configured active directory to understand that like hey this is an app you should trust now that it's published out in Azure um so you know we always have to go update some settings now for our authentication flow so that this will complete the the redirect back to our app successfully yeah and I think part of that issue too if we go if we were to go back and look at our GitHub repository too we can we can show where we've got an opportunity to improve that project cool um I can show this really quick if you don't mind pulling it up and should I go back to the editor uh yeah go let's go back to the editor that's great bye yeah so just add the docs to the URL I don't use that option as much as I should that's that's pretty cool so if you look in our source directory and open up the auth config.js yeah uh let's see off config right since we had primarily been testing this locally if you look at line six we've got a hard-coded redirect URL that we're passing over as part of that query string got it okay so so if I just put in this URL right there instead of what we had whoops I need to get back to this other tab there we go yep typing coding and we'll probably want to keep that on um in our clip works I think we're going to need that someplace else as well we're probably going to need to go back to the Azure ad app and specify that that's a valid redirect okay and then we'll also probably need to go to our API since this is an inbra or since this is a JavaScript application and all of our API calls are being made um through the client we're going to have to make that a valid course origin cool so a couple couple config settings so let's see if we can just cruise through that really quick and and maybe get it to work to finish off the video um but again you know if we look at you know we're kind of making some code edits here uh but if you look in this repo that we've we forked because I wanted to put it in my personal um GitHub so we could easily access it you know now we could take this file and put it back you know I could do a PR and push this back to our our main repo that you created in the Microsoft org um and now that would be wired up to publish to that same uh static web app that we just created um and if we wanted to change that the way that it works is GitHub uses secrets so inside of the settings of your GitHub repo um this is another step that it did for us automatically as part of that wizard is it was able to you know using my sign in credentials from Azure go and provision some secret settings in our GitHub repository so this is how it knows like you know this is like the publish profile essentially if you're familiar with app service yep where to publish that too so you know we just have to copy this file push it over to our other repo update the secrets you can even change the name if you want to no big deal um and obviously you can get those Secrets there from right here so on your static web app there's a button at the top from the overview blade that says manage deployment token you click on that it'll show you all your secret values pop those into your GitHub Secrets or your Azure devops um you know environment variables what have you um and then you're good to go then the action knows how to deploy to this resource super cool all right so what we want to do now though is find the graph fire project which I believe is in another subscription so I'll have to switch over to that really quick I can never remember which subscription that's in but I think it's in our uh internal sub so I'll just switch to Microsoft which is where we are ready good uh let's see I think it's just graph fire there it is so this is um you know in case you're confused on the video we said oh there's no API involved uh in this app and that's true sort of right we're not publishing our own API The Client app itself is making client-side requests out to an existing API um and that's what this is again this is our graphql wrapper in front of an Azure API for fire um so what Dave mentioned is we you know we just have to go out here and make sure that like we're allowing um client-side calls to this API so that we can go from our app which I believe is just on the app service and let's see I could probably just search there for what I'm looking for uh yeah I think if you want to search you know sit there and hunt for it okay so I don't think I want that on there that's interesting that it was there and we'll save that oh so you're just going to set it up to allow yeah we'll just do that for now for the demo um no no big deal sounds presumably will want to be able to call this from other things and then we will need to go make that same change to the Azure active directory app yeah exactly right and that'll that'll be over here in my other tenant yep and check my client ID that I use there too because that might be one that I created for my testing purposes um oops that's right I'm in the uh I'm in the browser editor and that's so cool let's go back to auth config as the client ID yep all right we'll make sure that that guy is set up and if for some reason you don't have access to that I'm hanging out over here in my browser and I can make you I should be an owner here he is on that all right so I think what we want to do is under authentication we've got our you know just for testing locally when we run that we've got the redirect in there right um so we want to add or redirect sorry to the single page application type yep um and hopefully I still have this in my clipboard yes there it is and perfect I think that should be and don't forget the save button there sometimes we hide those all right so application is updated we've updated the cores so now presumably we don't want to be going to localhost anymore let me just close this tab do we want to check to make sure that get that redeployment ran uh oh you know what I didn't do that yet so this is still a pending change yep uh in the browser editor it auto saved it for me which is great but I better go to my GitHub and add um what I want to say it published URL redirect something like that okay cool so we can add all of our changes and we'll commit them all right since that was committed directly to the main board committed it straight to main which you know shame on me but I'm you know in my own fork in my own repo no problem um but yes that committed directly to main that'll trigger our workflow let me just pop another tab over here uh graphire react client there it is and if we go to actions we've got one running so again this should take about a minute or so um and then that way can we see the live logging on that wallet yeah let's check it out let us do that yep and this is kind of was talking about earlier too you know there's only like two steps in this job but we get more than that it seems like usually in the in the logs um the GitHub action workflow Runners do a pretty decent job of like recognizing what their prerequisites are going to be um so you know that you there's usually a setup step that happens here where it'll you know kind of prepare like their permissions and fetch secrets and do different things um and then it also recognizes that we're going to do an Azure static web app deployment um and that action uses a container a Docker container to run and do its thing so that's what this step is all about here so this isn't where it's actually running the build and deploy job it's just doing the setup for that action so sometimes you'll see that in your workflows like kind of a bunch of steps at the beginning that are just doing like the setup or you know fetching all the prerequisites for the actions that will be run as part of the job got it and then down there on line 95 of that previous log it looks like you can see exactly like the container that it's pulling the damage that it's bullying cool yeah um GitHub actions are really fun because uh it's not like they're published any place that is super secret or hidden away um when you see an action step that says it's going to run Azure slash static web apps you know deploy at V1 uh this is in the Azure organization on GitHub and it's in a repo called Static web apps deploy and it's the tag V1 so literally every GitHub action is just coming straight from a repository in GitHub this looks great it looks like we're making good progress through here finished uploading so that's good so I have things beeping at me in the background post deployment run looks like we finished so maybe we'll probably go back to open a new tab and and paste in our our browser URL and see if everything works yeah so let's go back here uh oh cool I gotta link directly to our static web app and then our URL all right it's refreshing me that went pretty quick uh I think it's fetching data now I can't remember exactly what we had on the home page here but yeah look at the developer toolbar and make sure we don't have any errors and here's again since it's the client-side application yeah um I might have to refresh it again to get this let's go oh there it goes look at that there it goes and we successfully got data back in the graph fire API so that's great awesome yeah and then you know again we mentioned it's just a simple demonstration app so we've got a couple of different nav routes up here like I can click and get a list of patients which uh looks like it didn't like us there um I know why this is and it is um something that happens with static web apps where you have to include a settings file if you're publishing an app to static web apps um so that static web apps knows how to handle routing basically right so when we're at the root URL here it was like oh cool I'll just load like the index file which is our static web app but uh inside of a static web app when you have you know um like JavaScript defined routing going on you know if I type that in here the address bar if I don't tell the static web app to expect that type of thing it's going to go look for a physical file named that and not be able to find and what we're looking for so got it and that that's really interesting to me that we have to do that um and and great call out there um from the react standpoint the reason we're seeing our you out URLs looked at like look like that is we're using react router for our routing and in particular we're using the browser router which puts things just as as normal slashes um alternatively we could have used the hash router which isn't as recommended these days but that would have done a hashtag and then the route at the end of our URLs and I would imagine if we had done that we wouldn't have run in to this issue yep all right let's see if I can find the file that I am looking for [Music] uh let's see I thought I had it in this one yep here we go so in the published uh folder so I'm look I'm referencing one of my blazer uh static web apps now just to see what the setup of that looks like um so this would be pretty similar right like we've got that public folder in our react app so that's uh you know think of that as like what this dub dub root folder is in our Blazer webassembly app um so we need this file there's basically a configuration file that you can stick in there um and then that you know the static web app is designed to pick up on the fact that the file exists and then use that for some of its configuration settings um so this is what we need to include um I could probably just download this file and save it over there uh but the setting is called navigation fallback so essentially if you get to like a 404 in a static web app you're saying hey just try to head back to the index.html page and let the static web app or the like the single page web application handle that route for you um yeah so let's see if we can just uh copy all of that static web app config Json should be able to just pop a new file in here we're going to put that in our public folder though and it has to have that specific name I'm guessing Okay and we'll just paste the content into there and again do another commit and that should force us to redeploy um and I don't need those comments in there that's fine all right add a navigation fallback cool cool all right hopefully that's what we want yep static web app config Jason perfect while we're waiting on that deployment um would it be possible and this is just for my curiosity to go over to uh Azure and look at that static web app and be able to like browse its file structure through like the advanced tools I don't believe you get that here oh interesting okay yeah um right yeah it is kind of a unique animal um there are some other interesting features we could maybe browse through though while we're waiting um let's do that you know just standard configuration stuff so if you wanted to put uh like app settings for some reason in there and you can see here how we've got those different environments I was talking about so similar to like deployment slots or whatever you've got production you can set up staging you can set up you know uh Dev whatever you need to do and have a different set of of configuration values for each one uh let's see general settings let's what do we got here visitor password uh yes whether or not you want um staging environments turned on oh cool it looks like there's a little reference to like that static web app config file that we're using now to set configuration uh app insights we can wire that up so that's pretty nice if you want to start collecting some client-side metrics and so forth using App insights you can wire that up here cool and you had mentioned custom domains before so here's like we can do that here exactly adding in any custom domains um apis so uh this we can maybe do in a subsequent video but I mentioned uh you know if you did have like an Express backend or something for your spa or maybe some other like simple API that you're using as kind of your server side but you didn't want to go through the hassle of you know publishing the whole thing uh to a app service uh static web apps has the capability to publish that back end API for you as an Azure function so this is kind of the area where you can see the configuration of all that very cool yeah um let's see here do we talk about yeah different environments again the preview deployments this is what's happening and when you do a PR against that Branch like I said that's kind of what's built into that thing you'll see a a preview deployment out here which gets its own um you know unique generated URL not the not the main one so um you've got a separate site that you can browse to and test everything out before it gets rolled to production so that's pretty neat um and there are some security stuff built in too which is is really cool um you can through the configuration uh I mean we're kind of diving into a whole bunch of additional topics now I guess but uh if you're familiar with you know I think it used to be called like easy auth right but like Azure 80 authentication for like app service um all of those providers are turned on by default in a static web app oh cool um and you can kind of control the behavior of how you want them to work or you know which ones you want to leverage using um different configuration values in that static web app config that we saw earlier so that's a whole other topic too go ahead yeah so we spent a lot of time in our react apps getting um all wired up yeah I'm all wired up so this would maybe depending on the use case of the app maybe make that process a little bit more straightforward yeah and you know as you just mentioned we we went ahead and wired all that up in in the app itself which is pretty straightforward to do you know it's pretty simple scenario um but if you did want to leverage other forms of authentication so you know like the the Facebook and the um like GitHub auth provider like literally every single one of them that comes natively out of the box with uh easy auth is turned on for a static web app um so like let's say you're supporting multiple providers you know then you could just put some code into your client-side app that you know handles the authenticated user and not necessarily the wiring up of the authentication mechanism um so you have that ability to write to like tap into um the authentication provider that's happening in the static web app here and then like get the context of the user and make decisions and stuff in your code so really from an app standpoint then it sounds like you could almost assume that your users already logged in by the time they're hitting your application and then just do things contextually exactly and these are very cool all right let's go double check here it looks like this is done so hopefully we can uh let me just close out of that and we'll just pop a new browser again it's going to log me in again um there we go load it up really fast that time and now what we wanted to test was that we configured the routing correctly so that when I click on a route inside of a single page web application um it's now handled by the single page web application and and not looking for a static file so here we go that just works and if we click on that view patient we should see like a patient detail real simple patient details example page and that's all working that's awesome great work all right well cool I think we did it that's a few trials and tribulations there but kind of the process of going through um you know if you just have a react single page web application how you can get that spun up and hosted pretty simply in an Azure static web app that's great Phil thanks so much for taking the time today to to show this to me and I think I've got a lot of questions and follow-up topics for this but if we're going to do this as a weekly session I think we've got plenty of time to do that absolutely all right thanks Dave see you next time see you next time thanks bye

Channel: Microsoft Healthcare and Life Blog Videos

Views: 3,689

Keywords:

Id: X3U9k6wT2cc

Length: 48min 56sec (2936 seconds)

Published: Tue Nov 08 2022