Overview of the Basic Tab template

This template showcases how Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.

Get started with the Basic Tab template

Prerequisites

To run the basic tab template in your local dev machine, you will need:

  1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
  2. In the Account section, sign in with your Microsoft 365 account if you haven't already.
  3. Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug in Teams (Edge) or Debug in Teams (Chrome).
  4. When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.

Congratulations! You are running an application that can now show a basic web page in Teams, Outlook and the Microsoft 365 app.

Basic Tab

What's included in the template

Folder Contents
.vscode VSCode files for debugging
appPackage Templates for the Teams application manifest
env Environment files
infra Templates for provisioning Azure resources
src The source code for the Teams application

The following files can be customized and demonstrate an example implementation to get you started.

File Contents
src/static/scripts/teamsapp.js A script that calls teamsjs SDK to get the context of on which Microsoft 365 application your app is running.
src/static/styles/custom.css css file for the app.
src/static/views/hello.html html file for the app.
src/app.js Starting a restify server.

The following are Teams Toolkit specific project files. You can visit a complete guide on Github to understand how Teams Toolkit works.

File Contents
teamsapp.yml This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration Stage definitions.
teamsapp.local.yml This overrides teamsapp.yml with actions that enable local execution and debugging.

Extend the Basic Tab template

Following documentation will help you to extend the Basic Tab template.