How to autorun webpack-dev-server when starting debugging RoR session?

Question

Since Rails 5.1, It's possible to run rails server next to webpack-dev-server. I have configured debugger in launch.json to run rails server. When I start rails server throught vscode, I want it to automatically run ./bin/webpack-dev-server on background for autocompile javascript changes as another process, but I can't figure out how to achieve this.

I have created task in tasks.json to run webpacker but I can't figure out how to combine it with launch.json.

Here is my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "preLaunchTask": "webpack-dev-server",
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": [
        "server"
      ]
    }
  ]
}

And here is tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "webpack-dev-server",
      "type": "shell",
      "command": "${workspaceRoot}/webpack-dev-server",
      "isBackground": true,
    }
  ]
}

When I run debugging and task separately, It's working as expected, but run then automatically when starting debugging not working.

Things I've tried:

run webpack-dev-server with "preLaunchTask" - problem with this is that "preLaunchTask" waits until webpack-dev-server stop running and after that runs debugging. I need them to run simultaneously next to each other.
Specify webpack-dev-server as another launch configuration and combine these two launches through compond in launch.json - this isn't working, because vscode needs to specify type of launch and shell isn't supported
run task with & at the end to suppress waiting for process finish - not working

If anybody solved this or know how to achieve running both processes simultaneously through one click, It would be helpful to share this knowledge.

Thank you.

score 1 · Accepted Answer · answered Jan 02 '21 at 23:19

So I found the solution thanks to https://stackoverflow.com/a/54017304/3442759.

In tasks.json there needs to be specified problemMatcher even when it's not used. Without problemMatcher specified, task will not run in the background even when isBackground is set to true.

I've created gist with setup steps. https://gist.github.com/tomkra/b1d67a7ae96af34cba78935f15b755b6

So final configuration is:

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": [
        "server"
      ],
      "preLaunchTask": "webpack-dev-server"
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "webpack-dev-server",
      "type": "shell",
      "isBackground": true,
      "command": "./bin/webpack-dev-server",
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".",
          }
        }
      ]
    }
  ]
}

How to autorun webpack-dev-server when starting debugging RoR session?

1 Answers1