How to Add a Blazor WebAssembly Project to an ASP.NET Core App
Tags: blazor, development, web, aspnetcore
Published: 2023-11-15 07:00:59

---
title: How to Add a Blazor WebAssembly Project to an ASP.NET Core App
published: true
date: 2023-10-30 11:35:50 UTC
tags: blazor, development, web, aspnetcore
canonical_url: https://www.syncfusion.com/blogs/post/blazor-wasm-to-asp-dotnet-core.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7epu01eh4s7cwijbh51.png
---
This blog explains adding a Blazor [WebAssembly](https://en.wikipedia.org/wiki/WebAssembly "Wikipedia: WebAssembly") project to an existing [ASP.NET Core](https://en.wikipedia.org/wiki/ASP.NET_Core "Wikipedia: ASP.NET Core") application. For this demo, we’ll use the [Syncfusion Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder "Blazor components library") component.

## What is Blazor?

Blazor is a [single-page app](https://en.wikipedia.org/wiki/Single-page_application "Wikipedia: Single-page application") framework for building websites with HTML, CSS, and C# code. It is used to create rich, interactive UIs using [C#](https://docs.microsoft.com/en-us/dotnet/csharp/ "Getting Starting with C# documentation") instead of [JavaScript](https://www.javascript.com/ "JavaScript Web") 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](https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps "Getting Started with Choose Between Traditional Web Apps and Single Page Apps") 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/ "Getting Started with the JavaScript interoperability"). For more details, refer to this [Microsoft documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0#blazor-webassembly "Getting Started with the 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 "Tooling for ASP.NET Core Blazor") article.

**Step #1:** First, download and install the latest version of [Visual Studio 2022](https://visualstudio.microsoft.com/ "Visual Studio 2022") with the [ASP.NET and web development](https://community.chocolatey.org/packages/visualstudio2022-workload-netweb "Getting Started with 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 Web Assembly Application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Creating-Blazor-Web-Assembly-Application.png)

Now, the Blazor WASM application will be created, and the application structure will look like the following image. ![Blazor Web Assembly Application output](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 "Getting Started with Blazor QueryBuilder Component") document.

## Add the Blazor WebAssembly project to an ASP.NET Core application

Integrate the Blazor WebAssembly project into an ASP.NET Core application with the following steps.

**Step #1:** Open an existing ASP.NET Core application. ![Opening ASP.NET Core Application](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 application. Then, add the following configurations in the **.csproj** file.

```xml
<Project Sdk="Microsoft.NET.Sdk.Web">
 <ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
 </ItemGroup>
 <ItemGroup>
  <ProjectReference Include="..\..\BlazorWasmApp\BlazorWasmApp\BlazorWasmApp.csproj" />
 </ItemGroup>
</Project>
```

**Step #3** : Add the Blazor WebAssembly project to the ASP.NET Core solution by right-clicking the app’s solution, then **Add-> Existing Project**. ![integrate the Blazor Web Assembly 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 following code to it.

```csharp
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 application. This causes a conflict when publishing. To fix this, delete one of the files.

Refer to the following image. ![Deleting the favicon.ico file](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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Adding-a-Blazor-WebAssembly-Project-to-an-ASP.NET-Core-App.png" alt="Adding a Blazor WebAssembly Project to an ASP.NET Core App" style="width:100%">

  <figcaption>Adding a Blazor WebAssembly Project to an ASP.NET Core App</figcaption>

</figure>
## 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 "Integrate Blazor WASM to ASP Core app GitHub demo").

## 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 application. 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 "Essential Studio License and Downloads page") page. For those new to Syncfusion, we invite you to try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free Evaluation of Essential Studio products") 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 "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). 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 "Blog: What’s New in Blazor Image Editor: 2023 Volume 3")
- [What’s New in Syncfusion Blazor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/syncfusion-blazor-2023-volume-3.aspx "Blog: What’s New in Syncfusion Blazor: 2023 Volume 3")
- [Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid](https://www.syncfusion.com/blogs/post/nested-grid-in-blazor-treegrid.aspx "Blog: Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid")
- [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 "Blog: Smartly Customize the Blazor Linear Gauge to Reproduce a Step Progress Bar")