# Blazor Web Assembly

This topic describes how to add the Blazor Designer component to your Blazor Web Assembly Application.

## Content

This topic describes how to add the Blazor Designer component to your Blazor Web Assembly Application. See the [ActiveReports Blazor Designer web sample](https://github.com/activereports/WebSamples19/tree/main/BlazorDesigner) for details.
When you create a Blazor web assembly application, you need to create two projects:

* A project with Report Service. Such project creates a remote report server for ActiveReports Blazor Designer.
* Client application that communicates with the Report Service (Blazor Web Assembly).

## Prerequisites (Blazor Web Assembly)

Before following the steps of this tutorial, please ensure that you have met the following requirements:

* **ActiveReports.NET Installation**: ActiveReports.NET should be installed on your machine. If you have not yet installed ActiveReports.NET, please refer to our [installation guide](https://docapp.mescius.io/manage/ArticleEdit//activereportsnet/docs/v19.2/devops/install-activereports) for detailed instructions.
* **Visual Studio**: A version of Visual Studio 2022 17.0 or newer with the **ASP.NET and web development** workload installed.
* **Basic Knowledge of C# and Visual Studio**: Familiarity with C# programming and navigating Visual Studio is assumed. If you need a refresher, the [Microsoft C# Guide](https://docs.microsoft.com/en-us/dotnet/csharp/) and [Visual Studio Documentation](https://learn.microsoft.com/en-us/visualstudio) are excellent resources.

1. Select the **Create a new project** option from the Visual Studio startup window.
2. In the list of project templates, find and select **Blazor WebAssembly App Empty**. Click the **Next** button to continue.
3. In the **Configure your new project** dialog, provide a name for your project in the **Project name** field, choose a suitable location for your project files, and click **Next**.
4. The **Additional Information** dialog will ask you to select a target framework. For the best compatibility with ActiveReports.NET, select **.NET 6.0** or newer. Please ensure that the **Authentication** is set to **None** and the **Configure for HTTPS** is unchecked.
5. Click the **Create** button to finalize the project setup. Visual Studio will generate a new Blazor Server WebAssembly application project

## Installing ActiveReports Nuget Packages (Blazor Web Assembly)

To use the ActiveReports.NET Blazor Report Designer, you must add the ActiveReports.NET NuGet packages to your project by following these steps.

1. In the Solution Explorer, right-click your project and select **Manage NuGet Packages for Solution**.
2. Go to the **Browse** tab and search for **MESCIUS.ActiveReports.Blazor.Designer**.
3. Click the package in the search results and then click **Install** on the right-hand side of the window.

## Configuring the Report Designer middleware (ReportService)

The Blazor Report Designer communicates with the server-side via the ASP.NET middleware that you can configure as follows.

1. In the Solution Explorer, right-click the project, select **Add > New Folder** and set the name of this folder to *Reports*.
2. Open the **Program.cs** file, located in the root folder of the application.
3. Insert the following statements at the beginning of the file:

```auto
using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Web.Designer;
```

4. Insert the following code before the `app.UseStaticFiles();` line:

```auto
var reportsDir = new DirectoryInfo(Path.Combine(app.Environment.ContentRootPath, "Reports"));
app.UseReportDesigner(config =>
{
    config.UseFileStore(reportsDir, null, FileStoreOptions.NestedFoldersLookup);
});
```

## Initializing the report designer (Blazor Web Assembly)

1. From the Solution Explorer, open the **MainLayout.razor** file and replace the code with the following.
<br>
    ```html
    @page "/"
    @using GrapeCity.ActiveReports.Blazor.Designer;
    @inject IJSRuntime JSRuntime
    <div style="height:100vh;width:100%"
        <ReportDesigner @ref="_designer" Server="@_server" Document="@_document" />
    </div>
    @code {
        private ReportDesigner _designer;
        private Server _server = new Server()
        {
            Url = "http://localhost:5098"
        };
        private Document _document = new Document()
            {
                Id = "Report.rdlx",
                Type = SupportedDocumentType.cpl
            };
    }
    ```

## Running the Project

1. To build your project, go to the **Build** menu in Visual Studio and select **Build Solution**.
2. Once the build is successful, go to the **Debug** menu and click **Start Debugging** or **Start Without Debugging**.

## See also

[Blazor Designer](/activereportsnet/docs/v19.2/samples/web-samples/webdesigner-samples/blazordesigner)