Hello World with Blazor - Teams

Blazor lets you build interactive web UIs using C#, instead of JavaScript.

You can create a tab app and a bot app with Blazor and the latest version of Visual Studio.

Screenshot of the Blazor app displaying the tab, Bot, and Message Extension output after you've successfully completed the step-by-step guide.

Note

Teams Toolkit doesn't support the message extension capability.

Prerequisites

8 minutes remaining

Here's a list of tools you require for building and deploying your app.

	Install	For using...
	Visual Studio 2022	You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version.
	Microsoft Teams	Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call all in one place.
	Microsoft Edge (recommended) or Google Chrome	A browser with developer tools.
	Dev tunnel	Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. or You can also use ngrok as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).

After you've installed the required tools, set up the development environment.

Install Microsoft Teams Toolkit

The Teams Toolkit helps simplify the development process with tools to provision and deploy cloud resources for your app, publish to the Microsoft Teams Store, and more.
You can use the toolkit with Visual Studio, or CLI (command-line interface) called teamsfx.

Visual Studio
Command line

Download the latest version of Visual Studio.
Open vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe from your download folder.
Select Continue in the Visual Studio Installer page to configure your installation.
Select ASP.NET and web development under Workloads.
Select Microsoft Teams development tools under Installation details.
Select Install.

Your Visual Studio is installed in a few minutes.

To install the TeamsFx CLI, use the npm package manager:

npm install -g @microsoft/teamsfx-cli

Depending on your configuration, you may need to use sudo to install the CLI:

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

This condition is more common on Linux and macOS systems.

Ensure you add the npm global cache to your PATH. This step is normally done as part of the Node.js installer.

You can use the CLI with the teamsfx command. Verify that the command is working by running teamsfx -h.

Caution

Before you can run TeamsFx in PowerShell terminals, you must enable the remote signed execution policy for PowerShell.

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 upload and test your custom app. Let's verify if you're ready to develop with the tenant.

Enable custom app upload

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

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

Note

Contact Teams administrator, if you don't have the option to upload a custom app.

Create a free Teams developer tenant (optional)

If you don't have a Teams developer account, you can get it for 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 the tools to set up your account. Next, let's set up your development environment and start building! Select the app you want to create first.

Create project workspace for your tab app

7 minutes remaining

Open Visual Studio.
Select Create a new project.

The Create a new project page appears.
In the search box, enter Microsoft Teams. From the search results, select Microsoft Teams App.
Select Next.
Enter Project name and select Create.
Select Tab as the capability for your app.
Select Create.

Your Teams tab app is created in a few seconds.

A quick recap of creating a Teams tab app.

Watch this short recap for creating a Teams tab app.

Graphical representation shows the process of creating the Teams tab app.

Take a tour of the source code for Teams tab app

After project creation, you have the components to build a basic personal app. You can view the project directory structure in the Solution Explorer pane of the Visual Studio.

Screenshot of Solution explorer displaying the components to build a basic personal app.

Teams Toolkit creates a scaffolding for your project based on the capabilities you selected. Among other files, Teams Toolkit maintains:

Folder name	Contents
App icons	The app icons are stored as PNG files in `color.png` and `outline.png`.
`manifest.json`	App manifest (previously called Teams app manifest) for publishing through the Developer Portal for Teams is stored in `Properties/manifest.json`.
`BackendController.cs`	A backend controller is provided in `Controllers/BackendController.cs` for assisting with authentication.
`Pages/Tab.razor`	App manifest for publishing through the Developer Portal for Teams is stored in `Properties/manifest.json`.
`TeamsFx.cs` and `JS/src/index.js`	The content is used for initializing communications with the Teams host.

You can add backend functionality by adding other ASP.NET Core controllers to your application.

Build and run your first Teams tab app

6 minutes remaining

After you set up your project workspace with Teams Toolkit, build your tab project.

To build and run your app:

Select Project > Teams Toolkit > Prepare Teams App Dependencies.
Sign in to your Microsoft 365 account and then select Continue.
Select Debug > Start Debugging or select F5.
If a Security Warning dialog appears, select Yes.
Select Add to install your app in Teams.
Select Open to open the app in personal scope.

Alternatively, you can either search and select the required scope or select a channel or chat from the list, and move through the dialog to select Go.

Congratulations, your first tab app is running in your local environment!
To let your app retrieve user details using Microsoft Graph, select Authorize.
Select Accept.
Your photograph and details appear in your Personal Tab.

You can do normal debugging activities, such as setting breakpoints, as if it were any other web application. The app supports hot reloading. If you change any file within the project, the page reloads.
Stop debugging in Visual Studio.

Preview your first Teams tab app

5 minutes remaining

You've learned to create, build, and run Teams app with tab capability. The following final steps are to deploy your app on Azure and Preview in Teams:

Let's deploy the first app with tab capability on Microsoft Azure using Teams Toolkit.

To provision your tab app in Azure

Select Project > Teams Toolkit > Provision in the Cloud.
Enter the subscription and resource group details in the Provision dialog:
1. Select your Subscription name from the dropdown list.
2. Select your Resource group from the dropdown list.
3. If you don't have an existing resource group, you can create a new resource group. To create a new resource group, select New > enter the resource name > select OK. Select a location from the new resource group location dropdown list.
4. Select Provision.
A Teams Toolkit warning dialog appears.
Select Provision.

It takes a few minutes for your resource group to provision in the cloud.
Select OK.
Select View Provisioned Resources to view on Azure portal.
Sign in to your Azure portal.

