--- title: "How to Add a Blazor WebAssembly Project to an ASP.NET Core App" published_at: "2023-10-30T11:35:50+00:00" modified_at: "2026-01-14T08:20:30+00:00" url: "https://www.syncfusion.com/blogs/post/blazor-wasm-to-asp-dotnet-core" excerpt: "This blog explains how to add a Blazor WebAssembly project to an existing ASP.NET Core app with code examples." taxonomy_category: - "Blazor" - "Development" - "Syncfusion" - "Web" taxonomy_post_tag: - "Blazor" - "development" - "Syncfusion" - "wasm" - "Web" --- # How to Add a Blazor WebAssembly Project to an ASP.NET Core App [Satheeskumar S](https://www.syncfusion.com/blogs/author/satheeskumars) ![How to Add a Blazor WebAssembly Project to an ASP.NET Core App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/How-to-Add-a-Blazor-WebAssembly-Project-to-an-ASP.NET-Core-App.png) This blog explains adding a Blazor [WebAssembly](https://en.wikipedia.org/wiki/WebAssembly) project to an existing [ASP.NET Core](https://en.wikipedia.org/wiki/ASP.NET_Core) application. For this demo, we’ll use the [Syncfusion Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component. ## What is Blazor? Blazor is a [single-page app](https://en.wikipedia.org/wiki/Single-page_application) framework for building websites with HTML, CSS, and C# code. It is used to create rich, interactive UIs using C# instead of JavaScript and can execute Razor views on the server and client to present HTML content in the browser. ## What is WebAssembly and how does it work? Blazor WebAssembly (WASM) is a single-page app framework for building interactive client-side web apps with .NET, and it works in all web browsers. .NET WebAssembly-related code and its dependencies, such as C# and Razor files, are compiled into .NET assemblies that can be downloaded and executed directly on the browser. It is maintained in a bytecode format for fast download and maximum execution speed, and it can access the features of the browser via JavaScript, which is called [JavaScript interoperability](https://guide.elm-lang.org/interop/) . For more details, refer to this [Microsoft documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0#blazor-webassembly) . ## How to create a Blazor WebAssembly project A Blazor WebAssembly project can be created by following these steps. **Note:** For more details, refer to the [Tooling for ASP.NET Core Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows&view=aspnetcore-6.0) article. **Step # 1:** First, download and install the latest version of [Visual Studio 2022](https://visualstudio.microsoft.com/) with the ASP.NET and web development workload. **Step # 2:** Then, open Visual Studio 2022 and select ** Create a new project**.![Creating a new project in Visual Studio 2022](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Creating-a-new-project-in-Visual-Studio-2022.png) **Step #3:** Select ** Blazor WebAssembly App** from the template list and click ** Next** to configure the project.![Select Blazor WebAssembly App from the template](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Select-Blazor-WebAssembly-App-from-the-template.png) **Step #4:** The project configuration window will pop up now. Provide the requested details and click ** Next**.![Configuring the project in Visual Studio](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Configuring-the-project-in-Visual-Studio.png) **Step #5:** Select a target framework and click ** Create** to create a WebAssembly app.![Creating Blazor WebAssembly Application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Creating-Blazor-Web-Assembly-Application.png) Now, the Blazor WASM app will be created, and the app structure will look like the following image.![Blazor WebAssembly app structure](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Blazor-Web-Assembly-Application-output.png) ### Adding the Syncfusion Query Builder to the WebAssembly project To add the Syncfusion Blazor Query Builder to the app, we must first configure the Syncfusion NuGet package. If you are new to this, we advise that you go through our [get started](https://blazor.syncfusion.com/documentation/query-builder/getting-started) document. ## Add the Blazor WebAssembly project to an ASP.NET Core app Integrate the Blazor WebAssembly project into an ASP.NET Core app with the following steps. **Step # 1:** Open an existing ASP.NET Core app.![Opening existing ASP.NET Core app](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Opening-ASP.NET-Core-Application.png) **Step # 2:** Open the **.csproj** file of the ASP.NET Core app. Then, add the following configurations in the **.csproj** file. ``` ``` **Step # 3**: Add the Blazor WebAssembly project to the ASP.NET Core solution by right-clicking the app’s solution, then** Add-> Existing Project**.![Add the Blazor WebAssembly project into the ASP.NET Core solution](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/integrate-the-Blazor-Web-Assembly-project-into-the-ASP.NET-core-solution..png) **Step # 4:** Next**,** open the **Program.cs** file and add the highlighted lines to it. ``` var builder = WebApplication.CreateBuilder(args); // Add services to the container. if (app.Environment.IsDevelopment()) { app.UseWebAssemblyDebugging(); } app.UseBlazorFrameworkFiles(); app.MapFallbackToFile("index.html"); //app.MapRazorPages(); // Remove this line. app.Run(); ``` **Step # 5:** By default, the ** favicon.ico** file is created in the WebAssembly project and the ASP.NET Core app. This causes a conflict when publishing. To fix this, delete one of the files. Refer to the following image.![Deleting one of the favicon.ico files](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Deleting-the-favicon.ico-file.png) **Step #6:** Finally**,** run the sample. We’ll get output like in the following image. ![Adding a Blazor WebAssembly Project to an ASP.NET Core App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Adding-a-Blazor-WebAssembly-Project-to-an-ASP.NET-Core-App.png) Adding a Blazor WebAssembly Project to an ASP.NET Core App ## GitHub reference To see the example for this integration, go to [this GitHub page](https://github.com/SyncfusionExamples/integrate-blazor-wasm-to-asp-core-app) . ## Conclusion Thanks for reading! This blog post explored the step-by-step process of integrating a Blazor WebAssembly project into an existing ASP.NET Core app. We hope that the information provided here has met your expectations. We encourage you to leave your valuable feedback in the comments section below! If you are an existing customer of Essential Studio®, you can access the latest version on the [License and Downloads](https://www.syncfusion.com/account/downloads) page. For those new to Syncfusion, we invite you to try our 30-day [free trial](https://www.syncfusion.com/downloads) and explore the wide range of features we offer. If you have any questions, please do not hesitate to contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always here to help you! ## Related blogs - [What’s New in Blazor Image Editor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-blazor-image-editor.aspx) - [What’s New in Syncfusion Blazor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/syncfusion-blazor-2023-volume-3.aspx) - [Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid](https://www.syncfusion.com/blogs/post/nested-grid-in-blazor-treegrid.aspx) - [Smartly Customize the Blazor Linear Gauge to Reproduce a Step Progress Bar](https://www.syncfusion.com/blogs/post/blazor-linear-gauge-to-step-progress-bar.aspx)