Blazor WebAssembly ASP.NET Core Hosted in .NET 8 🔥

🚀 Join the .NET Web Academy: learn.dotnetwebacademy.com
💖 Support me on Patreon for exclusive source code access: / _patrickgod
🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: dotnet8.patrickgod.com
🐦 Let's get social on Twitter/X: / _patrickgod
🔗 Let's connect on LinkedIn: / patrickgod
Table of Contents:
00:00 Blazor WebAssembly ASP.NET Core Hosted in .NET 8 🔥
00:57 A quick look at the "old" .NET 7 solution
01:54 Build it in .NET 8
03:24 Add the Client & Shared projects
06:45 Add dependencies and configure the Server project
11:17 Change the launch settings
12:44 Final code changes
#DotNet #Blazor #BlazorWebAssembly

[@divanvanzyl7545]

Thanks Patrick. Idk why MS can't release proper guides when they make changes to their product. I would have been lost if it wasnt for your videos.

[@joker-im7bl]

This is exactly what I have been trying to do for the last couple days. Thanks for posting this!

[@purplepixeleater]

can't be more perfectly timed :) thank you!

[@iroelperez3813]

Thanks a lot Patrick, you saved me from a lot of pain with this one!!

[@nagendravc]

Wow! This was again the most required demo! Thanks!

[@Caphalem]

Thank (Patrick) God this video exists! The Blazor App template was driving me insane. Never been so happy to click that counter "Click Me!" button while getting my 50 degrees Celsius weather reports! Restructured my whole project using this. I will sleep soundly today knowing my client side and server side have clear separation :)

[@mtranchi]

Thank you! Loved seeing how that all works. Now how about exporting the three projects into a template for future use?

[@herewegotoday]

Just started using blazer 8 and it’s been driving me crazy. This is exactly what I needed. Thank you sir

[@JackNotJack]

Brilliant. Thanks Patrick.

[@cchiarelli]

Thank you Patrick for your detailed explanation. Looks like .NET 8 version of Blazor is two steps forward one step back. Lots of hoops to go through to create a simple Core Hosted Site. I agree with mtranchi, hopefully someone will create an add-on template to make this much easier.

[@sharonroy9877]

Thanks, this video really helped me.

[@kimwingco]

Thanks, Patrick!! I can't count the times you've saved my ass! :) this video was just what I needed

[@etiennehublet3034]

Thank you Patrick, very helpful ;-)

[@PatrickGod]

Very welcome 😁

[@saddlebear]

Very helpful, thank you. I was missing one line in the Program.cs.

[@LerivangohHannibalLeckterMx]

awesome dude!, I love old architecture, i don't know why to remove it, but anyway, thanks

[@SharifYazdian]

How sweet it is to find EXACTLY what you're looking for. Thanks!! one question: Why didn't you bring app.UseRouting(); in to Program.cs from .net 7 ?

[@sokoo1978]

I tried to update my hosted wasm app to the new fancy WebApp to be able to enable AutoRender and use the new Auth stuff, but failed utterly :P It would be nice, if you could make a tutorial with one of your old .NET 7 app, hosted wasm, EF, and the old JWT auth you made, like maybe the Webshop app.

[@5peakcodesamples726]

Excellent!, Thanks But what about publishing and deploy process ? It would be interesting!

[@blackpaw29]

Thankyou! Have been driving myself nuts trying to figure this out. I don't understand Microsofts reasoning here, pure WASM apps are toys without access to a server apie.

[@joseisrael2946]

Hi I'm new to .NET and this setup got me confused. I was looking for a similar structure to Node applications, with a standalone Front, Back and Library. The Library feeds both, and the Front makes API calls to the Back. But here It seems you are using the Blazor app as a... UI library? And serving It by the Server? What benefits does It have against just deploying both entities separately and making them talk via REST API calls? Edit: thanks for all the content! I'm learning a lot.

[@Marcos2009DF]

Hi @Patrick God and everyone I would like to know your opinion since I have finished the course, which is actually very good, I learned and reaffirmed many things. Now I have a modified version that I had in production for a year with Azure but the promotion has ended and now I have to pay. In Azure, maintaining my Web app is very expensive, I already investigated other sites but the cost is similar. Here is my question; Do you know of any place where hosting my Blazor web app is cheaper?

[@saeedfathi9758]

Thank you for your amazing tutorial! What about Microsoft Identity for user management?

[@RickGraner]

I'd also be interested in hearing how to add Identity + PWA

[@broadshare]

If you are trying to do this after .NET 8 release and getting error in program.cs after adding UseWebAssemblyDebugging & blazorframework files just add nuget package Microsoft.AspNetCore.Components.WebAssembly.Server to server project which is not added by default in web api project in .NET 8

[@jasondmace]

Hi, Patrick. Thank you for the video. What would be the end result difference between this approach vs. upgrading a solution that was created in .NET7? (If any?)

[@bennyadiwijaya1606]

I also want to know,, is there any pros and cons between these two? @Patrick God

[@davidpccode]

Hi Patrick. Tks for such amazing content. One question. Something seems strange to me. Do I necessarily have to create this reference between the client and my API? What happens if I have an API that is used for many more things and also to be the backend of my wasm? Can't I just do normal http requests? This linking of projects seems tangled and unnecessary to me or what is the purpose?

[@kell7689]

Also wondering this... Can't really think of the reason for the reference. EDIT: AH, it's necessary for you to be able to launch the WASM client app when running the Server project. When you set the `inspectUri` in the `launchSettings.json` file, it won't take effect if the Server isn't referencing the client.

[@robertrobert2954]

Can you still somehow take advantage of new auto interactivity render mode with this approach?

