Open Closed

Create a real Blazor WebAssembly solution #9644


User avatar
0
roberto.fiocchi created

I created the Blazor WASM (Abp Commercial v.8.3.2) solution with Abp Studio, but the structure is more like a Blazor WebApp, with the Blazor Client included in the project Blazor (blazor hosted). This doesn't allow me to use hot reloads and debug with "Edit and continue" option. Since the application has grown to over 180 entities with their associated management pages, both loading and, especially, debugging have become extremely slow, significantly slowing down development times. I'd like to set up the solution to have a single Blazor WASM project to ensure acceptable development times, be able to use hot reloads and debug individual pages.

How can I do this?

Thanks


32 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    To achieve a true Blazor WebAssembly (WASM) solution in ABP—where the client is a standalone WASM project (not hosted inside the ASP.NET Core project)—and to enable hot reload and "Edit and Continue" for faster development, you should use the "Layered Solution" template with the Blazor WebAssembly option. This separates the Blazor client and server, allowing you to run and debug the client project independently.

    Steps to Set Up a Standalone Blazor WASM Solution

    1. Create a Layered Solution with Blazor WASM:
      • Use ABP CLI or Studio to generate a new solution with the Blazor WebAssembly option:
    abp new MyProject -t app -u blazor-wasm
    
    • This creates:
      • MyProject.Blazor (Blazor host project)
      • MyProject.Blazor.Client (Blazor WASM client)
      • MyProject.HttpApi.Host (API backend)
    1. Project Structure:

      • The *.Blazor.Client project is a pure WASM app. You can run and debug it directly, enabling hot reload and "Edit and Continue".
      • The *.Blazor project is the host (optional for deployment, not needed for local development).
    2. Development Workflow:

      • Run MyProject.HttpApi.Host (API) and MyProject.Blazor.Client (WASM) separately.
      • In Visual Studio, set MyProject.Blazor.Client as the startup project for hot reload and fast debugging.
      • The client communicates with the API via HTTP, so ensure CORS is configured on the API.
    3. Migrating Your Existing Solution:

      • If your current solution is "Blazor WebApp" (hosted), you will need to:
        • Create a new solution as above.
        • Move your pages, components, and logic from the old Blazor project to the new *.Blazor.Client project.
        • Update service references and DI registrations as needed.
    4. Bundling and Global Assets:

      • With ABP 8.3+, use the new Global Assets system for JS/CSS bundling in WASM. See the article below for details.

    Additional Notes

    • This approach allows you to use all standard Blazor WASM development features, including hot reload and "Edit and Continue".
    • For large projects, this separation significantly improves build and debug times.

    Sources


    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  • User Avatar
    0
    roberto.fiocchi created

    If I try to set the Blazor.client project as the startup project and try to launch debug, I get the following error: Error: Cannot find runtime config at XXX.Blazor.Client\bin\Debug\net8.0\XXX.Blazor.Client.runtimeconfig.json

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I think new project will support the hot reload

    I will check it again

    Thanks.

  • User Avatar
    0
    roberto.fiocchi created

    I also tried creating a new project with Abp 9, which didn't produce an error; it started but didn't load the pages. In any case, I need to use Abp 8.3.2; I can't migrate to Abp 9.

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you try to add a new HotReload profile?

    See https://streamable.com/k1edpj

    {
      "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iisExpress": {
          "applicationUrl": "https://localhost:44329",
          "sslPort": 44329
        }
      },
      "profiles": {
        "IIS Express": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          }
        },
        "AbpSolution2.Blazor": {
          "commandName": "Project",
          "launchBrowser": true,
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
          "applicationUrl": "https://localhost:44329",
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          }
        },
        "HotReload": {
          "commandName": "Executable",
          "workingDirectory": "$(ProjectDir)",
          "executablePath": "dotnet",
          "commandLineArgs": "watch run debug --launch-profile AbpSolution2.Blazor"
        }
      }
    }
    
    
  • User Avatar
    0
    roberto.fiocchi created

    I don't have any launchSettings.json in Blazor.Client project. Should I copy it from the Blazor project? And what should I put as the project name in the command you indicated, Blazor.Client? "commandLineArgs": "watch run debug --launch-profile Myapp.Blazor.Client"

    P.s. Are you using Apb 8.3.2?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please change the launchSettings.jso file in Blazor project(instead of Blazor.Client)

  • User Avatar
    0
    roberto.fiocchi created

    But I always run it as Blazor Hosted, right? If so, every time I make a change, it has to recompile the Balzor.Client DLL, which takes time and often prevents hot reloading. It looks like you're not using my version of ABP.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    There are two projects Blazor and Blazor.Client

    The Blazor project will bootstrap the Blazor.Client project.

    So you need to run Blazor project every time. It will also compile the Blazor.Client project.

    You can see my video https://streamable.com/k1edpj. The hot reload is working with Blazor and Blazor.Client

    Thanks.

  • User Avatar
    0
    roberto.fiocchi created

    I saw your video with Abp 9. I'll try to use your suggestion but not working. I need to use also debug with "Edit and continue" option on razor.cs files.

    My question was, how can I use Blazor.Client as if it were a real Blazor WASM application? If it worked like the standard Microsoft one, everything should work automatically, right?

    Thanks for your support.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I debug with the default profile, and the hot reload also works.

    "AbpSolution2.Blazor": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:44329",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
    

    I'll try to use your suggestion but not working.

    Update the component(razor) file, but it is not updated on the browser, right?

    how can I use Blazor.Client as if it were a real Blazor WASM application?

    The new Blazor template cannot fall back to Blazor WASM mode.

    I need to use also debug with "Edit and continue" option on razor.cs files.

    It also support that. sthist case.

    Can you share a project that reproduces the hot reload not working problem?

    Thanks

  • User Avatar
    0
    roberto.fiocchi created

    The problem may be that when you launch the two apps (Blazor+Api) the DLLs are recompiled and therefore Visual Studio cannot handle it correctly.

    The project is large and we're not authorized to share it directly. Can we organize an online meeting?

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you test your case in a new Blazor WASM project and share it?

    liming.ma@volosoft.com

    Thanks.

  • User Avatar
    0
    roberto.fiocchi created

    I have been authorized to share our project with you. I'll send you an email with a link to download the project. It includes packages because we use private feeds.

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks. I will test your project.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    The Cdi.Grc.Feed NuGet source requires an account. I can't restore packages.

    Can you test your case in a new Blazor WASM project and share it?

    Thanks.

  • User Avatar
    0
    roberto.fiocchi created

    [maliming] said: hi

    The XXX.YYY.Feed NuGet source requires an account. I can't restore packages.

    Can you test your case in a new Blazor WASM project and share it?

    Thanks.

    I added the package folder for this. I can't create a new solution because I need to make this one work. I'll modify the solution to have the packages integrated and not have to read them from the private feed and send it back to you.

    Thank you

    P.S. Please remove the image and project name references as they are confidential. ;-)

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    ok, Thanks.

    I have removed the picture.

  • User Avatar
    0
    roberto.fiocchi created

    I'll send you an email with the login details for our private feed.

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I will check your project.

    Thanks.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Hot reload is working. It's just that it's too slow for your project. It might be because your project has too many components.

    See Video: https://we.tl/t-PKC2jy6Os7

  • User Avatar
    0
    roberto.fiocchi created

    As written in previous posts, I also hypothesized that it could depend on the number of entities, but this is because with each modification it must recompile the entire project and not just the individual modified files.

    Can you try again by modifying some razor.cs code and also running the api in debug?

    Reproduce step:

    • start in debug API project
    • start in debut BLAZOR project
    • set break point to row 329 on Blazor.Client\Pages\Companies.razor.cs
    • from GUI try to add a Company
    • Blocked in debug and add the code bool test = true;
    • Save And Continue

    After a lot of minutes I get an error.

    I need to develop using debugging simultaneously on both projects (API + Blazor). I can't reduce my components because my application must handle all those entities.

    As the title says: "How can I have just a standalone Blazor Web Assembly project?" Is it possible to have just the Blazor.Client project and launch it as a standalone project?

    This should solve my slowness problems.

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I can try to convert your project to WASM project. Will this fix all your problems?

    Thanks.

  • User Avatar
    0
    roberto.fiocchi created

    Yes, for this ticket.

    Thanks.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Can you upload your project to a private GitHub repository?

    Invite me as a contributor. https://github.com/maliming

    I will push new code.

    Thanks

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 01, 2025, 08:37