Events Add an event Speakers Talks Collections
 
Cloud Summit 2021
September 13, 2021, Online
Cloud Summit 2021
Request Q&A
Cloud Summit 2021
From the conference
Cloud Summit 2021
Request Q&A
Video
Hosting dynamic sites on Azure Static Web Apps with Christopher Harrison
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
471
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About the talk


About speaker

Christopher Harrison
Senior Program Manager at Microsoft

I'm a developer with a web and data focus. Longtime trainer with a passion for learning. Love TypeScript and Python.

View the profile
Share

All right. Well, I'm good morning. Good afternoon. Good evening, depending on where in the world you happen to be. My name is, Christopher Harrison. I'm actually senior Advocate now just a couple of months ago and side of Microsoft cloud and a eye with a real Focus around. Webdav to bleach my favorite product that we've shipped since Visual Studio code or maybe even send some since the new windows terminal just to try and end with everything else. I have to say the terminal and absolutely I absolutely love it. That and WSL are just fantastic but in any

event and talk about them as your static web apps. So I want to get in and I talked about what it is, why I use it how it works, and it will just get it and actually do the thing. So what is azure static web apps? Can you use its from code to global scale in minutes in something, other than more sense? So let's talk about modern web. So is typically not going to involve AAA isn't going to involve the monolithic applications of the past that going in and creating

like I'm deploying this out to my server. That's not typically how we wind up doing things and a lot of projects that we're putting out there. They were taking advantage of these really cool front end Frame Works and letting them to the logic letting them do a lot of the lifting and then we have some back-end services that are going to be there to support them. Do a lot of times. I might have some services that I've written. I've got some other services that maybe I'm going out and call

it together. It so amusing than cool front end frame works like angular or react, or view, or my personal favorite spell time. I'm a huge, huge, huge fan. And if you don't mind a Shameless plug for a web Wednesday, a little bit later on this afternoon, 3 p.m. Pacific Alexa Levy hosting another show. Talking about talking about Stealth. I'm a huge fan of it. But this is a lot of how we do modern. So what we want to be able to do that is to build those and host those out. What are sometimes called Static.

You might also have heard of them as. Applications. That's quite commonly the, the more popular term that you'll hear, but we also want to help streamline some of the more difficult processes that we have in hosting web applications in writing, web application. And that's certainly going to involve authentication and authorization. Any web developer that has ever tried to start writing their own code for authentication. Authorization knows the struggle that this

can be does probably the best job after that. This can really be tricky. So what's really cool about as your status is at, this is Bill. Because after all, if you're creating Going to need some level of authentication authorization. And this is going to be big frightened without me, actually having to do anything to an able Twitter authentication GitHub authentication or Azure active directory. And if what you want to be able to do is not inside of those three, you could

also bring your own authentication as well. If you, if you need to your apis, that are going to be running on the server or going to be powered by Azure functions. And if you're not familiar with your functions, functions is the serverless component, the Alger and it's designed to automatically scan and grow and also be extremely cost-effective applies into a static web app says, well, most everything are actually free inside of static web apps and that.

Look like cool Enterprise things or for a lot of the apps that you're going to build, you're going to notice if that's going to be available for free, but not least is CI CD powered by GitHub actions meeting developers, right? Where they are because chances are, you're hosting your coat inside of GitHub. So we invent things, let's just do this right on top of us until that's what's happened. Until what you'll see when we get in to actually do the deployment is working to have a GitHub repository, in

the inside of here. We're going to have two men, folders one that's going to host whatever our front end is and then one that's going to host our back end or rapin. Going to push that up into our main branch or maybe PR into it. And when that happens to deploy, all of that out. Web apps to all have our static content. That's going to be all the HTML, JavaScript CSS. We're going to have our inside is wrapped inside of this neat. Little package called Static

web apps actually do the thing actually bring this together, and actually do it. So, there's the last little bit of marketing, and let's get in and do the demo here. So, give me just a second and then I'm going to share a browser wind. That should be there. We got perfect. So if you want to share this app, that's a perfect. This is the repository that I'm going to use for all of my demo here. So this is a little workshop for a hydrostatic to notice is that there's like some

step by step instructions on how to actually go through everything and so forth. But the real thing that I'm interested in here is inside, of here. We have a react app. That's already. So let's go in and take a look at this. Open up my source folder here. And what you're going to notice is Inside of a little, there's kind of the core reactor, where were then going to load up our little app component and then we're going to tell that to render. If I open up that app component, then going to notice is we're going to use one of them, and then

I've got a, I'm a little bit of code here to do the update to the list. If you want, I'll get to that in a second, but there is that, and then my dog list jsx. This is now going to do a little bit of work to display out a a list of of dogs here. So I've got my code that's been going to load everything up and then down below is the display. So is like or react. That's not the purpose of the damned. If you haven't done react, if you're only using vanilla JS, or maybe the reason that I

chose for your act is just because it was what I chose one, but I wrote this out everything that I'm going to be for angular or whatever other framework is that you happen to be using. So don't worry too much at all about about about, If you're not overly familiar with it. So there's somebody outside and then open up the oven. And if I open this up, what this is then going to do is return out the list of all of that fact, from my, from my server. Obviously, you could go ahead and load this. Typically. That's what you would do this a little bit easier. So

I'm not calling out today face. This is just hard-coded right into here with all your functions. Gives you the ability to create a function. That's then going to be hosted inside of a server list, is this context object. Now, this context, object is going to give you access to everything that's going on with the, with the request. So I can, for example, log things out. I can get the actual request objects if there was anything in the body that was being sent up, I could then read that and then

noticed that there's a little Rose property here. That's our response where I can then build up the response. So you'll notice that I'm putting together is going to have all of the items in my case. This is a JavaScript array, but this could also be a full objects if if you wanted to. So if I'm like using a mongo database and I'm I'm Gray. Objects that I want to just send those out. I can absolutely do that. So I'm not in any way, shape, or form limited to primitive types here that they automatically send it on down,

which is pretty cool. So, there is my, there's my little application. There's my little project. Now, if you wanted to follow along and then go ahead and deposit, or a really didn't set this up as a template, do that real quick. That's really what you would want to be able to do. If you hit that it'll give you the opportunity to then just make a copy of that and away from my, from there, in my case. Inside Visual Studio code spaces, Studio code inside the browser. And actually I should say GitHub codespaces. That's really where it

is. So this is actually just fully codespaces. So I Visual Studio code. So I can even like to install extension and do all sorts of things. I can go in and start modifying my code. I get the lake. I think all of my settings with my local right here, isn't that amusing. Visual Studio code is just a little bit easier when it comes to doing the deployment. Now, I could go into the portal to do this, but I really like to use the extension. So what I want to do is deploy my site out to Azure static web

apps. So if you go into the extensions Marketplace for address. If there is some tax help by the way, and then you could go ahead and install and I've already got it installed by my button says uninstall. Add and install it. And if I go into my little as resection. It's been going to prompt me to sign it. I've got my functions up here. I really want my static web app. So let me click sign in. I can help close the window. Well, thank you. There we go. And I'm going to choose

my visual studio subscription. It. Now needs to go. Hey, do you want to authorize GitHub to work with this? And the reason for that? Is it getting going back to the slides? All of this is built around. This is actually going to set up an actions inside of my GitHub repository. So let me click continue there and hit continue their, I cannot close the window again, and I think I have working changes, but let me just go ahead and commit them and I'm just

going to do a real quick. Now. Okay. Sorry. I kind of lost my, my train of thought that it wasn't expecting that message. So it threw me for a second you. Or did you? I'm actually just going to back this up and do this one more time here. Now, if you haven't already authenticated for GitHub, like you saw, it. Will then from me at that point. I'm now done that. So now it's going to say, okay. Well, what do you want to use? So I'm going to choose Studio code. Okay. Well, what would