Your app-dev-rg appears.

Your resources are provisioned in the Azure portal.

To deploy your tab app to cloud

Select Project > Teams Toolkit > Deploy to the Cloud....
Select OK.

Your tab app is successfully deployed to the cloud!

To preview your tab app in Teams

Select Project > Teams Toolkit > Preview in Teams.
Select Add.

Congratulations, your first tab app is running in your Azure environment!
Select Authorize to let your app retrieve user details using Microsoft Graph.
Select Accept.

Your photograph and details appear in your Personal Tab.

Create project workspace for your bot app

4 minutes remaining

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

Screenshot displaying workspace for your bot app.

Create your bot project

Open Visual Studio.
Select Create a new project.

The Create a new project page appears.
In the search box, enter Microsoft Teams. From the search results, select Microsoft Teams App.
Select Next.

The Configure your new project window appears.
Enter Project name and select Create.

The Create a new Teams application window appears.
Select Teams app feature.
Select the Command Bot app as the capability for your app.
Select Create.

Your Teams bot app is created in a few seconds.

A quick recap of creating a Teams bot app.

Watch this short recap for creating a Teams bot app.

Graphical representation shows the process of creating the jTeams bot app.

Take a tour of the source code for Teams bot app

After project creation, you have the components to build a basic personal app. You can view the project directory structure in the Solution Explorer area of the latest Visual Studio.

Screenshot of Solution Explorer with BlazorApp highlighted.

Teams Toolkit creates a scaffolding for your project based on the capabilities you selected. Among other files, Teams Toolkit maintains:

Folder name	Contents
App icons	The app icons are stored as PNG files in `color.png` and `outline.png`.
`manifest.json`	The app manifest for publishing through the Developer Portal for Teams is stored in `Properties/manifest.json`.
`BackendController.cs`	A backend controller is provided in `Controllers/BackendController.cs` for assisting with authentication.
`TeamsFx.cs` and `JS/src/index.js`	The content is used for initializing communications with the Teams host.

You can add backend functionality by adding other ASP.NET Core controllers to your application.

Build and run your first bot app

3 minutes remaining

To build and run your app locally:

Create a tunnel

dev tunnel
ngrok

Open Visual Studio.
Select Create a new project.
In the search box, enter ASP.NET. From the search results, select ASP.NET Core Web App.
Select Next.
Enter Project name and select Next.
Select Create.

An overview window appears.
In the debug dropdown list, select Dev Tunnels (no active tunnel) > Create a Tunnel....

A pop-up window appears.
Update the following details in the pop-up window:
1. Account: Enter a Microsoft or GitHub account.
2. Name: Enter a name for your tunnel.
3. Tunnel Type: From the dropdown list, select Temporary.
4. Access: From the dropdown list, select Public.
Select OK.

A pop-up window appears showing that dev tunnel is successfully created.
Select OK.

You can find the tunnel you've created in the debug dropdown list as follows:
Select F5 to run the application in the debug mode.
If a Security Warning dialog appears, select Yes.

A pop-up window appears.
Select Continue.

The dev tunnel home page opens in a new browser window and the dev tunnel is now active.
Go to Visual Studio, select View > Output.
From the Output console dropdown menu, select Dev Tunnels.

The Output console shows the dev tunnel URL.

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

The window shows the HTTPS URL.

Screenshot shows the ngrok HTTPS URL.

Select Project > Teams Toolkit > Prepare Teams App Dependencies.
Sign in to your Microsoft 365 account and then select Continue.
Select Debug > Start Debugging or select F5 to run your app in debug mode.
Select Add.
Select Open to open the app in personal scope.

Alternatively, you can either search and select the required scope or select a channel, chat, or meeting from the list, and move through the dialog to select Go.

Now the bot is successfully running on Teams! After the app is loaded, a chat session with the bot opens.

You can type helloworld to show an introduction card for an Adaptive Card.

You can do normal debugging activities, such as setting breakpoints, as if it were any other web application. The app supports hot reloading. If you change any file within the project, the page reloads.

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

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

Preview your first bot app

2 minutes remaining

To provision your bot app in Azure

Select Project > Teams Toolkit > Provision in the Cloud.
Enter the subscription and resource group details in the Provision dialog:
1. Select your Subscription name from the dropdown list.
2. Select your Resource group from the dropdown list.
3. If you don't have an existing resource group, you can create a new resource group. To create a new resource group, select New > enter the resource name > select OK. Select a location from new resource group location dropdown list.
4. Select Provision.
  
  A Teams Toolkit warning dialog appears.
Select Provision.

It takes a few minutes for your resource group to provision in the cloud.
After the provision is complete, select OK.
Select View Provisioned Resources to view on Azure portal.
Sign in to your Azure portal.

Your app-dev-rg appears.

Your resources are provisioned in the Azure portal!

To deploy your bot app to cloud

Select Project > Teams Toolkit > Deploy to the Cloud.
Select OK.

Your bot app is successfully deployed to the cloud!

To preview your bot app in Teams

Select Project > Teams Toolkit > Preview in Teams.
Select Add.

Now the bot is successfully running on Teams! After the app is loaded, a chat session with the bot opens.
You can type helloworld to show an introduction card for an Adaptive Card.

Congratulations!

100% complete!

You've done it!

You've created two apps, each with a different capability: a tab app and a bot app.

You've completed the tutorial to build apps with Blazor.

Udostępnij za pośrednictwem

Build your first app using Blazor