Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode Hot reload #129

Closed
glenfordwilliams opened this issue May 3, 2019 · 20 comments

Comments

@glenfordwilliams
Copy link

commented May 3, 2019

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?

@Drakirus

This comment has been minimized.

Copy link
Member

commented May 3, 2019

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.

@glenfordwilliams

This comment has been minimized.

Copy link
Author

commented May 3, 2019

Yes that works, thank you.

@Drakirus Drakirus closed this May 3, 2019
@glenfordwilliams

This comment has been minimized.

Copy link
Author

commented May 4, 2019

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

@jascodes

This comment has been minimized.

Copy link

commented Jul 20, 2019

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

@Drakirus

This comment has been minimized.

Copy link
Member

commented Jul 21, 2019

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!
@DanTup

This comment has been minimized.

Copy link

commented Jul 22, 2019

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

This comment has been minimized.

Copy link

commented Jul 23, 2019

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

@DanTup

This comment has been minimized.

Copy link

commented Jul 23, 2019

@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

This comment has been minimized.

Copy link

commented Jul 23, 2019

@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

This comment has been minimized.

Copy link

commented Jul 23, 2019

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.

@Drakirus

This comment has been minimized.

Copy link
Member

commented Jul 23, 2019

@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

This comment has been minimized.

Copy link

commented Jul 23, 2019

@Drakirus Yup I have tried and it works well.

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

Gotcha

@davidmartos96

This comment has been minimized.

Copy link
Contributor

commented Jul 24, 2019

@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

This comment has been minimized.

Copy link

commented Jul 24, 2019

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

@jascodes

This comment has been minimized.

Copy link

commented Jul 24, 2019

@DanTup I was kinna thinking along same line, I was taken a back lil when @Drakirus put it like We are not supporting VSCode launchmode, and will certainly never support it. That certainly shut me up 😝

@DanTup

This comment has been minimized.

Copy link

commented Jul 24, 2019

To be fair, if this project doesn't already have a VS Code extension, then I'm not sure it can really support this. It would need to be built as a VS Code extension specifically to glue the two things together - and I think that would work better if done by having it launch Hover and read the output than writing to a file (since it would all be streamlined into a single button press).

@GeertJohan

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

I think @Drakirus meant support for the existing flutter launch extension??

As @davidmartos96 and @DanTup propose, I think nothing holds us back from creating a hover extension for vscode, basically just a GUI arround the hover cli.

@Drakirus

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

I think @Drakirus meant support for the existing flutter launch extension??

Exactly, the existing flutter/dart extension cannot support hover at the moment.
Nothing holds us back from creating a hover extension for VSCode, you are right. And as @DanTup said:

It would need to be built as a VS Code extension specifically to glue the two things (hover and the existing VSCode extension) together.

The hover VSCode extension would only be glue.

For now, I don't see any value in creating our extension to support launch mode.
To me, opening a terminal, executing one command and one copy-paste isn't worth automating (and time creating/maintaining such extension).

@GeertJohan

This comment has been minimized.

Copy link
Member

commented Jul 24, 2019

To me, opening a terminal, executing one command and one copy-paste isn't worth automating

I prefer to use terminal as well. That said, lots of people like the GUI buttons, so it would be awesome if a glue-like extension is made. Anyone, feel free to pick this up! 🚀

@davidmartos96

This comment has been minimized.

Copy link
Contributor

commented Jul 24, 2019

Is anyone else getting Error 1001 received from application: File system already exists when attaching with the configuration @Drakirus provided above?
It attaches fine, with breakpoints, but all Flutter output is missing. The Debug Console is empty.

image

I am using the Dart extension version 3.3.0 Beta 3

@Drakirus Drakirus changed the title Hot reload VSCode Hot reload Aug 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
6 participants
You can’t perform that action at this time.