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)
-
0
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
- 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)
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).
- The
Development Workflow:
- Run
MyProject.HttpApi.Host
(API) andMyProject.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.
- Run
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.
- If your current solution is "Blazor WebApp" (hosted), you will need to:
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.
- Create a Layered Solution with Blazor WASM:
-
0
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
-
0
hi
I think new project will support the hot reload
I will check it again
Thanks.
-
0
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
-
0
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" } } }
-
0
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?
-
0
-
0
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.
-
0
hi
There are two projects
Blazor
andBlazor.Client
The
Blazor
project will bootstrap theBlazor.Client
project.So you need to run
Blazor
project every time. It will also compile theBlazor.Client
project.You can see my video https://streamable.com/k1edpj. The hot reload is working with
Blazor
andBlazor.Client
Thanks.
-
0
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.
-
0
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
-
0
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
-
0
hi
Can you test your case in a new Blazor WASM project and share it?
liming.ma@volosoft.com
Thanks.
-
0
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
-
0
Thanks. I will test your project.
-
0
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.
-
0
[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. ;-)
-
0
ok, Thanks.
I have removed the picture.
-
0
I'll send you an email with the login details for our private feed.
Thanks
-
0
hi
I will check your project.
Thanks.
-
0
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
-
0
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
-
0
hi
I can try to convert your project to WASM project. Will this fix all your problems?
Thanks.
-
0
Yes, for this ticket.
Thanks.
-
0
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