VSCode Hot reload

[kingwill101]

Now that it is possible to get automatic hot reload working using https://github.com/google/flutter-desktop-embedding and vscode is there a way now to get it working with hover?

[pchampio]

When running hover run you should get a line:

[...]
flutter: Observatory listening on http://127.0.0.1:50300/xzxoXvGyLX0=/
[...]

With this Observatory url, follow the FDE/Debugging.md ~Attaching instructions.

I'm not a VSCode user; please let me know if the above instructions are still correct.

[kingwill101]

Yes that works, thank you.

[kingwill101]

note that the observatory seems to expect you to have a main.dart file when reloading

[JasCodes]

any update on this? vscode support is for forcing me to use flutter's native solution for now

[pchampio]

To have hot-reload in vs-code you must:

• Get the 'Observatory url'.
  When running hover run you should get a line:

  [...]
  flutter: Observatory listening on http://127.0.0.1:50300/xzxoXvGyLX0=/
  [...]
  

  It's to this Observatory that the VSCode extension will connect to.
• Add a VSCode launch configuration like the following:

  {
    "name": "go-flutter desktop",
    "request": "attach",
    "deviceId": "flutter-tester",
    "observatoryUri": "${command:dart.promptForVmService}",
    "type": "dart",
    "program": "lib/main_desktop.dart" // Dart-Code v3.3.0 required
  }
  

• Start Debugging (F5)
• Paste in the popup prompt the 'Observatory url'
• Enjoy hot-reloading and the other feature that the VSCode extension provide!

---

Edit: davidmartos explained how to configure vscode so that it works without an observatoryURL. #129 (comment)

[DanTup]

There's a beta of the upcoming VS Code release that adds support for setting "program": on attach configs here:

Dart-Code/Dart-Code#1881 (comment)

[JasCodes]

@DanTup @Drakirus Any chance extension can hook up debugger also?

[DanTup]

@JasCodes I'm not sure I understand the question. The Dart/Flutter extensions to fully support debugging for launched and attached apps, however I'm not familiar with the setup here with Go. What is it that doesn't work for you?

If you raise an issue at Dart-Code with details and a log file I can take a look.

[JasCodes]

@DanTup Check out direction for hot-reloading of this project in vscode by @Drakirus above in this thread. I am attaching it below. go-flutter generates Observatory url that one need to attach to manually for debugging.

To have hot-reload in vs-code you have to:

• Use lib/main.dart as your app entry-point.
  hover default the entry-point to lib/main_desktop.dart, it's not supported by VSCode, Dart-Code/Dart-Code#1881, in order to get hover run with VSCode you have to run: hover run --target=lib/main.dart. (cough: don't forget the debugDefaultTargetPlatformOverride in main.dart wink)

• Get the 'Observatory url'.
  When running hover run you should get a line:

  [...]
  flutter: Observatory listening on http://127.0.0.1:50300/xzxoXvGyLX0=/
  [...]
  

  It's to this Observatory that the VSCode extension well connect to.

• Add a VSCode launch configuration like the following:

  {
    "name": "go-flutter desktop",
    "request": "attach",
    "deviceId": "flutter-tester",
    "observatoryUri": "${command:dart.promptForVmService}",
    "type": "dart",
    "program": "lib/main_desktop.dart" // Dart-Code v3.3.0 required
  }
  

• Start Debugging (F5)

• Paste in the popup prompt the 'Observatory url'

• Enjoy hot-reloading and the other feature that the VSCode extension provide!

[DanTup]

Oh, sorry, you're asking for a way to automatically attach?

I'm not familiar with how you're launching the app so I don't know how easy it'd be. I presume you're using the standard Go extension in VS Code to launch the Go app, and then attaching the Dart debugger? You would probably need a VS Code extension that understands how both of these work and can glue them together.

[pchampio]

@JasCodes you're leadin' us around in circles...

The extension made by @DanTup works in 2 modes: launch and attach.
I'm sure you are familiar with the launch mode, you click a button an everything is handled for you.

go-flutter isn't part of the flutter tool-chain, we came up with hover to automate the maximum of the painful setup. We are not supporting VSCode launchmode, and will certainly never support it.

hover, when running the the hover run command mode exposes the dart VM "Observatory url" (Not generated by go-flutter, it's a dart VM feature) in which you can connect yourself to interact with.. the dart VM.

The steps:

• Get the 'Observatory url'.
  When running hover run you should get a line:

  [...]
  flutter: Observatory listening on http://127.0.0.1:50300/xzxoXvGyLX0=/
  [...]
  

  It's to this Observatory that the VSCode extension well connect to.

• Add a VSCode launch configuration like the following:

  {
    "name": "go-flutter desktop",
    "request": "attach",
    "deviceId": "flutter-tester",
    "observatoryUri": "${command:dart.promptForVmService}",
    "type": "dart",
    "program": "lib/main_desktop.dart" // Dart-Code v3.3.0 required
  }
  

• Start Debugging (F5)

• Paste in the popup prompt the 'Observatory url'

• Enjoy hot-reloading and the other feature that the VSCode extension provide!

Are require to connect VScode to the 'go-flutter' instance, and it allows you to have fully support for debugging in VSCode, have you tried it yet?

[JasCodes]

@Drakirus Yup I have tried and it works well.

We are not supporting VSCode launchmode, and will certainly never support it.

Gotcha

[davidmartos96]

@Drakirus Proposal: how about making hover save the last observatory URI in a hidden file?
https://github.com/go-flutter-desktop/hover/blob/4751a8e61e1d43372bf6c94639bf13e92f30bf23/cmd/run.go#L61

I have been looking into VS Code extensions and it would not be hard to make one that reads the URI from a file and automatically attaches with the Dart VS Code extension debugger.

[DanTup]

I have been looking into VS Code extensions and it would not be hard to make one that reads the URI from a file and automatically attaches with the Dart VS Code extension debugger.

I don't know the details of how hover works, but you could probably also make a VS Code extension that runs it for you and regexes the URL out of stdout, then spawns a Dart debug session (here's how you can start a Dart debug session programatically - you'd want to use attach and incude the observatoryUri).