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.

   

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

   

4. Select JavaScript as the programming language.

   

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

   

   The following steps guide you to change the default location:

   1. Select Browse.

      

   2. Select the location for project workspace.

   3. Select the Select Folder.

      

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

   

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

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.

     

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

     

   The Create a new project window appears.

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

   

4. Select Next.

   The Configure your new project window appears.

   

   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.

   

   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