How does TeamsFx Hello World Tab sample app invoke local development?

Question

I created the hello world tab example using TeamsFx toolkits VS Code extension. The part that I don't understand is how does the debug mode invoking the tab react app start script?

In the tasks.json file, there is a dependsOn teamsFx: frontend start setting. I couldn't figure out where frontend start script or frontend being declared.

Here is the task.json file

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Pre Debug Check",
      "dependsOn": ["dependency check", "prepare dev env"],
      "dependsOrder": "sequence"
    },
    {
      "label": "dependency check",
      "type": "shell",
      "command": "exit ${command:fx-extension.validate-dependencies}"
    },
    {
      "label": "prepare dev env",
      "dependsOn": ["prepare local environment", "frontend npm install"],
      "dependsOrder": "parallel"
    },
    {
      "label": "prepare local environment",
      "type": "shell",
      "command": "exit ${command:fx-extension.pre-debug-check}"
    },
    {
      "label": "Start Frontend",
      "dependsOn": ["teamsfx: frontend start"],
      "dependsOrder": "parallel"
    },
    {
      "label": "frontend npm install",
      "type": "shell",
      "command": "npm install --no-audit",
      "options": {
        "cwd": "${workspaceFolder}/tabs"
      }
    }
  ]
}

Answer 1

teamsfx: frontend start is a task contributed by Teams Toolkit extension using Visual Studio Code Extension API: Task Provider. Specifically, from TeamsFx GitHub repo:

1. the definition of this task is in https://github.com/OfficeDev/TeamsFx/blob/ms-teams-vscode-extension%403.8.0/packages/vscode-extension/package.json#L717-L729.
2. the implementation of this task is in https://github.com/OfficeDev/TeamsFx/blob/ms-teams-vscode-extension%403.8.0/packages/vscode-extension/src/debug/teamsfxTaskProvider.ts#L116-L129.