Dart-code: Add the ability to run Dart web apps

[DanTup]

(Updated July 2017)

Given DDC now works in pub serve the plan is to just use that and the Chrome Debugger protocol for debugging. This means no Dartium support.

I've opened #386 to collect some requirements/ideas for how this will work and plan to work on it over the coming weeks.

[marcojakob]

Something similar to what Webstorm has would be great. An opinionated list of priorities:

1. Open HTML in Dartium
2. Open HTML in Dartium, debug in Visual Studio Code
3. pub build menu in editor
4. Open HTML in any other browser (Firefox, Chrome, IE, Safari), automatically compile
5. Automatically install and update Dart SDK and Dartium from Dart Code extension (don't know if this is possible in any way)

[DanTup]

Opened #386 to start collecting some requirements/notes for how this should work.

[DanTup]

FWIW for anyone doing web apps, while Dart Code doesn't have supports, I still managed to get some basic behaviour for hitting F5 with the following config in Code (this is without any Dart Code changes - you can do this today; though it shouldn't be required when Dart Code has real web support). F5 kicks off the Chrome debugger, but first it invokes pub run build_runner serve and it has some regexes so Code knows when it's idle (versus building), so it will wait until the build is finished before opening the browser.

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "pub serve",
            "type": "shell",
            "args": [
                "run",
                "build_runner",
                "serve"
            ],
            "command": "pub",
            "group": "build",
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "__________"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "^\\[INFO\\] Starting Build",
                    "endsPattern": "^\\[INFO\\] Succeeded after"
                }
            }
        }
    ]
}

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch web app",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/web",
            "preLaunchTask": "pub serve"
        }
    ]
}

Source maps for the files in web seem to work out of the box, but I haven't had chance to dig into other files (like the SDK) yet.

[mirkancal]

@DanTup the above configuration is not working with Dart 2. I have changes "pub" with "webdev" in jsons but it says command not found.

[DanTup]

@mirkancal there are no tasks registered for webdev, only pub and flutter. Why did you change it - what happens when you use pub?

[mirkancal]

@DanTup

/usr/bin/bash: pub: command not found
The terminal process terminated with exit code: 127

It gaves me this. Then I've tried "pub serve" on my terminal and it says:

Dart 2 has a new build system. Learn how to migrate from pub build and
pub serve: https://webdev.dartlang.org/dart-2

After that I thought pub dev is no longer being used and change the pub's with webdev in the above configuration.

[DanTup]

Sorry, I should've scrolled up further - the last instructions above are just setting up a task that runs a command. The error you're getting is because pub isn't in your PATH environment variable.

The second error you posted is because you ran pub serve, but the command is now pub run build_runner serve.

However, you'd be better enabling the build_runner tasks in VS Code - they're currently behind a preview flag, see the release notes here:

https://dartcode.org/releases/v2-20/#preview-build_runner-tasks

Let me know if you still have any issues using them.

[DanTup]

Considering this addressed by #2113. In the next release (beta here: https://github.com/Dart-Code/Dart-Code/releases/tag/v3.7.0-beta.1) if the launch config has program starting with web/ we'll invoke the Web debugger (the one originally created for forked flutter_web) when pressing F5.

There's undoubtedly lots of room for improvement (for example supporting projects without a launch.json) but they can be dealt with individually (so if you try this out and hit bugs or have suggestions, please do file issues).

[LassazVegaz]

Considering this addressed by #2113. In the next release (beta here: https://github.com/Dart-Code/Dart-Code/releases/tag/v3.7.0-beta.1) if the launch config has program starting with web/ we'll invoke the Web debugger (the one originally created for forked flutter_web) when pressing F5.

There's undoubtedly lots of room for improvement (for example supporting projects without a launch.json) but they can be dealt with individually (so if you try this out and hit bugs or have suggestions, please do file issues).

I keep seeing "launching" in the bottom and a process of Chrome is loaded but Dart is not working in the browser and no errors are displayed in Chrome dev tools or VS Code. Can you please help me give me a link to check "how to launch a Bare Bones Web App" in VS Code.
Thanks in advance

[DanTup]

@LassazVegaz if you run the Dart: New Project command in VS Code there's an Angular web app that I usually use for testing (you'll need to create a launch.json with Debug: Open launch.json and set "program": "web"). If this doesn't work, please capture logs (using the Dart: Capture Logs command and untick Analysis Server but leave everything else ticked) and file a new issue and I'll take a look. Thanks!