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
Web app support requirements #386
Comments
Some notes from Gitter:
|
hi, @DanTup. nice work. Are there possibilities to integrate Angular Dart Analysis Plugins? |
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. |
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. |
Possibly can detect whether the Debugger for Chrome is installed using this: https://code.visualstudio.com/docs/extensionAPI/vscode-api#_extensions |
Any update on this? |
Two main things have been holding this one up:
There's a milestone named "MVP: Replace 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. |
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?
I've always used stagehand to generate my web apps, I've used its If you have any specific questions, I'd be more than happy to answer. |
@mnordine There are quite a few parts to supporting web apps, like:
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 Hope this makes sense! |
Wouldn't it make sense to support simple, single-folder web apps to start? |
If people have such projects, sure. But even that has many forms (like, is it a client web app that can use So, to be clear - is your web app a client-side app that can be served with |
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. |
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 :-)) |
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? |
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). |
Does this issue means it's currently not possible to debug angulardart projects inside vscode ? |
@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. |
@DanTup Given that comment, is it the case that Dartium will not be supported? |
^ 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 |
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. |
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. |
Tracking here: dart-lang/build#1025 |
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). |
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: |
@DanTup @matanlurey Is there anything I can do to help on this ? |
@rrousselGit Come chat over at dart-lang/build#1025. |
FWIW, I posted some notes at #68 (comment) about how to make F5 run |
@DanTup I tried to use "Connect to Dart process" with DartAngular app, but it seems it doesn't support web apps, am I right? |
@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: There's a few things in there:
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). |
@DanTup Now that Dart 2 has been released and the tooling set ( |
@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 :-)) |
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 #68 (comment) / #2113). Right now you need to explicitly set the |
I still can't get it working. Do you have a sample 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 It does switch to the debugger mode in VSCode, and launch Chrome, but nothing else happens. I've tried |
@mnordine sorry, I should've documented this better. You should use a standard Dart launch config, not 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). |
I had a quick play around with the Debugger for Chrome extension in a branch today (
web
) and usingpub serve
. Seems like it's not hard to launchpub 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 rundart bin/server.dart
to run their backend? Would this be instead ofpub 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?
The text was updated successfully, but these errors were encountered: