Burke Learns Blazor - Setting up CI/CD for Blazor with Static Web Apps

foreign last week on Burke learns Blazer I I talked Burke into a potentially bad idea I don't know here's the idea and if you log in and that's oh that's gotten at six should I upgrade it yeah yeah we've now just left the tutorial and we're doing two errors it's amazing balls somebody [Music] all right here I can read the error I don't have time for that man I'm trying to there's a literal hurricane outside my window wow Azure static equipment storm came from her I don't think he's pretending it was a storm I think it was a real storm and my internet's back I feel like I just want to stay here and try to figure this out like yeah I was kind of Tethered on my phone with like one bar [Music] I don't know just even watching that makes me nervous perk I don't know I don't want to do this no it's going to be great today okay so how's the weather in your area dude the Sun is it's partially cloudy but uh nothing like it was last time okay oh man how long did it take you to make that actually it was it was relatively quick um I've been using clip champ and they have really good like stock stuff like um sound effects and music and stuff and then I just kind of watched through on like three or four times speed and clipped out some great parts so yeah that's great man awesome it captured the feeling of the whole stream really well okay so let's talk through a few things I think we should recap what we're building and then um we should all let's also I want to clarify one thing from comments this is unscripted like we're we're we are putting in some time between shows to kind of review technically what we're doing and all that but we're being careful not to overscript it I mean Burke you and I like we give technical talks all the time we know how to like make it look good right we can do the stagecraft exactly and that's fine there's tons of other shows on all our other channels that you know like but this we're we're live programming and it's uncomfortable really a little bit you know it's fun but it's a little scary and you know but so if you want a super polish show maybe not yeah so the deal here's the deal chat like when you see these YouTubers or presentations or whatever right and they're just they're just banging out a project and it's like everything they do just works they've rehearsed that at least a hundred times before they do it in front of you and even then stuff goes wrong and you can't figure it out okay so that's not real programming so we're trying to give you real programming here and it's gonna be rough but we figured that's more authentic than us just going off and building the thing and then coming back and building it with you yeah all right and then I guess one other thing is we should show let me uh throw your your screen on them let's go to that thanks so much I appreciate Mark's moral support here [Laughter] all right yeah so this is the application we're building just as a reminder uh I think our likenesses are in the way of the yeah yeah let me move over but you can put a link in um and you can create lists of links it pulls in the open graph information less unless you're Twitter and then you don't have any whatever reason oh I entered this URL wrong right you can delete things you can reorder them and then when you're ready you can pull in you know you can put a description here and then you can publish this and it gives you one link so it's like the URL is slash whatever and if you don't put anything in here and actually like this is not even going to come back let's do a different one um if if you don't put a link in here and you just click publish like this will still work and it'll stick like a random it's like bitly right or you can put a custom one in and then if you log in you can manage your links right so if you log in and you create them you get you have a dashboard which we can't actually get to because the authentication doesn't work anymore because of Twitter API changes but the actual dashboard for your own list looks like this right so you can go to your back to your list you can reorder you can add things you can save that's the idea of the application it's really just a list of things right it's not on on the surface we're not trying to we're not training a large language model or we're trying to like yeah decode the human genome here like it's just a list and it's still really hard okay that's the funny thing about this so well and so so the original version of this that you built out was Azure Stat or Azure storage view yep Azure functions yeah Cosmos DB yes C sharp on the function on the API view on the front end front door is in there because of like domain weirdness and so we're rewriting this because for a lot of reasons because Twitter failed us because we don't really need all the Azure stuff that we have anymore all this is now handled by a single service and it's like borderline free if not free yeah and so it's just the stuff that you you have to manually hook all the stuff together before now correct anything you were trying to do is basically packaged as a service right so it's pretty rough yeah and then Cecil who's here so that's when I gave a talk at Bill 2019 in fact I think that was one of the first links we created was um the Bad and the Ugly of Sir oh yeah so this is a talk we did we did an hour talk on how to stand up a static web application on Azure because that's that was just the reality then now that's not the case so it's time to it's time to plus like we're devs we rebuild stuff that's what devs do you just need it's part of the fun right yeah and once you learn some lessons and you know like so yeah so we're we're wanting to tack on some new API front ends we want to build it on the the like shipped service you save some money on the I mean I guess you know on some of the Azure Services um be a little bit more nimble like Azure um static web apps includes a bunch of really cool like cicd stuff which we'll look into some today um and then also like being on the the latest greatest modern stuff will make it lazy easier to contribute and like build build other features on maybe too all right so that with that out of the way last week was rough for a lot of reasons um and so what we've kind of decided to do is just like start over and take a more calculated approach to this and start in a in the recommended place instead of where we started which was on an older version of so all functions of Blazer I'll try and recap what we did because like it's it's kind of interesting to see um we went through a tutorial the tutorial was built on.net six um there's a few differences going from.net 6 to.net 7. for both functions and Blazer we just kind of went for it so we updated we updated the Cs project file and we just tried to run it and there's a few things that changed with that so uh Blazer just has some different things between how the HTML and the JavaScript and the you know every and the back-end stuff the dependencies are hooked together functions also change their hosting models so the new functions version 4 isolated hosting model I love it it's a lot more kind of standard it feels more like asp.net which I'm used to um but it is different so migrating all that stuff over it's going to take some time and probably not you know worth doing on screen um so yeah I think we can go I I sent over the link in our chat here yeah so we're going to start with this template we started with essentially you always started with a template that had net six and functions three okay we're now.net seven functions four and there's so many changes between the two of those versions that we were trying to manually upgrade yeah and it's better to just not start in an out of date unsupported so so if you go to this URL and do slash generate at the end of the URL or do that fine fine click the buttons okay okay all right let's see let's do we're doing it to selective organization do you need is it your browser profile no I don't think I think it's oh I can still get it it's the URLs I don't need to sign into any of those and then y'all do uppercase right is that right um yeah that works in JavaScript everything's lower case with dashes I mean for the most part that's how we do it but yeah well I guess this is fine okay um implementation implementation of uh .com built for Azure static web apps we'll make it public uh we don't need this no I don't think I can deselect this though it won't yeah you can't deselect it it's like okay anyway warning hey you have this integration do you want it no too bad take it anyway all right yeah well I mean in essence essentially yes well so so we started on it yeah so last week we started on it and we um are kind of doing a reset um so Burke you may not know you go um runs the B unit project which I think we may want to use in this A B unit is like the testing framework for Blazer ah gotcha okay yeah we talked about doing tests so let's clone this repo um so exciting there we go now what will happen a lot of I need to delete like both of these can I delete this I even did a full pull request to update us to dotnet or to Blazer um dot Net 7 template and then we're just just gone all right here we are the target framework in your project file does not match in your vs code wait wait wait did we clear the wrong how what happened yeah I called it oh your vs code config update your vs code config and then let's lesson learned here let's look at all those CS project files so go into client and API all right I'll start with uh it's already looking good functions and I like it where is my formatting for CS project files yeah you may not have your extensions here's my solution Explorer yeah what if we do this when in doubt just reload the window that's weird seems like it should does the extension contributes yeah CS project files I don't I don't know if CS project files get pretty formatting really I thought that I mean it's not the point of a new extension an improved experience all right Tim Tim Where Are You Tim Heuer get on here all right okay well so so this is all looking good and then one other thing let's just yeah that looks pretty at least let's go into the client yeah okay webassembly seven I'm liking it so some some things that are different in here from last week the big things in the API uh uh pardon the backseat driving I just I think this stuff's neat okay there's no startup.cs there used to be in the old um thing the old uh functions version and then this one also if you look at program CS program so this is kind of the this is going to look like this is just kind of standard um this is how you do most of the other stuff in in.net like asp.net or whatever it used to be Azure functions had kind of its own different hosting model thing so okay all right very nice so I'm gonna take Jonathan's recommendation and update also John do you want me to give you do you want to do live shares so you can like jump into okay so let's do that I'm gonna update I think you're right Jonathan when in doubt for people that are using vs code do you use insiders curious how many people are actually using insiders let's see if that fixed it well I'll be honest I have insiders installed but vs code updates so rapidly anyway I don't feel like I need to you know yeah it's every every month for stable and I think it's like every night for instance I don't know I shouldn't say that I don't know wow no Jonathan I'm sorry this is a good suggestion though um don't tell me there's another update don't do it to me all right let's do live share I think it's exciting so I will pop mine open in Visual Studio Windows just because you're gonna do it in visual studio uh should I I don't know why not all right how do you share the link with me uh I gotta generate it hold on I had to restart apparently I needed another update updates on updates Burke why am I eating a dozen donuts I don't know I was just like what's something that people would tune in to watch I was like well okay John do you did you actually get a dozen donuts yeah but I didn't even ask you if it was okay to put that I just put it in there I I read the description and I was like all right no I'm even gonna force me to do it they're pretty small all right live share probably was gonna want me to share okay um okay oh it was copied that's nice let me just send it to you in the and the chat thing in the chat the back Channel we have upgraded our resolution this week by the way we um yeah last week we were in 720p James was like what how is that from stream yard yeah um sabotage that's here okay live share workspace oh it popped me into okay it's trying to open vs code I guess I'm opening vs code yeah if you click it from the link I think it does code um what's what's something to sign into oh I do want a grant access to Azure static equipments let's do that um so I think okay we're going to want to try and do is like awareness thing right yeah so how do we do that okay so go ahead and I would open a terminal I mean there's probably a way you can do it directly and there is a launch config launch and debug Standalone Blazer web assembly attached to download functions client and server so here's the deal like you you gotta run you could run the API and the front end separately but the emulator is designed to glue all this stuff together which we'll get to later because y'all when when you have a static web app you'll have the front end and then you'll have the API running and all of your traffic is just slash API it just routes all that to your to your API but when you're working locally that doesn't work obviously right so the emulator glues all this together but we'll get there I feel like I'm getting ahead of myself people who don't know static web apps are like what are you talking about all right I'm gonna try opening this from inside visual studio so I'm going to go to the API and I think it's just Funk start you don't have to do CS project now because this is the full thing yeah just do Funk start no I was wrong I was wrong okay you do need c sharp there is a setting in your you can create a um local setting or whatever there's a Json file that normally will set that for you I'll start C sharp all right looks better I'm sure session yeah there we go so we should get we should have yeah here's our weather forecast I think we're getting the standard Blazer set up which is nice yeah um also let's get another terminal instance going here and I don't know if you if y'all know this but you can rename these things we'll just call this one this is already providing value to me we'll call this one client yeah on golly left John Galloway joined change the icon what can I change it to uh what's API what if I put an API no no I don't this is the kind of thing I would do right I would just like spend all this time all right so this is.net watch I believe man this is so much better than last time already I know right oh my gosh where's all the errors this is too easy okay I believe if you click on fetch data that's where the magic happens yeah but it doesn't see this is a thing like it doesn't know where the API is because slash API doesn't go anywhere locally right so this is where we need the emulator so the emulator and we should be able to check and see if this is actually installed okay one not three so um I I forget a static web app simulator is that like the real thing or is that like something this looks like this looks last week yeah um so we installed it and then we have to do commands and options oh there we go install init we already admitted SWA start page not found sweet let's try it again all right so swaths start and then we've we have a URL so I think we can just do so I'll start this and then dash dash it's like Dash Dash API location API Dev server there we go this is the one we want okay so let's do this so our front end is running on 5000 is that right uh Blazer runs on five thousand five thousand yeah double check that yeah and our apis on seven seventy seventy seventy seventy one that's right um so let's run this foreign localhost really oh there's a config yeah that's right that's for the front air localhost cannot be resolved to either fpv4 IPS and please check your network settings huh did it not say localhost did say localhost uh sometimes I mean you can do you can change around to like 0.0.0.0 or yeah localhost should work though that's so strange yeah like 0.0.0.0 [Music] yeah yeah we could what's that can well like the donuts I come out like this I don't know that's weird though the SWA CLA things should work yeah there we go all right Donuts that's weird yeah we got so we have a new URL so this so okay so see now we're we're on 42.80 instead of 5 000 but now when we go to fetch data we should get data we still don't get data I'm a liar from access to from origin oh of course why would there be a course policy locally is that a net thing because you're going from now from localhost to zeros oh that's right mm-hmm you could change your browser here change that to zeros we should probably figure out at some point maybe we need to Google Opera yeah still not happy I think it's still trying to go to localhost yeah I think the emulator is trying to go to localhost right so we may want to read up on that or maybe they're so back to that but when we deploy this this will actually work um yeah in the meeting it's easier to run in the cloud than locally so what we could do is change the fetch data you know great uh question here from McGill maybe it's bound to the something was bound to the port we were using uh to the Local Host yeah I don't think so I mean to the port on localhost no because these two things are running right like if they were but what we can do here y'all is we can just do this true now when it's deployed this is going to actually need to pull those from yeah it'll it'll break when it's deployed but for local just to show you that this works yeah and I'd like to look more at that that Clan line tool too because that's I agree with this like it should kind of handle that for us yeah but look it's doing it too there's a cores oh are you running under https no so normally that's what I try to do core is a star yeah weird okay what if you run under https that's a good question uh 5001 what is it still running oh yeah it doesn't like that okay scroll up tiny bit in the console oh it's only running out front on 5000. okay never mind me then what if let's just say let's just try it like this so what if we do so this is launch oh here's one other question here or suggestion kill don't try and run it just launch it all from the SWA tool I'll launch everything from the emulator yeah we could try that um close all or kill all the consoles yeah so that would be floss start I think it wants to launch the stuff yeah it does SWAT connecting already running serve content James with a good suggestion just reboot like but it doesn't I don't know how to start the front end right so if you know yeah I haven't used the SWA tool before it's this I mean I would think either or like usually usually when you're using JavaScript you have to do this right you have to start the front end so um well start the back end first usually well you have to start the front end the emulator though should start the back end so you can do um this should be like so this is to connect to an already running back end no it will run it for you so in our case like dot API swash start and then we just put the URL in here like should fire up the functions yeah see oh it says it's not waiting for it to be up and running it's not up and running yeah I mean so I'm still not totally get oh is this to get around course yeah I think so I mean that's the problem so you can just run the back yeah oh uh Jorge San Suave a knit and that is a thing but we shouldn't have to do all this stuff that's like done by the starter thing yeah so let's just let's put this back I tell you what let's just deploy this thing and see if we can just that's what I was thinking yeah um but where's the timeline initial commit yeah this is the one I want to restore right because I don't remember what exactly the path was for each yeah and I think that's part of what this um the starter template does is it's supposed to kind of have the discovery stuff set up yeah I don't even know what that is all right you know okay wait a second there are actually steps in the thing go in the API isolated folder copy local.settings.example.json so in your API folder is there a local dot settings.example really to local dot settings.json yeah then not following instructions okay so now let's not even do any of that SWA business just go to the API and do um dot uh Funk start dash dash CS C sharp this is pretty cool I watch all the stuff in my live share yeah it's awesome I'm glad you're looking at the chat because I'm my brain is okay this is good right now we can run that client now running the client let's get this it is all right now A Moment of Truth we gotta browse to the fetch data in the in the Blazer front end this would then actually but again it won't work because oh it works it works it works it does work it just works how does it just work um because okay so let's because it's got the port wired up right there where local dot settings I think so you don't but like how does the so before remember when you were saying why isn't course working it was because you know I get my course was working but like why does the slash API path work right so look slash API slash weather forecasts it has it doesn't know slash API should be localhost colon 5000 slash API weather forecast when calling this is really annoying scroll back to the left is there an HTTP client yeah okay so go into the yo I can't deal with this freaking uh what is what is all that business from the extension um okay so go into program CS in the Blazer thing hold on I need to mute notifications I can't either what is this no holy crap wow debug remove this there we go and High notifications now where's my do not disturb do not disturb okay okay now go into program CS in The Client app because I am betting that it configures an HTTP client Base address URI Builder configuration API prefix which is where that is going to be in um static is it is there a static web app.config yeah there is but this is just the fallback um your new efforts failed we're just all having fun at least where is this so normally there's going to be an app settings um but I don't see it there and I'm not sure why not um and um there it is there it is that's how it knows awesome so we don't even well we are going to need the emulator because at some point because we're gonna have to what's cool about this though see that app settings thing those are automatically overwritten in Azure by Azure app settings all right so let's deploy this thing and actually see this work um we have the extension and I'm going to deploy it to my own account because I think we're going to end up blowing this thing away or no this is is this the project or forever project yeah I'm not sure it's hard just let's say it is okay and we'll put it in demos static web apps so while you're doing that I'll talk through a little bit more this app settings.development.json so the whole app settings thing with.net um it has kind of this layered approach where it like you set your settings for local and then when you deploy it to Azure it's going to look for an environment variable and if there's an environment variable with the same name it automatically overwrites it so that's really handy because you can set whatever settings you can put whatever Keys you can say here's my local database or whatever and it'll use that and then in production it automatically overwrites and there's no code changes required all right creating the static web app oh where do we want to put it the most important part it's like I don't care uh Blazer yeah client yes oh this you actually have to fill this business in here no it's filled in already configured okay enter the location of your build is that right yep okay uh yeah I think disallowed by policy policy I don't have permissions to do this they basically they've locked me out of this y'all um they won't let you be great Burke no let's try it in this one and then like man that's that's mean that's rough I think this is my fourth donut I'm not sure you're almost halfway there um when you create resources in Azure John what is the right is it supposed to be like this stuff's important to me is it supposed to be like this right or is it like this I don't think it matters I mean from so some have strict rules some don't what do you do what do I do a static um I end up looking at how other people are doing them you know what I mean yeah I hear you all right so that's right that's the same well it let us do it now no okay so we have no choice but to do it in my personal subscription uh entertainment I recently had a uh Azure account I shared a resource Group with someone else for a demo and the thing was still running apparently and my Azure went over its budget and then over 150 bucks I was surprised I was like whoa yeah so I had no Azure for like a week all right so that succeeded it says click to view resource right it doesn't actually did it oh it just opens at the sidebar um browse the site it's not gonna work because it's not going to be deployed yet but live it's waiting for Content yes let's go to the GitHub repo and this is where we start getting into some of the cicd stuff which is exciting so here's our application not to be confused with this one should we delete yes we should I I didn't want to delete it at first because I uh you know or maybe don't hey well before deleting the old one look at oh I didn't create the pull request yet I don't know it was a pull request let's just kill it tears in the Marine I have read yes yeah oh no wait yeah [Music] see ya oh wait don't know all right so actions we should have an action here yeah okay what's happening this is this is amazing I love GitHub actions okay can you click on the uh you know workflow file on the bottom left so oh yeah what else what are we doing here Okay so it's checking out it's build and deploy the building deploy does some neat stuff where it actually pushes it out to azure yes also yeah when we created this y'all it added this file to the project and I'm not great with the solution Explorer so you'll see me jump out here this folder didn't exist this file in here what this is what configures the CI CD for us automatically that's the same file we were just looking at right right okay so there's some magic stuff going on here by the way there's this thing called oryx and do you know much about oryx uh that's the it used to be kudu oryx is the new build tool yes exactly and I okay so I'm going to send here I'll just pasting in the comments but I'll chat it over to you too this thing is crazy I don't know why I put it in the comments it was silly of me okay there's oryx is this oh yeah James wants to zoom bring the zoom he wants me to zoom I guess yeah okay so it's building it there we go okay can check out the thing I sent you in the chat oryx so what's neat so yeah it's the old kudu but what it does is it um it detects the different it can detect your project type because like Azure and all the Azure hosting things can run multiple different type you could have run your functions could have run in python or dot net or whatever right and so oryx will detect that and then it's what actually is like oh this is a Blazer static web app with a function that means we need to configure figure this workflow and all that stuff and this is what that's what's doing now so if you can see it it built it and then it deployed it so if we go back here and refresh boom does this work yeah okay so you could I mean I don't know if we want to you could share that Link in the chat anyone can go to this is the public this is our this is the new the earliest uh uh very exciting Burke we're pivoting by the way holy CR are we no please no well the earliest used to serve up URLs and now is the weather it's a weather app freaking amazing now what do we do so one thing I was thinking is I want to send you a pull request okay and the reason I want to do that is because there's also some automation some CI CD stuff around that around pull requests so I am like on the Fly let's do this you're changing the app yeah okay so yeah let me go in here I'm doing it in the browser because because why not okay let's share my screen let's share this yeah okay share it let's go up there okay let's go in and change in the client I'm going to change something in the pages index I'm going to say hello um oops let's go edit hello oops I got a fork it I'm not sharing anymore what happened I stopped sharing Ricky mistake John okay don't worry about it let's get's happening it's gonna be right there add the stream there we go all right hello just change it to the URL list so that's what that's what it's gonna be okay right here yeah so that'll be that'll be in the H1 yeah I don't know yeah and how are okay whatever there we go proposed changes and then I'm going to create a pull request we're going to see what's happened updates okay so now magical thing is going to happen let's switch back over to you all right go over to the repo and you should see okay so see that thing going and you see the little yeah the ax there's an action running and what it's going to do is it's going to build and deploy this as a preview yeah and you'll see in a minute that we can actually look at and decide if we like it before we merge the pull request right because a lot of times you and this saves you having to pull down build run right you can preview the change and see it right here especially for the case where it's like hey we've got a function we've got a Blazer front end we've got multiple different things I don't have time to review your pull request Burke because you know that's a lot of stuff going on but here it's like a live one I can click through and and get an idea that it's actually running so yeah okay so when the CH oh my gosh did I break it how did I mess that up hold on deployment token was not provided I don't even know what's going on there that's strange really um this sounds Vaguely Familiar deployment token that's interesting can we rerun that one is it the is it because you don't you're not a member you are a member though right that's impossible yeah maybe my repo doesn't have I do remember a little bit John or you just go directly against it I think I went directly against it no I did Fork it yeah go directly against it okay not that it should matter I mean you submitted the pull request to the main repo but yeah um let me make sure you're not sure if it allowed me to do that I think is there Branch protection on there let's see nope okay collaborators all right let's add people that's me right maintain admin we'll make you an admin oh my gosh so much power power yeah that's what to say pending invite here I'll copy it in before you make it even yeah so James James is right and there's a way you can go through and you can add these like GitHub secrets that is crazy yeah he's right there and that's just to stop anybody from yes you don't you don't want just anybody to be able to yeah run your GitHub actions because your CI CDs might be something that you're paying for and if anybody can just come in and build yeah it can be malicious right and somebody did comment something about that like it's something you do want to think about of you know do you want to allow um you know but it so once you've kind of thought through it I mean it is very it is a very kind of powerful thing let me close my old PR create a new one so it's not good I just I'm re-running it it's I mean it's from you so it should work hopefully we shall see if not I'll just close it yeah I think I can redo that it was some pretty beautiful code that I did but so while it's doing that we can recap a bit we are rebuilding a site that allows you to share a list of links uh it was previously built what four years ago um on Azure storage with View and functions yeah that's right yeah we're rebuilding this app here okay I'm gonna close my pull requests we need to look into we need to we'll fix that for next time but yeah let's let's make that a homework assignment but uh so for y'all for reference though like I'm gonna make the change here in my own client so let's go to like oh but I want to see the pull request you want to what I mean we want to see the actual pull request don't we we do yeah but I just want to show the CI CD like I do it if I deploy like where so now we're in a place where I don't know what I'm doing okay index so Index this is a change yeah oh are you going to create a pull request yeah well yeah because it will let me do it if that didn't let me do it too I'm creating a pull request anyhow it's a race I'm gonna deny it oh I need to do a new Branch oh I'm just I just committed directly I didn't critical requests oh that'll work too you're gonna kick me out there was a question from DRC can you accept John's PR we could have done that but what we want to show is the the now you're going to have a merge conflict am I or no you're not it's gonna I don't know what's gonna happen let's find out let's go we're already up on last week we have rating problems yeah so I made a PR compare [Music] oh he's merging stuff create a pull request all right exciting okay so now we're gonna see that and we'll get the preview page so we actually use this like on the.net website um it actually creates these like deployment slots with previews and all that super useful because if somebody's making a tweak to a page you want to make sure it's it actually looks good or if you're sharing like hey what do you think of this design you can create a PR and share it around um but it takes some work to set up so this is awesome that it's just kind of built in so hopefully this works I need to set up some um let's go okay yeah it's just a permissions thing we should look into that though because that's the deployment token uh all right there's like some errors like what what is that making me nervous bullseye so much going on I know it does a lot of stuff right yeah so there for instance M scripting that's because like it's actually doing aot compilation for Blazer which is pretty amazing um the Blazer web assembly stuff it does some like optimization and trimming um but yeah it's it runs a lot yeah I mean I imagine I would just set all this stuff up yourself I would have no idea all right so while this is running because it's going to take just a second here um what can we what do we want to do next John do we want to actually um oh well wait just a sec I got a question to answer here this is a great thing are using Linux servers to deploy.net apps I mean like so yeah it's so that's a Docker build running against Debian you're building on a Mac I've got the card running on Windows so.net is just it's a cross-platform thing so I think what we want to do next is I think we should create a um a project in GitHub like and like start doing a kanban board style like make a list of things that we need to do okay do we want to go through though and do like the essentials of Blazer like there's a counter demo or there's a counter tutorial that we could go through sure just oh you know and you were curious about binding and there's a pretty good like thing on the bind on the page about binding yeah so I think the one that I went to was what I was looking for community stand up not this Blazer yep okay no where is it y'all have a really good tutorial oh okay go back to Blazer the Blazer links right uh up front two up from npm two up for me what here Okay now click on get started yeah this is it Mac OS yeah I'm sure this is it so this is generating a new app we've already done this so then you recognize this all right so then well let's take just a second to look at this so this is Razer syntax Razer is kind of it's the syntax that we use in.net land that merges together C sharp code and HTML so that top line is called a directive and that is kind of like a thing that says this is the page this is a URL that maps to it you can also do binding for parameters being passed into it some other stuff there yep there you go then you'll see below in the page there's a mix there's HTML there's C sharp and then there's other stuff that looks like HTML but it's like survey prompt or page title and so those are components um and those are just kind of built in that survey prompt is a component so if you look in shared you'll see survey prompt yeah it's right there yep so this is actually you know kind of a common standard thing now in webdev where you kind of have these components and stuff so it's it's um it's just kind of using that sort of thing so here is a like your your standard like Blazer page right you've got your HTML at the top and then you've got your code at the bottom you can have as much code as you want there if it bugs you you can also move that to a separate file um and then here there's The Binding thing going on where um that at title is going to bind to the public title property thing below this one here but we're passing this in here yep so when you create survey prompt title equals the code thing at the bottom runs when the page loads and it sets that value so if you go back to survey prompt.raiser see where it says public string title it's listed as parameter yeah so let's go through because I think the I think this actually goes through this tutorial here yeah um so it's telling us to look at this we've already did this we actually changed it a little bit try the counter so let's go to the counter and oh it wants us to actually try the counter all right try the counter I success that's the deployed one here's our local one oh that works so that's running locally yeah you ran it with.net watch okay so go into just for fun go into vs code if you've still got it running and change see where it says current count plus plus yep do current count plus equals 10. yeah and Save now ah I didn't even have to didn't even refresh it just like that's so that's hot reload and that just it patches that code in locally for you so it we go to the counter file and a request for counter the on click of it is fire the increment count method and the current Okay so here let me turn on word wrap and I'm going to zoom out just a bit because it's some huge but so on click this is binding to the increment count method here so that anytime in Blazer where you see that at and a um and a event that's just binding to the on click and it's saying don't bind this in the in the traditional HTML way to bind it to a blazer event handler and then the private end so it's incrementing this variable and this variable is bound like this current and so so what took I I think this is kind of like more standard in JavaScript land or whatever this actually threw me a bit when I was moving from because I mostly build server-side apps and I I'm used to MVC and razor pages and it confused me when changing a value automatically updated that current count right and it's just two-way data binding by default it's yeah exactly so and then there's also a neat thing I don't know if it covers it in here but there's actually some stuff in The Binding where it shows more of that two-way data binding where you're typing a value into an input box and it updates a text thing yeah let's continue on here yeah I think that's what's gonna so open the index file in the text editor of your choice which should be via Visual Studio code or Visual Studio what is this gonna change this text editing yeah I'm just kidding all right the index file already exists which we were in uh it's located in the pages folder yep add a counter component to the app's home page by adding the counter Okay so no okay so just page title survey prompt and I so I can just add counter down here yep and let's see if yeah there it is so what's different here between this and something like reactor view is that when you have a component in JavaScript you have to import it right it's something like you know import counter from you know components slash counter whatever it is yeah but in Razer just automatically just knows about everything yeah and it's it's partly because like they're all in the same kind of in the same name space and the same like thing and so there's some default like Imports where it's able to find them you can also package that you can segment things off you can create shared libraries and stuff but yeah all right so so we've changed this we got the counter on the home page so modify the component component parameters all they're going to have you do what I just did probably are specified using attributes or child content which allow you to set properties on a child component okay Define a parameter on the counter component for specifying how much it increments with every button click so we just looked at this but I let's do it so what am I doing let's go to the counter having you add in a new parameter that's going to be the increment amount right so when you uh and this light is crop tab tab yeah crap crap tap nope that's Copilot it's like wait hold on oh create a public mint for increment amount that is a parameter it's like copilot do it no there we go okay okay yes okay all right that's exactly what it told us to do perfect that word wrap thing is throwing me off oh my bad yeah no no that's fine that's fine I'm just always like that shouldn't work oh why because it's on a different line yeah yeah I really should increase you know we should do here um what font size font where's font font foreign font size I think it's on family font size let's change it to like 14. okay and then and then what we can do is zoom out on the workbench and that gives us more room for code and it makes this stuff smaller so where were we all right now we're all on one line so so now that line below where current count plus equals you can have it add increment increment amount which I wonder like can copilot get this because it's got the context yep what do we even do here doing here this live stream yeah we're just pressing enter all right now counter increment amount equals 10. so now let's see let's see if co-pilot can get this right so we're just gonna take so copilot knows y'all it knows about other files that we have open yeah and it knows what we've been doing because it it remembers it has history so let's see if it can easier when you're sleeping can it guess what I'm gonna try to do here no no let's let's help it counter no no it cannot wow it totally just face planted so increment amount equals ten yeah it's gonna make it a different number increment amount equals something else there we go we're going big oh you need an INT you're you're too much wait a minute so there's type checking yeah on the on the int because it's an INT here yeah yeah so this is yeah so this is part of the thing right this is.net compiled code like it's it's compiling and checking it and all that yeah okay will that work it's not a float Burke all right okay you've written all the tests for it this is nice I just want to start over all right uh oh an error what happened I don't know something unhandled error occurred reload reload reload well why oh so that I think I don't know why they call that a rude edit yeah we should figure out why that's called a root edit I love it stop being so rude Burke okay started running what's happening I don't know this was denied is it I don't even remember what [Laughter] what's the old process still running uh exited building started content path press Ctrl C to shut down it's running on localhost 5000 which I've lost access to I yeah you see that is what I think the port's in use all right let's try this whoa there's a bunch of them a lot of five thousands happening there so where are we hold on I gotta and make this bigger 714 and 974 there's just killing pigs over there come on started um what could what is going on here building we may be at the limit of how what we're getting out of this anyways why would that fail that makes no common sense yeah um I wonder how reload's working it's trying to work yeah I don't know man that's odd is there uh are you sure that can you check again if the um if the port was freed om that's not a problem with that all right I don't know what's up with my local host but all right so there it is it's working um and I think that's that's like the Olivet now it wants me to watch this guy with a shiny jacket Jeff Fritz nice to do that uh okay so what do we do we want to keep going and or what do you mean what do you want to do here what I think we should do okay let's let's look at the documentation because I do want to look at two-way data binding a little bit more the documentation okay yeah so on the bottom right where it says Blazer documentation yeah up yep and then there's uh gosh this is Tiny there's a thing in here on binding that I actually really liked um it's in the Blazer section oh yeah that'll work data binding web apps Blazer yeah I think that'll work scroll down slight bit there's so they go into a lot of detail you can control quite a bit of stuff if you scroll down just a little bit there see where it has this thing so copy this entire thing in there this whole thing yep and let's create a new page called bind yeah buying dot razor and paste that in okay and who knows will this work we don't know rude edit all right so let's go back here and go to bind I'm denied for my own Local Host it's like being locked out of your own house um and then go to slash bind right yeah okay it only changes on blur so that is there are then within this page there's a lot more information in there about so it shows below not updated when the components render or whatever like there's stuff in here where you can do bind after you can do on change so like a little bit below it has a bind on change so bind on change normal binding on change are you kidding me no you don't have to do all that that's like a this is a magic thing that would happen there's a lot more in here like if you scroll down a little bit more sorry let me come over here yeah so the like there there's a bind on input and um as our but how would I get this to update like this so here's this is the difference right in view this would just work right you would just type yeah so see this here bind event on input is where it's going to ah so this is what we need to change here right yeah up above oh sorry here I would replace this entire yeah this may work um so again just here's bind yeah it's still not so just use what that's what we're doing on input I I feel like this page goes a little it goes deep fast instead of showing the simple case because there definitely is the thing um with the binary I'm used to when you type they automatically update as you type um oh you know why because it's bound to input value not input oh okay I bet you I bet you it has to be it's down to the private string instead of the public the the getter setter foreign event yeah so this might be something let's dig into for another time because this is going to be a little boring to watch like why won't this just work like this is the stuff when I work with blazer I'm like I don't understand this is so easy why doesn't this just work oh it's not even what it's not updating did I did it crash I don't know what's happening uh that's actually right look I took one of those inputs out didn't I I did there's still two inputs here I don't know okay so again saying that is normally the way that it works is it's it updates on Tab out I do know you can do it on on key press but I'm not I'm not sure what the setup for that is okay so you can control C and I'm not watch it again it may not have caught the change the URL no there's yeah so you so in that case we just shut this and you didn't change so yeah I would put that thing back to instead of buying event change that to bind for the top what whatever so I think what we should do probably at this point is go in and like do some do our kanban board and plan out what we want to do what we're going to do next okay yeah so let's do and we can put we can include on that list new project let's drop us over here we go new project I don't know where to put us there we go all right it's exciting do we want a board I think a board there's also a team backlog nah I think this is good foreign okay and we can also create some labels on some things because we I think we have some like homework items too right like I want to like look more into binding yeah let's do scaffold project done deploy deploy scaffolded necessarily feel like we've accomplished something wonderful all right all right so I'm thinking the way that we should eat this elephant is by tackling the hardest part of it first okay which is this page here right this is really the page that does all the work everything else is like ancillary to this thing so this is create a new list this is create a new list now there's a couple different things going on here there is a persistent nav bar across the top right so this is a component this is a component I think I think those are set like one is that like now I would create them separate honestly navbar login okay so maybe we should start with like a persistent nav bar yeah okay so okay this is so it Gail's got the answer here by the way on the binding by default if you only use bind it'll update when they blur you can change that using bind event equals blah blah blah such as key press so we could say bind of n equals key press oh so yeah so here it would be although I think I've lost access to this as well on um I don't know it looks like oh no it says C down at the bottom it says reload so the page didn't load it didn't load what do you mean see down at the bottom unhandled error oh yeah so there's some some wacky thing going on there still there might have been some sort of syntax I mean distracted yeah yeah let's go back to our projects um okay so we have persistent that part we have create a new list all right well hold on let me go back here uh this here this component here it is just an input but it also it's that OG thing too right it does a lot yeah like it checks to make sure that you don't do this okay so let's call that a new New Link component New Link component and there because there's like and I don't know how we want to split this out but like if we did um oh no here that's fine yeah so really you just need to validate it to make sure that it's a valid URL yeah okay this is fine um uh what about you yeah what about this up here or no I guess we could do um create new link component create link list component right the link list would be this thing here yep yes with this like how the heck okay are we gonna handle that well so so let's make that a different item drag and drop reorder is that a sub item here like how do we even do it separately honestly I don't know yeah it could be either way uh let's do it separately so um oh yep okay do we have a thing in there yet about like login no we haven't added because you don't actually need like login is something we can add down the road you don't actually need that I mean but a ton or less right it will be eventually yeah um I mean we'll we'll have to what's that well I think we should put it on the list it's something we're gonna do okay yeah we can do it so and I mean that's part of why we're doing the whole project right yeah so Implement Implement off yeah okay yeah I'm see what you're saying we're just making a list these things are not in order I'm sorry um okay so we got persistent navbar we got off we need this thing up here which is like the create title I think it's just called the publish component okay just this this whole thing and of course this is complicated because like you can't do this because that's already taken and that requires an API call and a database lookup and all right so yeah so and okay so do any notes you want to put on those like publish component must validate you know yeah um need to make sure it's not taken publish component um must must validate that I mean like a bulleted list here so first of all um url url must be legal right so we need to Define legal paths characters because you can't just put any character in there because whatever you do is going to be the URL slash yep right so we need to find so we need to validate that um URL must not be already in use or this must not already exist in database and I think that's it for that particular component cool but like you can't do that it's going to be interesting to see how we do this like shape the little shaking of the Box this is important to me as a front-end Dev like that little okay so put that on the list then like should have uh you know like um should have Shake animation when invalid this is on Border no this is on it's on tight it's on key down right keep pressing and now this is fine yeah it depends like this one's on blur uh check on blur oh yeah and this is oh it is it's on it's on key down for both of them you're right I'm gonna have to figure out how to do that yep um the so publish button should be disabled while working okay what does while working mean well yeah publish button should be disabled until valid but publish button so when you click publish it goes to the server it asks the server to create the URL the URL response the server response yeah they're depending on you know when you're doing it or or what's going on this can take half a second and it's possible to hit the publish button twice okay so only allow hitting publish once right yeah but yeah you can see the like Publishers disabled when it's not valid you can only hit publish once yeah there's also a so okay so let's update this I mean we could do this for all of them add a yeah I mean this is honestly really helpful because then we can like um we can start like there's all these rules you know in your head that I honestly didn't even know were there right navbar should be persistent on every page it's on every page um logged in user should see well we don't need to handle that now okay I mean that's that's really it um for the new link components um must have Shake animation red outline when invalid the Supreme physics is on enter I don't see this oh no it's a different wait oh it's a project under the org oh it did it under the org yeah that's I think that's where it creates them it's but it's linked to that right or we can link it I'm not sure I don't see the project yet oh yeah you don't see it here here orgs Euro list projects try this all right settings project settings I don't see it are you kidding me visibility private public now try it all right I don't know why you're in I think you have to accept your invite yeah okay I see it I see it now this is great manage access why do I have to invite you to literally everything so we can then start like we can play with it but we can basically queue up like okay next time we're gonna start on this or that like one sort of obvious thing for me is like we got to create the like data model and function you know what I mean like yeah for me to create the API thank you yeah um there's so much man I've I don't even know we could spend like two hours just filling this board out I mean well so but like before we can do before we can track anything we need an API with a basic API with data model right that is true yeah so um like I don't want to go too into the weeds but that's like as far as when we're planning what we want to do next I think on maybe we should do that next week API with the data model yeah um or what do you think yeah we could yeah we could do that where we just return uh a list of links from like we create a basic API with one endpoint that just returns a list of links for a requested URL that's the simplest thing that we can Implement yeah all right yeah we can start that next week I think and then where where I would go from there is doing the I guess maybe the link list component because we're pulling we're gonna create that API endpoint we want to display it so that would be the next logical thing to do so um yeah so I mean there's there's two different ways to go about it there's like back end first or front end first I'm cool either way on this if you want to go like build up build out the front end I mean we and we don't have to like decide the second but like yeah yeah let's do this and then this I think is the right way to go about it okay sounds great so so like we've got we've got a working app that's deployed we've got cicd we've got um we've got it running locally um I think we're in a good spot to like start digging into this now the only other thing I want to check oh yeah so we deployed right I need to change and this is a public oh yeah so great question here from Cecil we're gonna do up for grabs issues yeah we totally yeah we'll create issues as we go I think and like because we're gonna hit stuff where we're like uh and yeah we need all the help we can get so we we can create so it's a balance because we do want to do some of this stuff live on the stream right we can't let everyone write the entire thing for us [Laughter] let's start marking some up for grabs issues on this and then people can also go in and file issues too right they can go into the repos and they say hey like this isn't working or whatever yeah totally I love it um I think then that's it for this week hour and a half of that's pretty good not too bad I mean we could keep going but at some point like I didn't even know how long you're supposed to do this like how yeah so how many did you eat probably about six I never eat donuts I'm like half of what you promise people so you have to eat the remaining six right now forever yeah um wow all right Chad thanks for being here uh yeah this is this was great a lot of as always a lot of great like suggestions and things from from people um recommendations and then yeah I think as we go more we can involve like people want to have more um suggestions like part of what's interesting to me is obviously we want to rebuild if we want to add all the features that were already there right but there's also options to kind of rethink or add make things even better this time around too which is kind of neat totally yeah sorry I got a barking dog in the background work from home y'all there you go underrated and also overrated yeah all right so we'll see y'all back here I think either next Thursday or Friday yeah um and we'll we'll start on the API and see if we can get that that link that list created exciting okay all right see there we go oh [Music] foreign [Music] [Music] [Music]

Channel: dotnet

Views: 3,799

Keywords: blazor, web, copilot

Id: rRcnHYaZj7o

Length: 89min 48sec (5388 seconds)

Published: Fri Jun 23 2023