Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application
Tags: csharp, dotnet, blazor, webdev
Published: 2022-09-23 12:32:17

---
title: Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application
published: true
date: 2022-09-23 11:53:40 UTC
tags: csharp, dotnet, blazor, webdev
canonical_url: https://www.syncfusion.com/blogs/post/integrate-blazor-webassembly-in-asp-net-core-application.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r456bmrkzeewd1ayixj4.png
---

This blog provides a walk-through about how to integrate a Blazor WebAssembly project into an existing ASP.NET Core application with Syncfusion Blazor Query Builder. This blog will be helpful if you have an ASP.NET Core application and are planning to upgrade it into an ASP.NET Core WebAssembly project. This will avoid the complete redevelopment of the ASP.NET Core application to support Blazor.

## What is Blazor?

Blazor is a [single-page application](https://en.wikipedia.org/wiki/Single-page_application "Wikipedia link for Single-page application") framework that is used to build websites with HTML, CSS, and C# code. It creates rich interactive UIs using [C#](https://docs.microsoft.com/en-us/dotnet/csharp/ "C# documentation") instead of [JavaScript](https://www.javascript.com/ "JavaScript"), and it can execute Razor views on the server as well as the client to present HTML to the browser.

## What is Blazor WebAssembly and how does it work?

Blazor WebAssembly is a [single-page application framework](https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps "Choose Between Traditional Web Apps and Single Page Apps documentation") 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, which are downloaded and executed directly on the browser. It is maintained as a bytecode format for fast download and maximum execution speed, and it can access the features of the browser via JavaScript, a capability called **_JavaScript interoperability_**. To learn about the pros and cons of using JavaScript interop in Blazor, refer to [this article](https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx "Blog: Pros and Cons of Using JavaScript Interop in Blazor").

## How to create the Blazor WebAssembly project

A Blazor WebAssembly (client-side) project can be created by following these steps.

### Step #1: Download and install Visual Studio 2022

Download and install the latest version of [Visual Studio 2022](https://visualstudio.microsoft.com/vs/ "Download Visual Studio 2022") with the  **ASP.NET and web development**  workloads.

If you don’t know how to install the application or stumble on a problem, you can go through the installation documentation [here](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2022 "Documentation: Install Visual Studio").

### Step #2: Create a new project

After installation, open Visual Studio and select  **Create a new project**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Visual-Studio-Start-Window.png" alt="Visual Studio Start Window" style="width:100%">

  <figcaption>Visual Studio Start Window</figcaption>

</figure>



### Step #3: Select the Blazor WebAssembly app template

Select **Blazor WebAssembly App** from the template list and then click **Next**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Template-List-in-Visual-Studio.png" alt="Template List in Visual Studio" style="width:100%">

  <figcaption>Template List in Visual Studio</figcaption>

</figure>



### Step #4: Configure the project

At this step, the project configuration window will open. Here, we provide the required details such as **project name** and **location,** and then click the **Next** button.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Configuration-Menu.png" alt="Configuration Menu" style="width:100%">

  <figcaption>Configuration Menu</figcaption>

</figure>


### Step #5: Create the Blazor WebAssembly application

Now, select a **target framework** of your choice and click **Create** to create the WebAssembly application.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Additional-Information-Menu.png" alt="Additional Information Menu" style="width:100%">

  <figcaption>Additional Information Menu</figcaption>

</figure>



The created Blazor application will look similar to the one in the following screenshot.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Created-Blazor-Application.png" alt="Created Blazor Application" style="width:100%">

  <figcaption>Created Blazor Application</figcaption>

</figure>



## Adding Syncfusion Query Builder to the WebAssembly project

To create a Blazor query builder application, configure the Syncfusion NuGet package by referring to this documentation: [Getting Started with Blazor Query Builder Component](https://blazor.syncfusion.com/documentation/query-builder/getting-started "Getting Started Blazor Query Builder Component").

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

Integrate the Blazor WebAssembly project with an existing ASP.NET Core application by following the steps below.

**Step #1:** Open an existing ASP.NET Core application in Visual Studio.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/ASP.NET-Core-Application-in-Visual-Studio.png" alt="ASP.NET Core Application in Visual Studio" style="width:100%">

  <figcaption>ASP.NET Core Application in Visual Studio</figcaption>

</figure>



**Step # 2:** Open the **.csproj** file of the ASP.NET Core application and add the following configuration code to integrate the Blazor WebAssembly project to the application.

```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 into the ASP.NET Core solution by right-clicking on the application’s solution as shown in the screenshot below.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/ASP.NET-Core-Solution-Panel-in-Visual-Studio.png" alt="ASP.NET Core Solution Panel in Visual Studio" style="width:100%">

  <figcaption>ASP.NET Core Solution Panel in Visual Studio</figcaption>

</figure>



**Step # 4:** Open the **Program.cs** file and add the highlighted code lines below.

```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** : Delete the **favicon.ico** file. The **favicon.ico** file is created by default in both the WebAssembly and ASP.NET Core applications. To avoid conflict between these two projects while publishing, we must remove one of the files. We can achieve this as illustrated in the screenshot below.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/ASP.Net-Core-Application-Window.png" alt="ASP.NET Core Application Window" style="width:100%">

  <figcaption>ASP.NET Core Application Window</figcaption>

</figure>


**Step #6:** Run the sample. The output will be like the screenshot below.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Blazor-WebAssembly-Application-in-ASP.NET-Core-Application.png" alt="Blazor WebAssembly Application in ASP.NET Core Application" style="width:100%">

  <figcaption>Blazor WebAssembly Application in ASP.NET Core Application</figcaption>

</figure>



## Resource

For the complete source code, refer to the [integrate Blazor WebAssembly in ASP.NET Core app](https://github.com/SyncfusionExamples/integrate-blazor-wasm-to-asp-core-app "GitHub Link: Integrate Blazor WebAssembly in ASP.NET Core app") GitHub repository.

## Conclusion

We hope this blog post on how to add a Blazor WebAssembly project to an existing ASP.NET Core application was helpful. If you want to see what else Syncfusion has to offer for ASP.NET Core developers, we hope you’ll try out [Essential Studio for ASP.NET Core](https://www.syncfusion.com/downloads/aspnetcore-js2 "Download the Essential Studio for ASP.NET Core").

Please let us know if you have any queries or need clarification in the comments section below. You may also get in touch with us via our [support forum](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/blazor-components "Syncfusion Feedback Portal"). We are delighted to help you!

## Related blogs

If you like this post, we think you will enjoy the following ASP.NET Core articles as well:

- [Creating an ASP.NET Core CRUD Web API with Dapper and PostgreSQL](https://www.syncfusion.com/blogs/post/creating-an-asp-net-core-crud-web-api-with-dapper-and-postgresql.aspx "Blog: Creating an ASP.NET Core CRUD Web API with Dapper and PostgreSQL")
- [Global Exception Handling in .NET 6](https://www.syncfusion.com/blogs/post/global-exception-handling-in-net-6.aspx "Blog: Global Exception Handling in .NET 6")
- [Implementing CPU-Bound Operations in an ASP.NET Core Application](https://www.syncfusion.com/blogs/post/implementing-cpu-bound-operations-in-an-asp-net-core-application.aspx "Blog: Implementing CPU-Bound Operations in an ASP.NET Core Application")
- [Authentication Support in Syncfusion ASP.NET Core Project Template: An Overview](https://www.syncfusion.com/blogs/post/authentication-support-in-syncfusion-asp-net-core-project-template-an-overview.aspx "Blog: Authentication Support in Syncfusion ASP.NET Core Project Template: An Overview")