[@kittkillward9014]

Cant understand why they removed template with api controllers for server and blazor for client-side rendering. It seems like fully dumb decision from Microsoft.

[@kell7689]

It is a bad decision. The new template feels like it's trying to be a jack of all trades.

[@user-dw8sf5tx6v]

Hi Friends! I have tried this approach AND upgrading an existing .NET 7 WASM+API project, and unfortunately WASM debugging doesn't work in either case; the breakpoints are left unbound. I didn't see it in the video, but does WASM debugging *actually* work here? Thanks Patrick!

[@mikkirefur]

Thanks this is interesting while we are considering an upgrade to .net 8 but not sure if we want to migrate into new rendering paradigms. Is that the basic premise and use-case for this video ? I am wondering what microsofts new blazor 8 design pattern / rendering mode is that replaces this specific scenario ?

[@kis.stupid]

Most these rendering paradigms are optional / possibilities for niche cases. Or to gradually migrate from an MVC or Razor Pages to Blazor Server-side. Maybe for when you don't want to go all the way or if you have niche requirements. Explore them at your own pace ;). For the most part you can just work as you were before .NET 8.

[@kell7689]

That's basically it. The new Web App template seems to just allow you to switch rendering modes at will. It strangely allows you to select a single render mode globally though, and if you were to select WebAssembly, it would create both a Client and Server project where UI concerns could be mixed between the two (making a bit of a mess). Seems like the only benefit of that route is so you have the option of switching on the fly.

[@christiantricarico]

Great. So, does it mean that we can migrate an existing .NET 7 WebAssembly hosted application simply changing the target framework version in all the 3 projects?

[@kuper1346]

So why doesn't dotnet8 have this template again? I understand this (united) template which does make certain things easier for sure. But for certain use cases, what am I supposed to use? Lets say I have a complex commercial app with a lot of server logic, automation and data persistance (database) on one hand and complex frontend with diagrams and a lot of menus on the other. I can't think of how this united template could statisfy this scenario, you do need both aspects which you connect with webapi calls. So thank you for the video, but why? Why does this template not exist? Why was this video needed in the first place?

[@varinator3176]

Because Microsoft and .NET team are completely detached from reality and keep going in circles, trying to catch up to established front-end frameworks, while not being able to do anything better than those frameworks.

[@arminodobasic2428]

I was wondering about the same thing. A couple of months ago I started a small project in .NET 7 using the WebAssembly Hosted architecture, but now that everything started shifting in .NET 8, I don't feel extremely confident about the future. I am actually considering shifting to a .NET + React stack while it still isn't too much work.

[@mohammed2709]

how can i deploy this incleded 2 projects ?

[@bennyadiwijaya1606]

Hi, what if we use Blazor web app with webassembly global, where server as web API, so we just add one project shared. what do you think?

Hi, we also can change the .net version after we create the project with net7. Is there any reason not to use this approach? Is it possible do make a video about adding an identity mechanism to a hosted app from scratch? Since .net7 still creates the app with 3th party session package which need licence, some people may need this tutorial. Thanks .

[@alirezakarimi8685]

Please help me Patrick. How we can publish this project to IIS server?

[@neilthompson1050]

Can you send us a example docker file to build this image? Thanks Seem to have some issues with that

[@manojnaik5643]

Hi Patrick, need urgent help on publish same application, I did not find razor pages after publish locally, Is .net 8 does not place physical pages there at publish time, my published directory contains only dlls and client webasembly exe

[@adammajid9308]

somebody please help. do i add individual accounts/Identity framework into the client or the server. and also where would i create my models folder

[@HernanIannella]

The "shared" library project os completely optional and doesn't affect functionality.

[@unjordi]

I exactly want to build the projects separately to host the wasm app in a static host and just have the webapi and the DB costing money and maintenance

[@kis.stupid]

That's still possible to deploy a Blazor WASM (Standalone) as a Static Web App and the API separately to an App Service, the database to "SQL database" managed service of Azure.

[@user-nl9hg7go8l]

I need help doing route sub path hosting of blazor webbassembly applications for dotnet 8.0

[@mikkirefur]

When using a shared library and also Azure Github ci/cd for Web API and Blazor Client, how can we include the Shared Library in the ci/cd build ? a) That is assuming 2 different repositories that have a shared library / project. I am thinking in Github actions we are able to copy in the Shared Library ? b) When having everything in 1 Solution, is there a way that only the API/Shared, vs Client/Share projects are included in the Azure App Service ? i am new to this space so excuse me if i too simple or wrong perspective. We currently have our shared models in the Web API, that get packaged in nuget(), but that prevents a coder from adding back-end features and front-end at the same time (nuget built during dev push/merge)

[@kis.stupid]

a) Shared libraries are just built with the project that implements it at the build step of a pipeline. You don't have to do anything extra there (if I understood your question). b) I'd recommend to work with the release branch principle. That way you can prefix the branches that have to deploy to the API & use another branch prefix for anything that needs to be deployed to the environment of the client-side project. You could deploy your WASM as a Static Web App (free) and your API to an App Service. You do have to enable CORS on your API than. In this way, you have 2 separate GitHub workflows to split deployments like mentioned above. Or did you mean to deploy both WASM and API onto one App Service? Than, I don't think you can split anything.

[@m4r10x2]

Do you mean having different git repos? Or different .net projects/slns in a single git repo?

[@mikkirefur]

@@m4r10x2 currently we have separate repos. But considering changing into 1 repo. So either to answer question

[@renatomedeiros4364]

What's the value for inspectUri ????

[@anonymous-ek7eb]

do you know what is that?

[@OurWorldIsBroken]

Patrick God vs Microsoft : 1-0