Setup/install MudBlazor in a Blazor Server App

hello and welcome to this video where we're going to take a look at how we install or how we set up mud Blazer inside a Blazer server application so first of all let's go and create a new project I'll just open Visual Studio 2022 then we want to go and create a new project and we want to choose a Blazer server app so we just say next and it really doesn't matter what we call the projects we can just call it Blazer app 5 and I'll say next and in here we want to use the.net6 framework so let's say create and the first thing we will do when we have our project we want to go and right click the project name and go to manage nougat packages and then we want to say browse and what you want to browse for is actually just mud Blazer so just type mud Blazer and it will be this package that we're going to install and we will just go and install the latest stable version as long as you can see if we use.n6 we should also use the newest six version here so we will say install and I accept so now when that is set up we will go to the program.cs file because here at the top we want to say using and then modplacer.services and then we can also go and add the mod services so the way we do that is by taking our Builder and then say that services and say dot add mod services and that should actually be it for our program.cs file so the next file we want to go and set up is inside our Pages folder it is the underscore layout dot CS HTML file and from in here you want to find the bootstrap CSS that we have in our project and just make a new line because it's here we're going to insert the CSS from modplacer so if we just go back to Mud places website here we can click on this getting started Tab and if we scroll down a bit we will find this add font and style references so you can come in here and you can just go you can actually just click this to copy the text and we will click and we'll go and insert it here and if we just go back to the documentation here on how you set it up we will also go and take this script because we need to put that in the same file so let's just go and copy this text and down at the bottom underneath the Blazer server.js here we want to paste it in so when that is pasted in we are almost good to go but we need to go into our shared folder also and into our main layout.racer file because from in here we want to go and add these providers so you can see we're actually going to add components and we want to go and copy this also and let's just go and paste it in just beneath the page title and now you can see we get these green underlines because it don't know what to do with it but we can just say show potential fixes and say we want to add mud Blazer to this page so by doing that we say using mud Blazer and that will do so that this page know where to find these providers so this is basically how we set it up we can now go and test it to see if it works so let's go to the index.razer file and let's just get rid of all this and then let's try to go back to the modblazer website let's go to the documentation here and now to test it we can actually just go and choose something that we want to insert so let's try to take this grid and if I scroll down a bit you can see we we can make this layout so we can go and say show code and this is the code for this layout so also just gonna go and copy this and let's insert it to the project and as you can see again we have these green underlines but it's because we need to use mud Blazer also in here so just say using and let's say mark laser you could also before we tested let's go and add some buttons so in here we can see that we have the mod button so again let's just go and copy this and let's insert it above our grid so now we can go and test the application and as we expected we can now see that we have all the styling from mud Blazer and we was also able to use the grid so that was basically how you set up mud place inside your Blazer server app I hope you enjoyed this video and go and have a nice day bye

Channel: ZetBit

Views: 3,884

Keywords:

Id: ztRSbMnhODI

Length: 4min 31sec (271 seconds)

Published: Sat Jun 24 2023