Dart-code: Web app support requirements

[DanTup]

I had a quick play around with the Debugger for Chrome extension in a branch today (web) and using pub serve. Seems like it's not hard to launch pub serve and then start a debug session using the other extension (if installed; otherwise show an error).

We need Code 1.15 in order to hook the debug session ending to terminate pub serve, but that's not too far off.

However, while working on this I started wondering about people writing a backend in Dart - is pub serve the correct thing here? Will they also need us to run dart bin/server.dart to run their backend? Would this be instead of pub serve or as well as? Having two endpoint seems a bit weird but a custom web server/backend isn't going to be compiling the frontend/providing source maps, etc.

@devoncarew Do you have any thoughts on this? How common is launching for a Dart web server as well the frontend app? If other IDEs support this, how is it normally configured?

[DanTup]

Some notes from Gitter:

• Web app + backend tend to be separate "projects" (eg. their own pubspecs, etc.)
• Means running pub serve as well as dart server/xxx to run the web app
• IntelliJ does this by having two tasks; you can right-click on server/xxx and launch for the Dart backend, and also run pub serve for the server

[pcariel]

hi, @DanTup. nice work. Are there possibilities to integrate Angular Dart Analysis Plugins?

[DanTup]

@pcariel There's a PR (#393) from @LorenVS going into the next release which adds a preview flag to enable support (though as I understand it, you need to build it yourself currently) :-)

[jsiedentop]

Wow, nice work. I heard a lot good about your Dart integration. Support of Web App Debugging was the last Bumper for me. Sounds great, that you're working on it.

[DanTup]

It hasn't progressed much because I've been tied up with other things; but it's still high priority for me.. I'm hoping to get back to it more seriously next month.

[DanTup]

Possibly can detect whether the Debugger for Chrome is installed using this:

https://code.visualstudio.com/docs/extensionAPI/vscode-api#_extensions

[mnordine]

Any update on this?

[DanTup]

Two main things have been holding this one up:

1) Upcoming changes to tooling (like pub serve) might mean things will change significantly
2) Time(!)

There's a milestone named "MVP: Replace pub serve" in the dart-lang/build project which is seemingly 100% complete so _1_ might be resolved in the near future (I don't know how near - the name of that milestone is literally all the info I have so far =)).

As for time; I hope to have more to spend on Dart Code soon. I have an idea for a web app I'd like to build in Dart, so if I can find time for it I'll have good motivation to progress this! I don't actually get to use Dart Code much currently (as a user) since most spare time is spent working on it; so I'm keen to have a project to work on so I can dog-food it better.

If this is something you're interested in, I'd be curious to know what the priorities are for you and how your project is structured, etc. so I can be sure what I build supports it well.

[mnordine]

I'd be curious to know what the priorities are for you

Not exactly sure what you mean. Maybe I have this issue confused, but I thought it was for adding the ability to debug web apps in VS Code, same as command-line ones. Do you mean what specific debug features, such as adding, hitting breakpoints, display variable value on hover, etc?

how your project is structured

I've always used stagehand to generate my web apps, I've used its web-simple and web-stagexl generators.

If you have any specific questions, I'd be more than happy to answer.

[DanTup]

@mnordine There are quite a few parts to supporting web apps, like:

• Supporting serving (like pub serve) in the background
• Running code-gen/build scripts (if not part of serving)
• Pressing F5 to launch a browser
• Debugging (which should include full functionality)

Some people using Dart never use the debugger (there are many tutorials out there using it for Flutter for example, but then running from the terminal, with no ability to do runtime debugging) so I was curious about what's most important for people (obviously I want to do it all, but since the debugger will be using the Chrome debugger protocol it'll be a new implementation and unable to reuse the Dart one for cli/Flutter apps, so I'd like to prioritise the most useful bits).