you like to name? Because I'm very creative in my name. Let me hit enter here. And now it's going to ask me to choose a region. It it makes it kind of look like this is going to be deployed out to one reason and one reason only and that's actually not the case. With amazing. One of the amazing things about Asher. Static web apps is that you will automatically get your application. It will automatically do that. There's literally nothing that I have to do to enabled that via replication to know when somebody goes to hit my website.

They're actually going to hit a server that's closer to them. That's pretty slick. And again, I don't have to do anything for that. So the location that it's asking me for here is really sort of where I want my initial deployment to go. If I decide to set up any staging environments, the production site is going to be globally deployed, which is really slick. West us2 me. Things like a Blazer and future if you're using maybe a static site generator like some form of a hodgepodge.

If you're doing different things and kind of putting them all together, then you could just go ahead and shoes customer that actually what I'm going to choose here. The root of all of my coat is that's going to be inside of a show. The route is the name of the output for all of your JavaScript CSS in HTML. Again, we think about modern web dev long gone are the days of just writing HTML CSS, and JavaScript into having that deploy. Although many would argue and I think rightly, so that we should probably start to bring some of that back that instead, the

way that we do or we used to, do you use for you and it'll language. The browser, isn't able to understand something that the browser can understand and that build process. It's then going to our creative director, that's going to be called bill. So you would put in whatever that is here and know it's going to deploy all of that up. Until you'll notice, it gives me a little button right here, where I can open my actions here and I can actually see it deploying out. So I can now see if doing its thing.

And if I go to the Azure portal here, and let me go to Where do I want to be? I want my where my research groups. All these horses in, this might just take it as here. What do I call it Summit? Okay, there's my little static robot. Just had to go find it real quick. Okay, inside. A couple real quick things that I want to highlight while this is doing its deployment. First of all is under environment earlier about having staging environment that every time that you create a pull request into that, it will then set up a stage

environment and a testing. This will then support that which is pretty darn cool. If I can then put all of those right inside of here using process. Which is what you would do typically The last little thing that I want to highlight just go back to the overview here, is you'll notice that URL is red moss. And then a hex value demo name that I set up. It's this right here and there's honestly good reason for that because one of the challenges we naming classes. So it will generate this for

you. Nephew don't like this and I don't blame you. You'll notice right here, and then I could send a brand new custom domain here. So if you go in and you registered, this will then walk you through that whole process. For my workflow to have completed the latest green, the Trap is clean. Everything is so let me go back and Wawa. This is now deployed out. I was just going to walk through a real quick Wizard and that then deployed everything out how we could potentially do changes is. If I go

to let's just say my app jsx and let's add a new message and let's say this is my dates and let's just save that commits a.m. Made. Made a change and then get push that will no doubt. That would then give me a new staging environment. But now behind the scenes, I could actually go in and take a look here. We're going to see that that's really yet. So that is as your static. So what we saw there was how we react project and how we could deploy that out to static web app. So it was already

on weed. Already have that. So we just went into our Visual Studio code installed, that static web apps extension, and then we had plus and walk through the wizard to manage that installation. So there is as your static web apps and I believe that that's 25 minutes and five minutes for Q&A.

Cackle comments for the website

Buy this talk

Access to the talk “Hosting dynamic sites on Azure Static Web Apps with Christopher Harrison”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Full access

Get access to all videos “Cloud Summit 2021”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
93
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Mustafa Toroman
Solution Architect, Azure MVP at CLOUDEON
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Thomas Maurer
Senior Cloud Advocate at Microsoft
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Tanya Janca
Founder & CEO at We Hack Purple Academy
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “Hosting dynamic sites on Azure Static Web Apps with Christopher Harrison”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
949 conferences
37757 speakers
14408 hours of content