Create a real Blazor WebAssembly solution #9644

32 Answer(s)

• 

  0

  AI-Bot created 2 months ago

  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)

  2. 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).

  3. 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.

  4. 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.

  5. 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

  • ABP Layered Solution: Blazor WebAssembly
  • ABP Global Assets for Blazor WASM

  ---

  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.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

  I think new project will support the hot reload

  I will check it again

  Thanks.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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

  Save Cancel
• 

  0

  maliming created 2 months ago

  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"
      }
    }
  }
  
  

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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?

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

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

  

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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.

  Save Cancel
• 

  0

  maliming created 2 months ago

  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.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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.

  Save Cancel
• 

  0

  maliming created 2 months ago

  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

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

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

  liming.ma@volosoft.com

  Thanks.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  Thanks. I will test your project.

  Save Cancel
• 

  0

  maliming created 2 months ago

  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.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  [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. ;-)

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  ok, Thanks.

  I have removed the picture.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

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

  Thanks

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

  I will check your project.

  Thanks.

  Save Cancel
• 

  0

  maliming created 2 months ago

  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

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  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

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

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

  Thanks.

  Save Cancel
• 

  0

  roberto.fiocchi created 2 months ago

  Yes, for this ticket.

  Thanks.

  Save Cancel
• 

  0

  maliming created 2 months ago

  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

  Save Cancel