As for project structure, I guess there are single-folder apps (just a web app that can be run using pub serve, maybe an AngularDart app, for ex) as well as apps that have server-side Dart APIs too (eg. a Dart script that runs a http listener or similar) or even Flutter apps that have web API backends. Again, I want to support all of these, but I don't know what the most common cases are so any information could help focus on delivering what's most useful first.

Hope this makes sense!

[mnordine]

Wouldn't it make sense to support simple, single-folder web apps to start?

[DanTup]

If people have such projects, sure. But even that has many forms (like, is it a client web app that can use pub serve or a Dart server app that serves files itself?). To be honest, the singe-folder versus multi-folder thing isn't a big difference (versus, say, you wanting to debug versus just having a background process serving the content), I just mentioned it as an example of the sorts of questions in my head. The more info I can gather from potential users, the better I can prioritise.

So, to be clear - is your web app a client-side app that can be served with pub serve? The reason I ask is that and SPA on its own doesn't seem useful - it'd probably need to connect to some backend/API to do something - is the server part a different project? Or are you serving a web app from your own Dart script so it can be server-side API too?

[mnordine]

is your web app a client-side app that can be served with pub serve?

Yes. Personally my main use case is for StageXL games. It does indeed connect to a separate Dart backend API, but that's not relevant to this issue unless I'm misunderstanding.

[DanTup]

Thanks for the info! Having a Dart backend is slightly related in that you might want to press F5 to launch debugging for both and might need to ensure the backend server is up before we spawn a browser running the web app (a minor detail, but the more real world scenarios I know of, the better I can test them as I do work on this :-))

[mnordine]

That would indeed be nice as I have to manually spin up the server beforehand. Is that something that could be done in a workspace? And even if that could be done, it'd probably make sense to break that out into separate issues and prioritize just client-side web debugging?

[DanTup]

Yeah, you could even do it before the multi-root stuff. If you look in launch.json for Dart Code you'll see there are "compound" configs which launch multiple debuggers at once (I use it so I can debug the Extension and the Debug Adapter at the same time, for example).

I'm not sure how it'll work with multi-root (since the compound will need to span multiple roots) but I do have #447 about supporting concurrent debug sessions (I haven't thought much about it yet though).

[rrousselGit]

Does this issue means it's currently not possible to debug angulardart projects inside vscode ?

[DanTup]

@rrousselGit It's possible if you install the Chrome Debugger extension from MS you can connect it to Chrome and debug that way (that's basically what I plan to do to support this, just make the process easier) but I haven't tried it myself yet.

[mnordine]

@DanTup Given that comment, is it the case that Dartium will not be supported?

[rrousselGit]

^ Dartium will disepear won't it ?

I'm currently using Angular dart 5 which uses dart 2.0. There's no dart2js anymore here on chrome.

But I can still debug dart files using Remote chrome debugger from vscode. Although source map doesn't work, which makes it unusable for the moment.

[DanTup]

Yeah, Dartium is going away so it doesn't make sense to build integration with that now.

Honestly, I'm not sure what the best workflow for this is right now. I do really want to support web apps but I haven't had the time to really dig into them; and with the tooling quite volatile I've been putting it off.

I do have an idea for a weekend project for the web in Dart so it's possible I'll be digging into this a little in the coming months (even if just figuring out how to do it with DDC+SourceMaps+ChromeDebugger extension without real Dart Code support), but I can't say for certain.

[matanlurey]

Danny, please feel free to mark any web-integration stores with a tag, and push off for now.

I think we'll need the build/DDC team's input (and support) here, and I don't want to distract you from working on better Flutter integration for the time being.

[matanlurey]

Tracking here: https://github.com/dart-lang/build/issues/1025

[DanTup]

There is a web label though I'd somehow failed to label this one. I don't expect to tackle web support in Dart Code soon but if I come up with a way to get VS Code/Chrome Debugger working with Dart code while working on a weekend project I'll post the details here (if DDC creates source maps then I think the Chrome Debugger Extension should work reasonably will; just haven't tried it yet).

