Create a new Teams project

In this section, you can learn how to create a new Teams project using Microsoft Visual Studio Code and Visual Studio.

Create a new Teams project for Visual Studio Code

You can build a new Teams project by selecting Create a new Teams app in Teams Toolkit. You can create the following types of apps in Teams Toolkit:

App Types Definition
Basic Teams apps Basic Teams apps are tab, bot, or message extension that you can create and customize based on your needs.
Scenario-based Teams apps Scenario-based Teams apps are notification bot, command bot, workflow bot, SSO-enabled tab, or SPFx tab app and these are suitable for one particular scenario. For example, a notification bot is suitable to send notifications and not used for chat.

Create a new Teams app

The steps to create a new Teams app is similar for all types of apps except SPFx tab app, workflow bot, and notification bot. The following steps help you to build a new tab app:

To create an app

  1. Open Visual Studio Code.

  2. Select the Teams Toolkit > Create a new Teams app.

    Location of the Create New Project link in the Teams Toolkit sidebar.

  3. Ensure that Tab is selected as your app capability.

    Select App Capability

  4. Select JavaScript as the programming language.

    Screenshot showing how to select the programming language.

  5. Select Default folder to store your project root folder in default location.

    Select default location

    The following steps guide you to change the default location:

    1. Select Browse.

      Select browse for storage

    2. Select the location for project workspace.

    3. Select the Select Folder.

      select-folder for storage

  6. Enter a suitable name for your app, such as helloworld as the application name. Ensure that you use only alphanumeric characters. Press Enter.

    Screenshot showing where to enter the app name.

  7. By default, project opens in new window after 10 seconds. If you want to open in current window, select Open in current window.

    New window notification

    The Teams tab app is created in a few seconds.

    Screenshot showing the app created.

Directory structure for different app types

Teams Toolkit provides all components for building an app. After creating the project, you can view the project folders and files under EXPLORER.


Directory structure for basic Teams app

You have three different types of basic Teams apps and the directory structure looks similar for all types of apps. The following example shows a basic Teams tab app directory structure:

Folder name Contents
.fx\configs Configuration files that you can customize for the Teams app.
- .fx\configs\azure.parameters.<envName>.json Parameters file for Azure bicep provision for every environment.
- .fx\configs\config.<envName>.json Configuration file for every environment.
- .fx\configs\projectSettings.json Global project settings that apply to all environments.
tabs Code for the Tab capability needed at runtime, such as the privacy notice, terms of use, and configuration tabs.
- tabs\src\index.jsx Entry point for the front-end app, where the main app component is rendered with ReactDOM.render().
- tabs\src\components\App.jsx Code for handling URL routing in the app. It calls the Microsoft Teams JavaScript client library to establish communication between your app and Teams.
- tabs\src\components\Tab.jsx Code to implement the UI of your app.
- tabs\src\components\TabConfig.jsx Code to implement the UI that configures your app.
templates\appPackage App manifest template files, and the app icons: color.png and outline.png.
- templates\appPackage\manifest.template.json App manifest for running the app in local or remote environment.
templates\azure bicep template files.

Note

If you have a bot or message extension app, relevant folders are added to the directory structure.

To learn more about the directory structure of different types of basic Teams apps, see the following table:

App Type Links
For tab app Build your first tab app using JavaScript
For bot app Build your first bot app using JavaScript
For message extension app Build your first message extension app using JavaScript

Directory structure for scenario-based Teams app

You have five different types of scenario-based Teams apps and the directory structure looks similar for all types of apps. The following example shows a scenario-based notification bot Teams app directory structure:

The new project folder contains the following content:

Folder name Contents
.fx Project level settings, configuration, and environment information.
.vscode VS code files for local debug.
bot The bot source code.
templates Templates for Teams app manifest and corresponding Azure resources.

The core notification implementation in bot folder and it contains:

File name Contents
src\adaptiveCards\ Templates for Adaptive Card.
src\internal\ Generated initialize code for notification functionality.
src\index.ts The entry point to handle bot messages and send notifications.
.gitignore File to exclude local files from the bot project.
package.json The npm package file for the bot project.

