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

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:
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.
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.