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

In this video we create a basic movie review application using the new features released with .NET 8. We integrate web assembly components into a project derived from the new Blazor Web App project template that ships with .NET 8. We create a web api component to return movie related data to the client web assembly component. So we are exploring the new features released in .NET 8 - particularly how we can integrate a web assembly component into a Blazor Web App project and call a web api component using a typical http request/response model and asynchronously display data (in an aesthetically pleasing way) within a web assembly component.

✍ Code for Movie Review App Built in this video

✍ Code for Movie Review App used as reference to build app in this video

Full Video Series for Movie Review Blazor App on .NET 8

🕐 Video Time Indexes
-------------------------------------
00:00:00 - Introduction
00:01:33 - Install Visual Studio Code
00:02:54 - Install the .NET 8 v rc.2 SDK
00:05:08 - Install C# Dev Kit Extension
00:05:57 - Create BlazorMovieWeb Project using Blazor Web App template
00:09:56 - Create BlazorMovieWasm Project using blazorwasm template
00:11:09 - As test - Integrate Counter wasm component into Blazor Web App Project
00:13:36 - Add reference to blazerwasm project from blazer web app project
00:16:00 - Add reference to Microsoft.AspNetCore.Components.WebAssembly.Server Nuget Package
00:21:03 - Create WebAPI component
00:22:00 - Use Swagger to test WebAPI component
00:24:00 - Develop functionality for WebAPI component
00:34:03 - Create WebAssembly Components in BlazorWasm project
00:41:57 - Integrate WebAssembly Component into Blazor Web App project
00:45:43 - Add appropriate CORS functionality to WebAPI component
00:50:30 - Create endpoint for retrieving a particular movie record
00:54:22 - Create MovieReview parent component
00:55:20 - Create Review Blazor WASM child component
00:58:15 - Integrated Review child component into MovieReview parent component
01:01:49 - Run code
01:02:21 - Conclusion

Support the Channel 👍
------------------------------------
Buy me a Coffee ☕️

PayPal

🪙 BitCoin
12JZYMiRq5YRDN5R5zuyYt7jMN8eTpkgns

Please follow me on Twitter @GavinLonDigital

Links Referenced in this video
-------------------------------------------------

Foundation C# with Microsoft Certification Announcement Video

Blog Post by Katie Savage of Microsoft Announcing the Foundation C# with Microsoft Certification

Download Visual Studio Code

Download the .NET 8 rc.1 SDK

Video Series on .NET 8 and Blazor

Full Playlist - C# for Beginners Course
------------------------------------------------------------

Links Included in this Video
--------------------------------------------
Install .NET 8 Preview 6

Announcement of .NET 8 Preview 6

Install Visual Studio 2022 Preview

Signal-R Explanation

Free Courses and Educational Videos - Gavin Lon
-------------------------------------------------------------------------------
Blazor (Webassembly) Shopping Cart Application full playlist

Full playlist - Let's Build an ASP .NET Core MVC Web Application on .Net 5

Full playlist - Advanced C# Course

Full playlist - C# for Beginners Course

Blazor Server App on .NET 6 Course - FreeCodeCamp

🎶All Music in this Video was Created by Gavin Lon

[SBDavin]

This is a great video for devs not running Windows (no Visual Studio) who must create and share a Web API endpoint with other apps (such as mobile/desktop).
Doing it this way also helps devs learn all the moving pieces in Blazor and Web API.
Otherwise, you are creating an unnecessary web endpoint to deploy/secure and will miss out on the great built-in tools included with Visual Studio.
I think implementing Web API for just one consumer website on the same web server is like driving a car across the street to Starbucks to get a cup of coffee.
Thank you for the video, Gavin.

[sukso]

I ve been learning C# for some time now, using your videos, and I just wanted to say thank you for unbeliavable content, your's channel is a sacred place for me because I m aiming to become a .NET backend developer, keep them coming, wish you best!

[Vlad-]

I am glad to see this tutorial: Had been trying to code Blazor on Linux for ages, and couldn't find anywhere to show how to reference another project. That said, even if I follow 1:1 the steps, I can't include MovieWeb, it just won't see it. I ended giving up and going back to my trusty ANSI C

[emrearslan]

great work on a hot topic. but i have waited for new render modes on air.

[felixnotthecat]

I would like to know how to make vs code run both projects at once for debugging purposes.

[netrunner]

Just asking, why use Visual Studio Code and not Visual Studio 2022? Just asking, <flame jacket on>.

[ismaelsanchez]

Great video Gavin, do you know if it is possible or will it be possible to integrate the api within the main app project? Something similar to the current ASPNET core hosted solution that we have currently available.

[aymaneeljahrani]

Is this necessary even with the released version of .net 8?

[MrMostafam]

Thanks, but i think visual studio will be good for us than visual sfudio code jt meeds much code

[Vsd]

I use visual studio and when I run the program, an error appears that says that the file is missing .csproj. This only happens on the version Net 8

[MohammadMC]

I believe that you created a Blazor Server project not a Blazor Web app project, because if what you claimed was correct, then you will get the Blazor WASM project without the need of creating it then making a reference.

[way_no]

I have an issue with .net 8 and loading local json WASM file. Getting error on call to GetFromJsonAsync<> file not found. Is this a bud?

[md.jannatulnayem]

Just a suggestion
The video thumbnail could get lot better 🤐

[jimkillerx]

I get the "warn:
Failed to determine the https port for redirect." problem when using dotnet run? How do I fix this?