Note

If you have a command bot, workflow bot, SSO-enabled tab, or SPFx tab app, relevant folders are added to the directory structure.

To learn more about the directory structure of different types of scenario-based Teams apps, see the following table:

App Type Links
For notification bot app Send notification to Teams
For command bot app Build command bot
For workflow bot app Create Teams workflow bot
For SPFx tab app Build a Teams app with SPFx

Directory structure for multi-capability app

You can add more features to your existing Teams app by using Add features. For example, if you add a bot app to the existing tab app, Teams Toolkit adds the bot folder with relevant files and code.

The following image shows the directory structure of tab app:

Tab app directory structure

The following image shows the directory structure of tab app with bot feature:

Tab app with bot app directory structure

Create new Teams app in Visual Studio

Teams Toolkit provides Microsoft Teams app templates in Visual Studio to create Teams apps. You can search and select the Teams app template that you require when you create a new project. You can have Teams app templates for creating:

  • Tab app
  • Command bot
  • Notification bot
  • Message Extension app

Prerequisites

  Install For using...
  Required  
  Visual Studio latest version You can install the enterprise edition of Visual Studio, and install the ASP.NET and web development workload and Microsoft Teams Development Tools.
  Teams Toolkit A Visual Studio extension that creates a project scaffolding for your app. Use latest version.
  Microsoft Teams Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place.
  Prepare your Microsoft 365 tenant Access to Teams account with the appropriate permissions to install an app.

Create a new Teams app

The steps to create a new Teams app are similar for all types of apps except notification bot. The following steps help you to create a new tab app:

  1. Open Visual Studio.

  2. Create a new project by using one of the following two options:

    • Select Create a new project under Get started helps you to select a project template with code scaffolding.

      Create new project with code from get started

    • Select Continue without Code to create project without code scaffolding. Select File > New > Project in Visual Studio.

      Create new project from file menu

    The Create a new project window appears.

  3. Enter teams in the search box and from the list, select Microsoft Teams App.

    Search and choose microsoft teams app

  4. Select Next.

    The Configure your new project window appears.

    Name your application

    1. Enter a suitable name for your project.

      Note

      The project name you are entering is automatically filled in the Solution name. If you want, you can change the solution name with no affect on the project name.

    2. Select the folder location where you want to create the project workspace.

    3. Enter a different solution name, if you want.

    4. If required, check the checkbox to save the project and solution in the same folder. For this tutorial, you don't need this option.

    5. Select Create.

    The Create a new Teams application window appears.

  5. Ensure Tab is selected, then select Create.

    Select the teams app type

    Note

    You can select the required type of Teams app for your project.

    The GettingStarted with Welcome to Teams Toolkit window appears.

    Select the Getting Started teams toolkit

Directory Structure

Teams Toolkit provides all components for building an app. After creating the project, you can view the project folders and files under Solution Explorer.

  • Directory structure for basic Teams apps

    Select the tab Solution Explorer teams toolkit

  • Directory structure for scenario-based Teams apps

    Select the Solution Explorer teams toolkit

Teams app templates in Teams Toolkit for Visual Studio

You can see Teams app templates already populated in Teams Toolkit for various Teams app types. The following table lists all the templates available:

Teams app templates Description
Notification Bot Notification bot app can send notifications to your Teams client. There are multiple ways to trigger the notification. For example, trigger the notification by HTTP request, or by time. You can select triggered notification based on your business scenario.
Command Bot You can type a command to interact with the bot using the command bot app.
Tab Tab app shows a webpage inside Teams, and it enables single sign-on (SSO) using Teams account.
Message Extension Message extension app implements simple features like creating an Adaptive Card, searching Nugget packages, unfurling links for the dev.botframework.com domain.

Note

After the project is created, Teams Toolkit automatically opens GettingStarted window. You can see the instructions in GettingStarted window and check out the different features in Teams Toolkit.

See also