In ONLY 6 Minutes - Blazor Interactive SSR and MudBlazor Tutorial

I have definitely had my fair share of challenges when it comes to working with blazer all thanks to render modes and I don't think I'm alone on this when I wanted to get started working with mud Blazer as a control Library I hit all sorts of different snags and it really comes down to the fact that I didn't understand render modes hi my name is Nick centino and I'm a principal software engineering manager at Microsoft in this video we're going to look at getting set up with mud Blazer in a Blazer serers side render mode application I'm hoping that I can save you some time and headaches and avoid some of the mistakes that I made just by following the tutorial a little bit more closely a quick reminder to subscribe to the channel and check the pin comment for my courses on dome train and with that said let's go make a new project in visual studio all right so we're going to be making a Blazer web app so in the list of projects that we have here I'm going to select Blazer web app and we'll step through this together and obviously the next part here is we just want to give this a name I'm not going to get too creative but call it something that you want to call it and pick a good spot for your code I'm going to go ahead press next on here and this is where we need to make some important decisions in particular I want us to go to this drop down for the render mode here and we're going to select server if you go pick Auto and get server and web assembly I think that this can unlock some cool potential and this is the direction I went the first time with working with mud Blazer but I really didn't know what I was getting myself into and I wasn't fully prepared to start working with this render mode in hindsight I think just going to server render mode would have been much better better for me and that's why I'm putting this tutorial together so we're going to select server here and the rest of the options you can consider what you want for your own project I'm also going to include just the sample Pages here as well just so that we have an app that we can run right after once we're ready we can go ahead and press create and there we go we have our project all set up so now it's time to get mud Blazer installed I'm going to go ahead and right click on the project to manage Nate packages in this menu you can also do this on the command line if you're more comfortable that way but I'm going to go search for mud Blazer and we can go add this right in so we'll install that right now that we have the N get package installed we're going to want to go to theore Imports razor file so we'll go find that right here underscore Imports razor and this is going to be like the global using file that we have so at the end of this we'll add something for mud Blazer there we go we'll add that line right at the bottom and this way when we're going to make razor files have access to the items inside of mud Blazer next we have to go to the app Razer file so we'll open this up and we have a couple of things that we have to add to both the head and the body here so I'm going to paste in this code here and actually I'll separate it out a little bit more so you can see but we need these two links added in here this is going to get us the stylesheet you can see the CSS file right off of the fonts googleapis.com and then we have this mud Blazer minified CSS stylesheet as well and then we have these three providers that we add in to the end next we'll modify the body by adding this script in here as well so we have this minified Javascript file mud Blazer min.js so we'll get that added in and we'll go ahead and save the app Razer file by the way I will have a link to a blog post that has all of the code that you can copy and paste along with all of the steps that I'm taking here so if you're trying to pause the video and try to type out all this code that you see don't worry you can click the blog post in the comments and the description and it will take you to all of the stuff that you can copy and paste so don't feel like you have to pause and try to rush to copy it all down or something like that I'll take care of you the final part that we need to do is we need to update the program.cs file to get the services injected so what we're going to do is get the using statement for mud Blazer Services added and there was a little bit of a spoiler cuz it was on my clipboard but we'll go ahead and add in Builder Services add mud services this means that all of these mud Blazer services will be available for us now on the web app appliation Builder and that way when we create the web application everything we need for mud Blazer will be available now to prove that this was working what I did in my blog post and again you can go copy and paste all of this code that's in the blog post was I went to the counter razor page and if you didn't create your project with the sample that comes with it don't worry you don't have to go do this this was just to prove that it was working so what I'm going to do is replace all of the code that we have on here to have an updated counter Razer page that has mud Blazer components this is effectively the same page it's just that we have some mud components like mud text and mud button it's still going to have a counter right that'll count up with the current count we'll still have a button with a click event so nothing too fancy it's just that we're using the different controls at this point though we can go ahead and run this and see how it works awesome and we have our beautiful Blazer app now so I'm going to go ahead to this menu we'll go to the counter page and there we go we have the Blazer components set up here right this is exactly what we would expect to see the button works as we expect I know it's not that exciting but this is truly Now using mud Blazer components so only a few steps to go ahead and get set up here not a super exciting tutorial but a very basic one to be able to get set up and get going with mud Blazer in a Blazer web application we are using server side rendering so that was an important step if you're using the Dual mode where you have a client and a server project that gets a little bit more complicated not necessarily because of the mud blade pieces but just because there's a lot more stuff going on and for me getting started with blazer that was a little bit over my head I just wanted to start building some simple stuff so I'm hoping that this tutorial helps you get up and running if you want to use mud Blazer and you can avoid doing some of the complicated stuff that I accidentally did in my own Journey if you're interested in seeing other videos about working in Blazer you can check out this video series next thanks and I'll see you next time