Blazor WebAssembly, Web API and .NET 8 - Let’s create an application using Visual Studio Code
Вставка
- Опубліковано 31 тра 2024
- 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
🔗 github.com/GavinLonDigital/Bl...
✍ Code for Movie Review App used as reference to build app in this video
🔗 github.com/GavinLonDigital/Ba...
Full Video Series for Movie Review Blazor App on .NET 8
🔗 • Blazor Movie Review Ap...
🕐 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 ☕️
🔗 www.buymeacoffee.com/GavinLon
PayPal
🔗 www.paypal.com/paypalme/GavinLon
🪙 BitCoin
12JZYMiRq5YRDN5R5zuyYt7jMN8eTpkgns
Please follow me on Twitter @GavinLonDigital
Links Referenced in this video
-------------------------------------------------
Foundation C# with Microsoft Certification Announcement Video
🔗 • Free Foundational C# C...
Blog Post by Katie Savage of Microsoft Announcing the Foundation C# with Microsoft Certification
🔗devblogs.microsoft.com/dotnet...
Download Visual Studio Code
🔗code.visualstudio.com/download
Download the .NET 8 rc.1 SDK
🔗dotnet.microsoft.com/en-us/do...
Video Series on .NET 8 and Blazor
🔗 • What's New in .NET 8 ?
Full Playlist - C# for Beginners Course
------------------------------------------------------------
🔗 • Unity for Beginners (C...
Links Included in this Video
--------------------------------------------
Install .NET 8 Preview 6
🔗 dotnet.microsoft.com/en-us/do...
Announcement of .NET 8 Preview 6
🔗 devblogs.microsoft.com/dotnet...
Install Visual Studio 2022 Preview
🔗 visualstudio.microsoft.com/vs...
Signal-R Explanation
🔗 learn.microsoft.com/en-us/asp...
Free Courses and Educational Videos - Gavin Lon
-------------------------------------------------------------------------------
Blazor (Webassembly) Shopping Cart Application full playlist
🔗 • Blazor (WebAssembly) a...
Full playlist - Let's Build an ASP .NET Core MVC Web Application on .Net 5
🔗 • Part 1 - Overview - Le...
Full playlist - Advanced C# Course
🔗 • Introduction - Advance...
Full playlist - C# for Beginners Course
🔗 • C# for Beginners - Par...
Blazor Server App on .NET 6 Course - FreeCodeCamp
🔗 • Blazor Server App with...
🎶All Music in this Video was Created by Gavin Lon
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.
Thank you for your feedback. :) I wanted to keep the code simple and teach the relevant basic concepts rather than potentially muddy the waters (as it were) by include architectural concerns. I will include architectural related concepts in up coming videos.
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!
Thank you so much for your very positive message! It is greatly appreciated! I'm so glad that you feel you are benefiting from the videos on this channel. I think it is a wise choice to become a backend .NET developer - good backend .NET developers are always in huge demand! More content like this is coming soon :)
great work on a hot topic. but i have waited for new render modes on air.
I would like to know how to make vs code run both projects at once for debugging purposes.
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.
Hi :) You can, within the main web app project, include server side code (that for e.g. includes database related functionality). So you could simply create a service class within the main web app project that encapsulates database related functionality (within that service class you could leverage for e.g. custom repository classes - within the blazor web app project). You could also include calls to the web api compoment from within server side code included within the main web app project code. I wanted to demonstrate specifically how to integrate a web assembly component that calls a web api component within a blazor web app project. You could have just created Blazor server components and written your server side code directly within the blazor web app project. So how you design your blazor project architecturally depends on your specific requirement, however, the point of videos like this is to show howBlazor on .NET 8 gives you the flexibility to leverage various architectural designs for your components and server side code.
Great stuff as always!
Thank you! :)
@@GavinLon I'm sure you know, but for the people watching, when working with preview versions and you want to add nuget via the cli you can include "--prerelease" instead of version to simplify it, though i only think it works when using the most up to date preview.
@@anthonyliljegren1664 Thanks for your comment., That is useful information for everyone who reads your comment. :)
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
@Vsd13 - I have just tested loading the code in Visual Studio 2022 and all worked as expected. I don't get the error that you are getting. Please make sure that you have installed the latest rc version of the .NET 8 SDK which is rc.2. Also please make sure that you have installed the latest preview release of Visual Studio 2022. All should then work correctly. :) Bear in mind that we are working with preview releases at the moment so these are not the final official releases so there may be a few fiddly issues to get around at the moment.
@@GavinLonIn this case, the application is launched via dotnet run, without any problems, but does not start using the buttons run in the interface Visual Studio. In VS code, also runs via terminal
@Vsd13 - Please also ensure that in Visual Studio - you set the startup project to MovieWeb - Thanks :)
@@GavinLon Thank you very much for your help, as it turns out I just didn't pay attention to the Visual Studio version, a pre-release version was required 😂
@@Vsd13 No problem - I'm sure most devs will be able to relate to issues like that. We all encounter them at times :) Glad you're up and running with Visual Studio :)
Just asking, why use Visual Studio Code and not Visual Studio 2022? Just asking, .
That's a great question :) There are pros and cons that come with using either Visual Studio Code or Visual Studio 2022. Visual Studio Code is cross platform and light weight. So the installation is light and you don't have to install all the features that come with Visual Studio 2022 to develop sophisticated .NET applications. You can create sophisticated applications using Visual Studio Code. With the C# Dev Kit extension installed - Visual Studio Code becomes a pretty powerful IDE where you can for e.g. perform sophisticated debugging operations. Visual Studio 2022 is arguably easier to use in many ways for example installing NuGet packages. It comes with a lot of sophisticated features right out of the box. I think Visual Studio Code is less convenient in many ways but once you get used to using it, it is a great tool! I could write an entire article on this subject but I hope this gives you at least a basic insight on the pros and cons of using either of these great software development tools for developing .NET applications. :) Many developers prefer to use Visual Studio Code over Visual Studio 2022. I'm happy using either of these great tools :)
The loading time is enough for me to not use it. It's not a lot I know
@@GavinLonCan you make a video on how to configure VS Code in order to replace most of the Visual Studio 2022 basic functionalities?
@mgame8082 I think that is a great suggestion for a video topic - I think many developers may appreciate a video like that :)
I appreciate the use of VS Code in this instance because I could not get it to run on Windows because of .NET version conflicts. So I created an Ubuntu VM from scratch and loaded VS Code and .NET 8 and was able to get most of it to run well. The only problem is that I am missing the sidebar navigation and the Counter doesn't work. But at least I have a place to start debugging.
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?
I'm not aware of a particular bug of this nature. I'm sorry, It's hard for me to troubleshoot as I don't know your environment and can't see your code. All I can advise is that you have the latest preview version of .NET 8 installed.
@@GavinLon I am running the latest version of preview RC2. Here is the test Code.
@page "/hs2022"
@attribute [RenderModeInteractiveAuto]
@implements IDisposable
@inject HttpClient _Http
HS20A
This component demonstrates showing data.
@if (Tariffs == null)
{
Loading...
}
else
{
id
text
parent
@foreach (var TarVal in Tariffs)
{
foreach (var Item in TarVal.results)
{
@Item.id
@Item.text
@Item.parent
}
}
}
@code {
private List? TarFile;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
TarFile = await _Http.GetFromJsonAsync("test.json");
}
void IDisposable.Dispose()
{
// persistingSubscription.Dispose();
}
}
public class ClrHS2022
{
public bool more { get; set; }
public int minimumInputLength { get; set; }
public string? classCode { get; set; }
public string? className { get; set; }
public Result[]? results { get; set; }
}
public class Result
{
public string? id { get; set; }
public string? text { get; set; }
public string? parent { get; set; }
}
file Path = "wwwroot/"test.json"
Sample Data ->
[
{
"more": false,
"minimumInputLength": 2,
"classCode": "H6",
"className": "HS2022",
"results": [
{
"id": "01",
"text": "01 - Animals; live",
"parent": "TOTAL"
},
{
"id": "999999",
"text": "999999 - Commodities not specified according to kind",
"parent": "9999"
}
]
}
]
Error message:
HttpRequestException: Response status code does not indicate success: 404 (Not Found).
System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
System.Net.Http.Json.HttpClientJsonExtensions.g__Core|12_0(HttpClient client, Task responseTask, bool usingResponseHeadersRead, CancellationTokenSource linkedCTS, Func deserializeMethod, TJsonOptions jsonOptions, CancellationToken cancellationToken)
Test82.Client.Pages.Hs2022.OnInitializedAsync() in Hs2022.razor
+
TarFile= await _Http.GetFromJsonAsync("test.json");
Sorry for the mess. Have this issue for a week now.
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.
Hi. I created a project based on the Blazor Web App project template, a new project template made available with .NET 8. Prior to .NET 8, you would create either a Blazor Server project or a Blazor WASM project. Now with .NET 8 you can use the Blazor Web App project template and integrate, Blazor server components, Blazor WASM components, with the new features available in .NET 8 like SSR and streaming rendering, and using the new Blazor Web App project template means you can integrate all of these features into one project. At the time of creating this video, in order to integrate a Blazor WASM component into a project based on the Blazor Web App project template, you needed to create a separate Blazor WASM project and then reference the Blazor WASM project from within the main project (based on the Blazor Web App project template).
@@GavinLon You're right, I am new to .Net 8 and was not aware that the Web App template didn't include WASM project during the time of creating this video. Thanks for the explanation!
Thanks, but i think visual studio will be good for us than visual sfudio code jt meeds much code
Thanks for your feedback. I prefer to use Visual Studio than Visual Studio Code for C# and .Net applications but I think it is also important to know how to use Visual Studio Code - great for cross-platform development!
Just a suggestion
The video thumbnail could get lot better 🤐
Okay thanks! :)
Hi Gavin thanks for this tutorial. it is so much helped me. I was just wondering if I want to deploy this application which project should be publish? or should I publish and deploy them separetly? sorry if the questions are silly I am new on this field and I couldn.t cope well
It's not a silly question at all. You can deploy the web api component separately from the Blazor component. These two entities are loosely coupled. We'll go through the details of deployment at some point in the future :)
@@GavinLon you are my star 😊
I am really looking forward to watching this 💗
@@ttttt955 Thank you so much for your kind comment :)
I get the "warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedirectionMiddleware[3]
Failed to determine the https port for redirect." problem when using dotnet run? How do I fix this?
The answers here look pretty good. See if any of these work. Further down the page you'll see an answer by yehonatan yehezkel - that might be your solution. I hope this helps :)
learn.microsoft.com/en-us/answers/questions/1297509/how-to-fix-this-error-warn-microsoft-aspnetcore-ht