Blazor WebAssembly, Web API and .NET 8 - Let’s create an application using Visual Studio Code

hi and welcome everyone I'm Gavin law in this video we are going to leverage a Blazer web assembly component and a web API component to create a basic movie review application we'll create this application on net 8 I'll demonstrate how to integrate a Blazer web assembly child component that resides outside the main Blazer web app project into a parent component that resides within the Blazer web app project the new blazer web app project template that has been introduced with net 8 the significance of the Blazer web app project template is that it can be used to include the new features introduced with net 8 namely service side rendering and streaming rendering along with the features with which we are already familiar namely Blazer web assembly and Blazer server for an overview of the new blazer features shipped with net 8 please check out this video to support the Channel please like this video and please consider subscribing please also ring the bell so that you'll be notified of future content please feel free to share this video with anyone you feel May benefit from its content if you'd like to thank me by buying me a coffee you can do this through my buy me a coffee web page it will of course be greatly appreciated I've recently joined X formerly Twitter so please feel free to follow me on X I love reading your comments so please feel free to engage with me in the comments section right let's get into this video right so the first thing we're going to do do is install Visual Studio code so it's very simple process we can just look for visual studio code here and navigate to this location in our browsers and we've got a number of options here I'm on a Windows platform so I'm going to Simply press the download for Windows button here to install Visual Studio code and it's that simple downloads the executable into your downloads folder okay and then we can navigate to the downloads folder and we can just double click it double click the relevant executable okay I'm not actually going to run the installation because I've already got Visual Studio installed on my local machine but if you simply double click the relevant exe from your downloads folder follow the step-by-step instructions and install Visual Studio code cuz we're going to use Visual Studio code to create our application in this video the next installation I will follow along with you because I don't have the latest release of net 8 which is RC number two so I'm going to just go net 8 SDK I'm going to search for net 8 SDK uh let's navigate to this URL and here we have it so the latest go live release is rc. 2 so this is the one I want to install so I've got a Windows platform so I'm going to install the x64 release so I'm going to download that to my downloads folder okay great let's open the downloads folder and then we can just install the latest version of net 8 which is a go live version of net 8 by simply double clicking on the relevant exe and following the step-by-step instructions to install this version of net 8 so this is obviously not the official release of net 8 it's a go live version of net 8 it's a release candidate version so that's what the RC means RC release candidate so I'm going to press the install button here and off it goes it's going to install this version of net8 on my local machine great so that should be installed now to verify that we've installed the version we can simply invoke Visual Studio code and then we can just type at the at the terminal prompt we can then type net D- version and that looks great RC version two so we've got the correct release candidate of net8 installed so we're now ready to create our application using visual studio code and the the latest release candidate of net 8 if you haven't yet installed the cop devkit extension it is highly recommended that you do install this extension before developing C applications using visual studio code to install the C devkit extension simply click on the extensions option within Visual Studio code search for C like this select cop devkit and install the extension okay so you can see that I by default I've got a project already loaded so one way to create a new project in Visual Studio code is to Simply create a new folder so I'm going to create a new folder here this is could be referred to as the root folder for this application and call this folder Blazer mo movie web app like that so we've got the folder there so let's go back to visual studio code and then we can simply open that folder let's go open folder um and we want to go into Source like this we got Blazer movie web app folder and this is the one we want so let's select that option and this is our root folder for our application and then we can just launch the terminal window and use the net SDK CLI to generate the relevant projects that we're going to create in this video so the projects we're going to create are a Blazer web app project so this will create a project which would formerly been known as a Blazer United project but we no longer use the nomenclature of Blazer United Blazer web app is a project template we can leverage so that we can incorporate the new features that are to be released with net 8 into our project so that includes service side rendering streaming rendering we can incorporate both a Blazer web assembly component as well as a Blazer server component within the same project so the first project we're going to create will be derived from the Blazer web app project template so in order to create a project derived from the Blazer web app project template we can run this CLI command at our terminal prompt okay so the the correct CLI command isnet new followed by reference to the relevant Blazer web app projects template which is simply Blazer like this within our command- o and then we can express the folder path in which we want our relevant project files to reside so in this case it's going to be project SL and I'm going to call this project movie web like this and press the enter key key excellent so that has now created the relevant Blazer web app project and the relevant directory structure there and we can see that there great so we could actually just test that that has run correctly so in order to run this project we can navigate to the the appropriate directory like this project object movie web like this and now that we're in the appropriate directory we can simply run the project. net run like that great and it's listening at this location here so we can just copy that URL into the browser address here and there we go let's set up the basics for our Blazer web app project which we've named movie web so now that we got that project we're going to create let's cancel that by pressing contrl C clear the screen and now we're going to create the Blazer web assembly project so we're going to create our Blazer web assembly components Within a separate project then we're going to reference this project and then incorporate the relevant Blazer web assembly components within the Blazer web app project okay so let's go back to the root directory and we can do that with this command okay we can see that we're in the appropriate directory there the appropriate current directory and now in order to create our Blazer web assembly project we can run this command n new so we got to include the a reference to the correct project template and we can do that by referencing blazor wasm like this and then- O and then the relevant directory and we call this movie WM press the enter key excellent so it looks like that's been created successfully and so we've got our movie WM project created here so this project will never run Standalone we're only going to be referencing the relevant components created in this project from the movie web project which is derived from the Blazer web app projects template where as discussed we can leverage all the new features due to be released with net 8 So within the movie WM folder we need to make a few alterations just so that there's no conflicts between the movie web project and the movie WM project so first thing we're going to do is we're going to remove the www root directory so let's just delete that okay the next thing we're going to do is remove the app. razor component which we also don't need so let's delete that and then we can appropriately update the program.cs file like this we can delete these lines of code here and I'm just going to for now comment this line of code out so let's just make sure that we can indeed reference the components that reside within the movie WM project from within the movie web we project so I'm going to alter the counter component and then we'll incorporate the counter component within the home parent component that resides within the movie web project so let's appropriately alter this so because this is now going to be a child component we can remove this rooting information here we can remove that there and we can just leave the rest as is let's save that and then what we need to do is reference the movie WM project from within our movie web project we need to run the appropriate command in order to reference the movie WM project from within the movie web project so let's run the appropriate CLI command to reference the movie wasm Project from within the movie web project so it's net add projects we need to reference the movie web project like this then include the reference keyword here and then the project that we want to reference which in this case is movie WM and that looks correct and let's see if that works reference to movie WM movie wm. cspr added to the project and let's see if that has indeed done what we asked it to do and there it is so we've referenced the web assembly project from within the movie web project so we can actually test this by incorporating the counter component here within our home component here great so before we do that um let's actually delete this component here first CU we're not interested in that component we're only interested in referencing the counter component that resides within the movie wasm project so we we need to within the imports. Razer file we need to include a using directive to the mov vwm do com components. Pages Nam space like this so that we can reference the counter component that resides within the movie WM project okay so let's go to the home component here and let's include a reference to the counter component so we just go counter oops counter like that so in order to be able to integrate a Blazer web assembly component within our main Blazer web app project we must first include a dependency within our Blazer web app project a specific dependency so we can do this by including a package reference to the appropriate version of the microsoft. aspnet core. components. web assembly. server newg get package what we need to do here is actually add a package which is the Microsoft aspnet core. components. web assembly. server package so net ad package and then we can include the relevant package that we want microsoft. aspet core. components. web ASM assembly. server and we also want to include a particular version so we can include the version option like this and then the relevant version we want um and I'm just going to put [Music] 8.0.0 D RC do2 like this and see if that works so let's press the enter key looks promising so if we go to the actual project file okay it's including the correct package that we want including a reference to it here with then we can see that within our movie web. CSR file so we've included a package reference here got a project reference to the movie WM project and we've got a package reference here and we're including this particular package because we need to include this new get package in order to reference the relevant Blazer web assembly component from within our movie web project which is derived from the Blazer web app project template okay so excellent so let's clear the screen there's a few other steps that that need to be made here so if we go to first step we go to program the first step is we go to the program.cs file within our movie web app project okay and we need to chain this command so add interative web assembly components like this okay and we need to do a similar thing down here and go add into active web assembly render mode so that's what we're missing there within our program.cs file within the movie web project so now that we've got that there we actually need to include an attribute that tells the compiler that we want this component rendered as a web assembly component so now we can do that by including the render mode attribute within the counter element like this so render mode equals to and let let's include the interactive web assembly rendom mode type. net run so we can just copy this location here appropriately into our browser window and we have now successfully integrated the counter component from a Blazer web assembly project within our Blazer web app project within the home component of the Blazer web app project so we've actually successfully integrated a web assembly component that exists within a project arrived from the Blazer web assembly project template into a project that is derived from the Blazer web app project which is a new project template included with the release of net 8 which enables us to include the new enhancements that come with net 8 like service side rendering and streaming rendering along with components that we used to with blazer like Blazer web assembly components and Blazer server components great so that's excellent so now we can build our application now that we've got the infrastructure successfully in place but before we develop the client let's develop the server function functionality that I want to include in this video so in order to do that I'm just going to navigate back to the root folder like this with this command let's create our web API and by default it's going to create this project as a minimal web API which means we're not going to be including the MVC model view controller functionality within this project we're just going to use the minimal features we need to create our web API project so in order to create our Blazer web API project we can type this command net new web API - o and Then followed by projects this is the directory in which we want our Blazer web API files to reside so we go projects and then let's call this movie web API so this is going to be called movie web API the project file will be called movie web api. CS Pro okay so I think that looks correct and let's press the enter key okay and that looks positive great and you can see within our projects folder we have the movie web API project generated for us that's great and we're going to be just working within the program.cs file which as you can see contains all the rooting functionality all the default rooting functionality at the moment we have one end point included by default which is the weather forecast endpoint and we can actually test this endpoint right off the bat as it were by running the project so let's run the project and what it's done is it's actually included Swagger functionality within our project by default so we can use Swagger to test the relevant end points as I say at at this point we only have one endpoint set up and that's the weather forecast endpoint with some default data that can be returned to us through a get request okay so let's run our web API project let's type dot let's first go into the current directory for our web API project so CD project slash movie web Ai and then we go net run okay we can just simply copy this URL to our browsers our endpoint is called weather forecast so we can just copy that there and this should return us some results and there it is so this returns our weather data but we can also use Swagger by navigating to the Swagger endpoint here and you can see here we have a UI set up for us where we can actually test our relevant endpoints so that's really convenient right off the bat by default we can use Swagger to test our relevant endpoints so you just click try it out execute and it Returns the relevant weather data so that's excellent so we've got our web API project basically set up for us okay so the next step is we want to to develop the functionality for our API okay so in order to expedite the process I'm just going to copy the code that I've already created on GitHub and then we can build up the functionality for our web API for our movie application okay so let's go to the relevant GitHub repository so this folder here contains the basic functionality that I want to include in in this application so firstly let's go to this file here and I'm just going to copy this code from GitHub from this location on GitHub because we're just going to store our data for our movies within a list so we can just copy that and we can paste it here like that and that's pretty much our data but we don't have the model Yet the movie model has not yet created we're actually not going to use a class here we're going to use a record type in this application so we're going to make a few alterations to this code I've included a link in the description to the code we're creating in this project so you can just simply go to that link and copy and paste the relevant data from the appropriate GitHub web page if you don't want to tap out the code like I'm I'm going to do here okay so the next step instead of including a class I actually want to include a record so let's include a definition for our movie record so the following Fields need to be included so we have an ID field or ID property for a particular movie record we want to include a string property for the title and a string property for the description of the movie A String property for the image URL so where the image where so the path where a poster image regarding the relevant movie will be stored we'll include the relevant image in our movie web app project in just a bit but let's first create the code for our web API okay and then we want to include a review for each of our movies and we can do that in this particular review field here okay so we've set up our movie record So within the current code here we're referring to a movie model this movie model was a class that we created in the previous project so if we go here you can see that we had this class movie Model A definition for this class and we're going to use a record instead of a class for this particular application so we need to alter the code a little bit here so that refers to movie record rather than movie model that there so we're just going to alter this code so that it's appropriate to our purposes here we just need to set the variable movies to the new list so instead of directly assigning the properties like this for the movie review for the movie record we're going to Simply pass them into a Constructor so just going to take a copy of that and I'll just show you how we're going to appropriately alter the code here so we're simply going to instead of using curly brackets we're going to use these brackets here and we're just going to pass in the values directly like this okay okay okay there okay here there there create class there okay there just okay there okay that there there I think there the last M rear window Roadhouse and Star Trek 4 yeah okay that looks pretty good let's just see if we can build that we have haven't made any subtle mistakes there zero errors that's what we like to see Zero warnings build succeeded okay that's great so now what this means is we can create our first end point because we're ready for that okay so I'm just going to duplicate this code here for the endpoint and let's create our Endo that will return our movies and the code for this is very simple so we go movies like that there that's the name of our end point and let's remove all this weather forecast related functionality and then we're simply going to return movies like that we're just going to return a list of movies we're just going to call um this endpoint from within our movie WM project great okay so we can actually test this end point by using swagger so let's do that let's go dot net run and let's copy this to our browser let's leave that for the time being there copy this to our browser and let's go to our Swagger in point here where we've got our UI and you can see we've got our new movies endpoint available to us and we can even try it out try it out execute and there we go we've got our movie records appropriately returned to us so we've implemented our code for our first end point successfully that's excellent okay let's see if we can let's set up our code so that we can now call this Endo from from within the movie wasm component so the first thing we need to do is set up the base URL so that's the URL that our movie wasm component is going to reference so to do that let's go within the movie web project let's go to the program.cs file and within the program.cs file let's set up a dependency injection for the HTTP client and if we go to the WM the movie WM program.cs file here you can see that by default it's included code to set up a HTTP client so what we're going to do is copy that code and include it within the the movie web project within the program.cs file of the movie web project so let's include let's paste the code here comment it back in and we need to replace this argument with with the URL where our endpoints reside so this is the Base address of our web API component and in order to find the base address we can go to our movie web API project we can go to the launch settings. Json file and we can just copy it from here so that we can test our code so let's go to the program.cs file within the movie web project and let's paste that appropriately here and this is setting up dependency injection so that the HTTP client is injected appropriately within the relevant components within the movie wasm Project okay so let's create our first component So within the pages folder in our movie WM project let's create a new component and let's name it movies. razor and let's create another component called movie item and now this is going to be a child component that will represent an individual movie so I'm going to call this movie item. razor like that and then we're just going to copy and paste the relevant code from GitHub so let's go back to GitHub um let's find the relevant components so movie item. Razer here and let's just simply copy that and paste it here and that's included a special character there so let's just delete that okay we can do the same for the movies Razer component so let's find the relevant code on GitHub and it's actually within the index. Razer file in this particular case okay and we just want to include this code here we don't need to include all of this code because this within this particular project this component was a parent component so there was direct rooting code available here to the relevant component and our component within our project is actually going to be a child component component so we don't want to include all of this particular code here but we will include appropriate dependency injection code in a bit so let's copy that code and paste it here so we need to replace this code here to a call to our web API endp point so we want to include the relevant dependency injection code so the HTTP client is injected into this component so let's include an inject directive here followed by HTTP client and we'll just call this HTTP okay and then we can include the appropriate code to call our web API before we include our endpoint code we need to create a definition for a particular movie and we're going to do that in much the same way we did in the web API component we're going to create a record type that represents a particular movie so to do that let's go to this root directory here and let's create a new folder and let's call this folder records and let's create a class file to house our record type so let's just create a class and let's call this class movie record docs here and I'm going to house this with in a particular name space I'm going to call the name Space movie WM do records like that and then we can create our record definition and we want this record to be public so public record movie record in fact let's just copy and paste the code from the web API because it does need to be identical to the record definition that we've defined within the relevant web API component so let's just take that copy it and paste it here but we do want this record to be public so let's give it the public access modifier like this and then in order for this record to be accessible from within our components we can simply include a an appropriate reference within the imports. Razer file here so let's include a directive using mm. records like that so yep movie wm. records just make make sure that that's 100% accurate before we move on okay so let's go back to our component code here and let's change this here to reference movie record rather than movie model like this and then we can actually write the code to call our endpoint movies equals to await HTTP we want get from Json async like this and we want it to be strongly typed with our movie record because that's it's going to return to us a list of movie records and then we simply pass in the movie's end point like this great so let's make sure that we are referencing movie record here rather than movie model and we need to do the same in the movie item component here so this should be movie record not movie model we might make sure that we have all the images and we're going to store this within the movie web project so we go to www root and let's create a new folder named images and within that folder let's create a new folder named movies great okay so now we need to copy and paste the relevant images to this directory so I'm going to navigate there reveal in file explorer um I actually have these on my local machine but you can download them from this location on GitHub go here and here they are here are all the images for the movies that we are including in our application so you can just download these to your local machine and include them appropriately in your project but I actually already have these images available so I'm just going to quickly great so I've now pasted in those images if we look at it in large icons you can see those posters are now copied into the appropriate directory in my movie web project we can actually see them here within Visual Studio excellent okay that's brilliant we haven't actually integrated the movies component within our movie web project yet so that's the next thing to do so let's navigate components Pages home and instead of incorporating the counter component we're going to incorporate the movies component within our home component and let's see if this works out okay so let's test our code firstly let's navigate to the current directory where our movie web project resides so let's go movie web here enter and then just type net run okay so it's got a problem with the name that I've chosen there movies so I'm actually a quick way to fix this is just to change that is because we're referring to the collection also as movies and we're referring to movies. Razer there [Music] so looks as though it doesn't like that it's conflicting with uh the movies razor file so so let's change the name of this to movie items Razer there okay and this has actually got a capital so we want to also capitalize this particular variable so that would have caused a problem also let's try again okay so we got a few things we're going to need to fix here um before we run our code and test our application this is called movies items currently so I need to rename that to movie items which makes more sense and then this over here should not be movie record but should be strongly typed as list movie record a list that is strongly typed with our movie record type so let's go back here so this now should reference movie items this code here within the home component within the movie web app project should reference the movie items component that resides within the movie wasm Project and I think we're pretty much good to go so if our client code attempts to call any of the end points within our web API component currently a cause related exception will be thrown what is cause cause stands for cross origin resource sharing cause defines a way for client web applications that are loaded in one domain to interact with resources in a different domain so our client code resides in a different domain to The Domain in which our web API component resides so in order for our client to access resources returned from our web API component we must include appropriate cause related code so that our web API explicitly permits our client to have the appropriate access permissions to resources returned from our web API component so you must include this cause related code appropriately within the web API component so what we want to do is then run the web API project so that's running in the background and then run our movie web project and then we can test our code so to do that I'm just going to create a new instance of the terminal of the Powershell here so plus and we're going to use this to run our web API we're going to use this terminal window to run our web API I'm going to navigate into the directory where our movie web API project resides so project slash movie web API great we're in the correct current directory and then we can just go net run so that should be running in the background now at this and it's listening at this location and let's go back to our original terminal window here and then we can run this code okay and let's copy that load location to our browser window here and let's see what happens great so it's displaying our movies as expected so when I first ran the code I noticed that I was getting a dependency injection related error message in my browser I.E regarding injecting a HTTP client object into my web assembly component the error seems to be of no real Consequence the code still worked as expected but I noticed that when I included this dependency injection related code that I already had included within the program.cs file in the Blazer web app project also within the program.cs file within the Blazer web assembly project that I no longer received the error message in my browser so the next step is we want to create an endpoint within our web API project where we can retrieve just one movie from our collection of movies Okay so let's create an endpoint because we want to just display one particular movie with its movie review next to it so we'll create the component for this after we've created the relevant web API code okay so let's go into the program.cs file within our movie web API project and let's create an end point that's responsible for retrieving one movie record so let's just make a duplicate of this to start off and then we can create the actual end point so we want to um to include an ID parameter for this particular Endo so it's the ID of the relevant movie we want retrieved so this ID needs to be included in the endpoint path for when a client retrieves a particular movie from the movie's collection so then let's include the ID here parameter definition for this expression and then we can simply use Link the single or default extension method to filter our movies collection down to a particular movie and this can be get movies by ID great that looks pretty good okay let's just go here let's just make sure that our code works we can actually test this using swagger before we Implement our client code so let's go net run let's go here so let's go to our wagger UI movies ID try it out and we can include let's go try it out so let's just say ID number two execute great and it brings back Godfather The Godfather so that's the that's the correct item that's the movie that has an idea of two so the correct item has been retrieved through a call to our end Point excellent so let's go back to our code and let's build the client code for this so first thing let's create a parent component within the movie app project so let's go to Pages here let's create a file called movie review. r here excellent so this is the movie review parent component and within this parent component we'll reference a child component that resides within the movie wasm project that will house the actual code for the movie review component So within this child component we'll have code that calls the relevant end point that will retrieve a particular move movie and then the child component will be responsible for displaying the movie poster image and the corresponding movie review within the relevant child component okay so we need to include the relevant page directive for our parent movie review component within the movie web project so let's go there let's go type movie review like that and then we can actually create the code for the client review logic within the movie wasm project so let's to do that let's create a file named review. razor like that and let's actually copy the code so I'm going to have to navigate back to the relevant GitHub repository so I'm just going to copy the code the relevant code code from GitHub so if we go to the movie review code here we can actually just copy the code from here as a starting point for our movie review child component and then we can just adapt it for our project for our particular project okay so code's going to be a little bit different here um so okay so movie item so this should be movie record here this parameter should be an integer let's take that out there and then we need to inject the HTTP client so let's copy the relevant injection code dependency injection code where the HTTP client is appropriately injected into the relevant component so let's include this code at the top the injection code dependency injection code so then we can use the HTTP client to appropriately call the relevant endpoint so let's just copy the relevant functionality that uses the HTTP client to call the relevant endpoint from code that we've already created within the movie items razor component here so I'm just going to copy that there well actually let's just copy this part of the code then go back to review. Riser and paste that there and now we want to include we can use string interpolation to include the relevant ID parameter within our path to the relevant end point great so that should be good so we're now retrieving information for one particular movie and that looks pretty good for our client component I think that's right and then we can include a reference to this child component from within the parent movie review component so just copy this code here as a starting point and then we want to reference the review component here that's the correct render mode and we're actually going to be passing a parameter to this root so we can actually Define our root appropriately like this so that an ID parameter which is constraint to the int data type is in fact passed to this root and then in the at code section of this parent component we must include the appropriate parameter so public in ID get set so we've got an auto implemented property we must declare as a parameter using the the appropriate parameter attribute like this as you can see within the code we've actually already copied from GitHub you can see we're actually referencing that particular route here so this route must match the rout we're declaring for the review for the movie review component parent component within the movie web project so that looks correct and then we must actually pass this parameter down to the child component and we can simply do that through by including the appropriate attribute like this okay oops and I nearly forgot so now this just needs to be a single record so we don't want this to be strongly typed as a list we want this call to this particular endpoint to return one record one movie record and not a list of Records so that would have resulted in an error there so we've just corrected a potential bug there okay so our web apri is actually already running we tested our new endpoint that just returns one record we tested that already so we haven't stopped this from running it's still running in the background let's run our movie app project great hopefully great we'll see not so great cannot convert int to string [Music] um oh okay so so this this is this code needs to be a adapted because we we've strongly typed it to an integer now okay let's try again I think that's that was our problem great okay so that was our problem and let's copy that location to our browser window and see what we've got perfect that looks good so far now let's see what happens if we click on a particular item perfect that's worked straight away so that's our application done excellent I hope you enjoyed this demonstration where we integrated a Blazer web assembly component within our Blazer web app project and called the web API component that we created in order to retrieve the relevant movie data our code within the relevant web assembly components could then display the relevant movie data in an aesthetically pleasing way within our browser to support the Channel please like this video and please consider subscribing please also ring the bell so that you'll be notified of future content please feel free to share this video with anyone you feel May benefit from its content if you'd like to thank Me by buying me a coffee you can do this through my buy me a coffee web page at this location it will of course be greatly appreciated I've recently joined X formerly Twitter so please feel free to follow me on X my username is @gavin lond digital I love reading your comments so please feel free to engage with me in the comments section the code created in this video can be accessed on GitHub please see a link to the relevant repository Below in the description of this video I hope to see you soon thanks thank you and take [Music] care

Channel: Gavin Lon

Views: 5,638

Keywords:

Id: jLzDL77R4ik

Length: 63min 43sec (3823 seconds)

Published: Tue Oct 17 2023