[matanlurey]

Right. We are missing some integration externally that exists internally, so there are some rough spots, and you won't be able to work around them until we fix them first:

• https://github.com/dart-lang/angular/issues/872
• https://github.com/dart-lang/angular/issues/871 (JUST FIXED, not rolled out yet)

[rrousselGit]

@DanTup @matanlurey Is there anything I can do to help on this ?

[matanlurey]

@rrousselGit Come chat over at https://github.com/dart-lang/build/issues/1025.

[DanTup]

FWIW, I posted some notes at https://github.com/Dart-Code/Dart-Code/issues/68#issuecomment-379337028 about how to make F5 run pub run build_runner serve and launch the Chrome debugger once the build finishes. Source maps for your files in the web folder just work out of the box, but I haven't gotten much further yet (I hope to, but the web stuff is entirely a spare-time thing right now so no guarantees).

[Lisenish]

@DanTup I tried to use "Connect to Dart process" with DartAngular app, but it seems it doesn't support web apps, am I right?
So are we still waiting for this task for debugging web apps in vs code?

[DanTup]

@Lisenish You are correct. Today Dart Code has no support for running/debugging web apps.

There is some discussion in this thread you may be interested in though:

https://github.com/dart-lang/build/issues/1025

There's a few things in there:

1. A way of setting up launch.json so that you can press F5 to launch the browser/run your web app
2. Instructions on getting the Chrome Debug extension to use the source maps so you can debug

I haven't personally used these much; I expect the experience is not perfect, but I think you can get a reasonable way without any official support in Dart Code for now.

Long-term, I'd still love to get to the point where you can "just press F5" for a web app; but right now Flutter is the main focus (though as always, PRs are welcome and I can provide assistance if anyone wants to take a go - the discussion in the above thread has some reasonable first steps).

[mnordine]

@DanTup Now that Dart 2 has been released and the tooling set (webdev serve I think), is there an update on "just press F5" for web? I find it sad that Dart is a web language but this doesn't work out of the box.

[DanTup]

@mnordine There's not much progress beyond what's in the comments above (that is, you can get F5 to build & launch with help from the Chrome Debugger extension, though debugging is a bit hit and miss). Right now Flutter is the main focus, however I have been working on a web app recently so it's possible there may be small improvements in this area if I come low hanging fruit.

(and of course, I'm more than happy to provide assistance if someone else was interested in helping out with this :-))

[DanTup]

is there an update on "just press F5" for web?

vNext (beta here: https://github.com/Dart-Code/Dart-Code/releases/tag/v3.7.0-beta.1) supports web apps using the webdev daemon (see https://github.com/Dart-Code/Dart-Code/issues/68#issuecomment-559463356 / https://github.com/Dart-Code/Dart-Code/pull/2113). Right now you need to explicitly set the program in a launch config to something that starts with web/ (as a crude way of opting-in), but this can be iterated on. Please file issues for any issues/suggestions/feedback.

[mnordine]

I still can't get it working. Do you have a sample launch.json?

I've tried:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/main/web",
      "program": "web/"
    }
  ]
}

But it doesn't seem to launch webdev serve, which I assume should happen?

It does switch to the debugger mode in VSCode, and launch Chrome, but nothing else happens.

I've tried v3.7.0-beta.1 with VSCode Insiders build.

[DanTup]

@mnordine sorry, I should've documented this better. You should use a standard Dart launch config, not chrome. Using Chrome was the old workaround which ran webdev as a task.

The example project used in the integration tests is here:

https://github.com/Dart-Code/Dart-Code/tree/master/src/test/test_projects/web/hello_world

And its launch.json looks like this:

        {
            "name": "Dart",
            "program": "web/index.html",
            "request": "launch",
            "type": "dart"
        }

Things like debugging are still very much work in progress, but please do open issues for anything that doesn't work right (or suggestions to improve it).