MS Teams Toolkit.md

How to integrate fast-serve with MS Teams Toolkit

The pre-configured sample is available here. You can also see the commit details to figure out what was changed. Below is the detailed guide.

1. Configure your SPFx solution with fast-serve like you normally do.

Note

You should run spfx-fast-serve from your SPFx solution folder, not from the root MS Teams Toolkit project. Normally SPFx solution is located inside src folder, i.e. [your root MS Team Toolkit project]/src.

2. In the root of your MS Teams Toolkit project, open .vscode/tasks.json and add two tasks:

  {
    "label": "Start Teams App with fast serve",
    "dependsOn": [
      "Validate prerequisites",
      "Provision",
      "fast serve"
    ],
    "dependsOrder": "sequence"
  }

and

  {
    "label": "fast serve",
    "type": "shell",
    "command": "npx",
    "args": [
      "fast-serve"
    ],
    "problemMatcher": [
      {
        "pattern": [
          {
            "regexp": ".",
            "file": 1,
            "location": 2,
            "message": 3
          }
        ],
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^.*Starting gulp.*",
          "endsPattern": "^.*Compiled successfully|webpack compiled.*"
        }
      }
    ],
    "isBackground": true,
    "options": {
      "cwd": "${workspaceFolder}/src"
    }
  },

By doing this we create fast-serve task config, which will be used by our launch configuration.

3. Open .vscode/launch.json and add two more commands under compounds array:

  {
      "name": "Teams workbench (Edge) with fast serve",
      "configurations": [
          "Start Teams workbench (Edge)"
      ],
      "preLaunchTask": "Start Teams App with fast serve",
      "presentation": {
          "group": "forteams",
          "order": 3
      },
      "stopAll": true
    },
    {
      "name": "Teams workbench (Chrome) with fast serve",
      "configurations": [
          "Start Teams workbench (Chrome)"
      ],
      "preLaunchTask": "Start Teams App with fast serve",
      "presentation": {
          "group": "forteams",
          "order": 4
      },
      "stopAll": true
  },

Above code adds new configuration options for local debug scenarios.

4. Click on the MS Teams Toolkit extension in VSCode, under Environment select local -> debug. You will see two additional options:

Select the one you prefer.