Hello World with C# - Teams

Start Microsoft Teams app development by building your first app with a tab, a bot, and a message extension capability.

This app will have all capabilities and each has its own UI and UX:

Diagram showing this app has three features.

In this tutorial, you'll learn:

How to set up a new project.
How to build apps with tab capability using C# and Visual Studio.

Prerequisites

4 minutes remaining

Here's a list of tools you'll need to install for building and deploying a Teams app.

	Install	For using...
Required
	Visual Studio 2022 version 17.3 Install one of the following two workloads: • ASP.NET and web development • .NET Core cross-platform development	You can install the enterprise version in Visual Studio 2022, and install the workloads.
	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.

Install Teams Toolkit

Teams Toolkit helps simplify the development process with tools to create a project scaffolding for your app. It creates the necessary directory structure for all selected capabilities with the required files in place, ready to build the project.

Teams Toolkit is available as an extension in Visual Studio.

You can download the latest Visual Studio installer from the Visual Studio download page.

Note

You'll need to first install the Visual Studio installer before installing Visual Studio.

After you open the Visual Studio installer, in the pop-up workloads window.

Select the box ASP.NET and web development workload.
Select the box Microsoft Teams development tools in the installation details panel.
Select Install.
Select Launch to open Visual Studio.

Important

You're recommended to download Visual Studio 2022 17.3.0 version, since Teams Toolkit for Visual Studio is GA in this version. This article is written for Visual Studio 2022 17.3.0 version. Teams Toolkit version 17.3.* or higher.
Select Extensions > Manage Extensions.

The following Manage Extension window appears:
Select Installed and you can see Teams Toolkit extension installed.

Set up your Teams development tenant

A tenant is like a space, or a container for your organization in Teams, where you chat, share files, and run meetings. This space is also where you sideload and test your app. Let's verify if you're ready to develop with the tenant.

Check for sideloading option

After creating the app, you must load your app in Teams without distributing it. This process is known as sideloading. Sign in to your Microsoft 365 account to view this option.

Note

Sideloading is necessary for previewing and testing apps in Teams local environment. If it isn't enabled, you will not be able to preview and test your app in Teams locally.

Do you already have a tenant, and do you have the admin access? Let's check if you really do!

Verify if you can sideload apps in Teams:

In the Teams client, select Store icon.
Select Manage your apps.
Look for the option to Upload a custom app. If you see the option, sideloading apps is enabled.

Note

If Teams doesn't show the option to upload a custom app, talk to your Teams administrator.

Create a free Teams developer tenant (optional)

If you don't have a Teams account, you can get it free. Join the Microsoft 365 developer program!

Go to the Microsoft 365 developer program.
Select Join Now and follow the onscreen instructions.
In the welcome screen, select Set up E5 subscription.
Set up your administrator account. After you finish, the following screen appears:
Sign in to Teams using the administrator account you just set up. Verify that you have the Upload a custom app option in Teams.

Get a free Azure account

If you wish to host your app or access resources in Azure, you must have an Azure subscription. Create a free account before you begin.

Now you’ve got all tools and set up your account. Next, let's set up your development environment and start building! Select the app you want to do first

Create project workspace for your tab app using C#

3 minutes remaining

Start Microsoft Teams app development by creating your first app. This app uses the tab capability.

If the prerequisites are in place, let's begin!

The following steps help you to create project workspace for your tab app in Visual Studio

Open Visual Studio.

The following page appears:
Select Create a new project.
Enter Teams in the search box.
Select Microsoft Teams App and select Next.

Configure your new project page appears.
Enter the following details to configure your new project.
1. Enter required project name in Project name.
2. Select required location to save project files and folders.
3. Select Create.
Create a new Teams application window displays:
Select Tab and select Create.

Now Teams tab app is created in a few seconds.

Take a tour of tab app source code

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

Solution Explorer

Although you're free to choose any UI framework (or not to use any), this sample template code provides a scaffolding with React components.

Among other items in this directory structure, the Toolkit maintains:

Folder name	Contents
`.fx/configs`	Configuration files that user can customize for the Teams app.
- `.fx/configs/config.<envName>.json`	Configuration file for every environment.
- `.fx/configs/azure.parameters.<envName>.json`	Parameters file for Azure BICEP provision for every environment.
- `.fx/configs/projectSettings.json`	Global project settings that apply to all environments.
- `.fx/states`	Provision output that is generated by Teams Toolkit. The toolkit creates this folder after you provision resources for your app.
- `.fx/states/state.<envName>.json`	Provision output file for every environment.
- `.fx/states/<env>.userdata`	Sensitive user data for the provision output for every environment.
`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

Build and run your first tab app using C#

2 minutes remaining

After you set up your project workspace with Teams Toolkit, build your tab app. You'll need to sign in to your Microsoft 365 account.

Use your Microsoft 365 account to sign in to Teams. If you're using a Microsoft 365 developer program tenant, the admin account you set up while registering is your Microsoft 365 account.

Right-click on Mytabapp under Solution Mytabapp.
Select Teams Toolkit > Prepare Teams App Dependencies.
Select Microsoft 365 Account and select Continue.

Build and run your app locally in Visual Studio

To build and run your app locally:

From Visual Studio, select F5 or Debug > Start Debugging to run the application in debug mode.

Teams web client opens in a browser window.
Sign in with your Microsoft 365 account, if prompted.
Select Add when prompted to sideload the app onto Teams on your local machine.

Congratulations, your first tab app is running on Teams!

Learn how to troubleshoot if your app doesn't run locally.

To successfully run your app in Teams, ensure that you've enabled sideloading in your Teams account. You can learn more about sideloading in the Prerequisites section.

Congratulations!

100% complete!

You've done it!

You've created a tab app.

Now that you've learned to create a basic app.

That's it! Teams Toolkit adds the scaffolding for the new capability to your app's directory structure.

You've completed the tutorial to build tab app using C#.

Build your first app using C#