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
Open Visual Studio Code.
Select the Teams Toolkit > Create a new Teams app.
Ensure that Tab is selected as your app capability.
Select JavaScript as the programming language.
Select Default folder to store your project root folder in default location.
The following steps guide you to change the default location:
Select Browse.
Select the location for project workspace.
Select the Select Folder.
Enter a suitable name for your app, such as helloworld as the application name. Ensure that you use only alphanumeric characters. Press Enter.
By default, project opens in new window after 10 seconds. If you want to open in current window, select Open in current window.
The Teams tab app is created in a few seconds.
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:
The following image shows the directory structure of tab app with bot feature:
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:
Open Visual Studio.
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.
Select Continue without Code to create project without code scaffolding. Select File > New > Project in Visual Studio.
The Create a new project window appears.
Enter teams in the search box and from the list, select Microsoft Teams App.
Select Next.
The Configure your new project window appears.
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.
Select the folder location where you want to create the project workspace.
Enter a different solution name, if you want.
If required, check the checkbox to save the project and solution in the same folder. For this tutorial, you don't need this option.
Select Create.
The Create a new Teams application window appears.
Ensure Tab is selected, then select Create.
Note
You can select the required type of Teams app for your project.
The GettingStarted with Welcome to Teams Toolkit window appears.
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
Directory structure for scenario-based Teams apps
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
- Teams Toolkit Overview
- Build a Teams app with Blazor
- Build a Teams app with C# or .NET
- Prerequisites for all types of environment and create your Teams app
- Prepare to build apps using Microsoft Teams Toolkit
- Provision cloud resources using Visual Studio
- Deploy Teams app to the cloud using Visual Studio
Feedback
Submit and view feedback for