Fable: How to lauch Fable app within VSCode with launch.json?

[xperiandri]

How can I launch Fable app within VSCode with launch.json to open browser and terminate node when debugging stopped?

This configuration launches app but I have to manually terminate Node and it does not launch the browser

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Fable Launch NPM",
            "type": "coreclr",
            "request": "launch",
            "program": "dotnet",
            "args": ["fable", "npm-run", "start"],
            "cwd": "${workspaceRoot}",
            "stopAtEntry": false,
            "console": "externalTerminal",
            "launchBrowser": {
                "enabled": true,
                "args": "http://localhost:8080/",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start http://localhost:8080/"
                },
                "osx": {
                    "command": "open"
                },
                "linux": {
                    "command": "xdg-open"
                }
            }
        }
    ]
}

[xperiandri]

And what about browser? Will it launch?

[alfonsogarciacaro]

Ups, I didn't know the issue would close automatically. Reopening...

It's unfortunate the new version doesn't work for you, I'll try to check myself. About the browser launch, I don't know. Seems to be something VSCode related. Not sure if there's something in Fable that it's interfering with it 😕

[xperiandri]

Asked a question on StackOwerflow

[xperiandri]

I assume it is because the process did not stop.

[xperiandri]

@alfonsogarciacaro, maybe I need to run Fable from Node.js?

[alfonsogarciacaro]

@xperiandri You cannot start Fable from node in the latest version. But you gave me an idea, maybe you can try the following:

• Start the Fable daemon in a different terminal with: dotnet fable start (you can also specify the daemon port with --port 5000)
• In the VSCode launch.json file execute the npm "start" script (or call directly the Webpack dev server)

Maybe this works as you keep the Fable daemon in a different terminal and VSCode only has to worry about a single process. Just remember to stop the daemon manually when finished :+1:

[xperiandri]

The second step is not clear for me. Could you paste an exact command or snippet from launch.json?

[alfonsogarciacaro]

I managed to launch webpack dev server and the browser using the following launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Webpack Dev Server",
            "program": "${workspaceRoot}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
            "preLaunchTask": "open"
        }
    ]
}

And tasks.json:

{
    "version": "0.1.0",
    "command": "open",
    "isShellCommand": true,
    "args": ["http://localhost:8080"],
    "showOutput": "always"
}

I tried to use "launchBrowser" as in your sample above but it didn't work. With this configuration, webpack-dev-server launches when you press F5 and closes when you hit the Stop button. It also launches the browser (at least in macOS) though you have to wait some seconds until the actual web shows up.

However, for this configuration to work remember you have to first start the Fable daemon in a terminal by typing:

dotnet fable start

If you use a VS Code terminal, it seems the process is killed automatically when you close the editor (again, at least in macOS).

[xperiandri]

Here is the answer

The debugger waits for the target app to write a line to stdout that meets the following condition:
if (serverOutput.StartsWith("Now listening on", StringComparison.Ordinal))

[xperiandri]

@alfonsogarciacaro could you adjust output to trigger browser launch?

[alfonsogarciacaro]

@xperiandri My guess is the Now listening on pattern signals a debugger is listening on a port, but Fable is not a debugger. The configuration I described above ☝️ launches the browser, isn't it working for you?