Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Include a Blazor Webassembly project into an existing ASP.NET Core project
When creating a new Blazor Webassembly project, there is a checkbox ASP.NET Core hosted
where if selected will create three projects at once, a blazor webassembly project, an ASP.NET Core project, and a shared library project. When the ASP.NET Core project is run in Visual Studio, we can debug the blazor project as well as the ASP.NET Core project (put breakpoint, step, etc.). When the ASP.NET Core project is published, the blazor project is also included in the wwwroot
folder.
I'm not interested in creating a new ASP.NET Core project. I want to include this blazor wasm project in my existing ASP.NET Core project so I can debug them together, publish them together like the checkbox above. How do I do that?
1 answer
-
Add
Microsoft.AspNetCore.Components.WebAssembly.Server
nuget to the ASP.NET Core application. -
Reference the Blazor WebAssembly application from the ASP.NET Core application.
<Project Sdk="Microsoft.NET.Sdk.Web"> <!-- ... --> <ItemGroup> <!-- ... --> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" /> </ItemGroup> <ItemGroup> <!-- ... --> <ProjectReference Include="..\MyBlazorApp.csproj" /> </ItemGroup> <!-- ... --> </Project>
-
Edit the
Startup
file of the ASP.NET Core application:- Add
UseWebAssemblyDebugging
if running in development mode (see sample below). - Call the
UseBlazorFrameworkFiles
. - Add
MapFallbackToFile("index.html")
routing.
namespace MyApp { public class Startup { public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { // ... app.UseWebAssemblyDebugging(); // this } // ... app.UseBlazorFrameworkFiles(); // this app.UseEndpoints(endpoints => { // ... endpoints.MapFallbackToFile("index.html"); // this }); } } }
- Add
-
Then edit the
launchSettings.json
, addinspectUri
like so:{ // ... "profiles": { "IIS Express": { // ... "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" }, "MyApp": { // ... "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" } } }
0 comment threads