Torizon dotnet (.net) Blazor hot reload

Technical Support
, , , ,
1

I was playing with the Blazor support in the Torizon VS Code Extension. It’s lovely. I was quickly up and running able to debug on the device.

Turns out, there’s also an option to debug with the code just running in the WSL Torizon distro. Even better. (F5 to Running app is pretty fast)

But I live in 2025, and I love the “edit-and-continue” feature that modern languages and IDEs provide. In Blazor, people call it hot reload. It prevents the whole Shift + F5 to kill the app then F5 to rebuild.

Well, with a little tweaking, I now have Hot Reload for Blazor WASM working.

I added 3 new configurations and a compound to join them.

launch.json

{
      "name": "Local Debug w/ Hot Reload?",
      "type": "blazorwasm",
      "request": "launch",
      "preLaunchTask": "build-debug-local",
      "program": "${workspaceFolder}/bin/Debug/net8.0/mpcambio.dll",
      "cwd": "${workspaceFolder}",
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "url": "https://localhost:7001" // Tell launch where to find site
    },
    {
      "name": "Watch",
      "type": "coreclr",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "dotnet",
      "args": [
        "watch",
        "--project",
        ".",
        "--verbose" // Let's us confirm browser connects with hot reload capabilities
      ],
      "preLaunchTask": "build-debug-local" // Ensure we don't watch an unbuilt site
    },
    {
      "name": "Attach",
      "type": "blazorwasm",
      "request": "attach",
      "cwd": "${workspaceFolder}",
      "url": "https://localhost:7001", // Tell launch where to find site
      "timeout": 120000, // Allows time for the site to launch
    },],
  "compounds": [
    {
      "name": "Debug with Hot Reload",
      "configurations": [
        "Watch",
        "Attach"
      ]
    }
  ]

And… it works!

Now I can edit my razor files and see my changes without breaking down and rebuilding.

2

Hi, I’m the Toradex AI Assistant. The Toradex Support team will follow up with you shortly!

Did you like my answer?

:+1: :-1:

Hello!

It’s wonderful to hear about your success in setting up hot reload for Blazor WASM using the Torizon VS Code Extension. Your configuration in launch.json is well-structured, and using a compound configuration to combine “Watch” and “Attach” is an effective way to streamline the debugging process. This setup should indeed allow you to edit your Blazor application and see changes reflected immediately, enhancing your development workflow.

To ensure smooth operation, make sure your development environment, including the Torizon VS Code Extension and any related .NET SDKs, is fully updated. This helps maintain compatibility and leverage the latest features and fixes.

If you encounter any issues with hot reload, the --verbose flag in your “Watch” configuration is a great tool for diagnosing connectivity or configuration issues by providing detailed output.

Your setup aligns well with the capabilities of the Torizon platform, and you should be able to continue developing efficiently with these configurations. If you have any specific questions or run into challenges, feel free to reach out for more guidance.

Best regards,
Toradex AI Assistant.

Please, also check if these links can help you solve your problem:

Migration of .NET core 6.0 project from IDE extension v1 to IDE extension v2.

3

Greetings @kdubious,

If you want you can try to have this functionality in the Blazor template by default. The Github repository for the VSCode extension templates can be found here: GitHub - torizon/vscode-torizon-templates: VS Code Torizon Integrated Development Environment Templates

It accepts open contributions via pull requests.

Best Regards,
Jeremias

4

Actually… this setup created additional problems. I’ve spent most of today trying to understand the options we have. Seems like Debug and Hot Reload are mutually exclusive: we can have 1, but not both.

When I have something solid to share, I’ll try to help out with the template repo.