Build Microsoft Teams Tab Extensions with React Fluent UI

Discover how to create a powerful Teams Tab Extension using React and Fluent UI in this step-by-step guide. From setting up your development environment to integrating Fluent UI components seamlessly, this tutorial covers everything you need to know to build a feature-rich extension for Microsoft Teams. Enhance collaboration and productivity for your team with this comprehensive walkthrough.

Prerequisites

Before we dive into the development process, ensure you have a basic understanding of React and its core concepts, as well as a fundamental of JavaScript and HTML.

You'll also require the following tools.

1. Node.js, supported versions: 18, 20
2. A Microsoft 365 account for the development
3. Set up your dev environment for extending Teams apps across Microsoft 365. Please note that after you enroll your developer tenant in Office 365 Target Release, it may take a couple of days for the enrollment to take effect.
4. Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI

Step 1. Installing Teams Toolkit

First, open Visual Studio Code and create a new folder for your app. Then, navigate to the Extensions panel on the left side. In the search bar at the top, search for "Teams Toolkit" and select it from the search results. Alternatively, you can download the Teams Toolkit extension directly from this link. Once installed, you're ready to proceed with building your Teams Tab Extension.

Step 2. Create Your App

To start, click on the Teams Toolkit tab in the left-side menu of Visual Studio Code. Then, click the "Create App" button. This will display a menu with several options for the types of apps you can create.

• Custom Copilot: Integrate AI-powered features into your app to assist users with tasks and provide intelligent recommendations.
• Bot: Create a chatbot that can interact with users through messages, providing automated responses and services.
• Tab: Develop a tabbed interface within Microsoft Teams to showcase custom content and tools, enhancing collaboration and productivity.
• Message Extension: Build extensions that allow users to interact with your app directly from the Teams message compose box, enhancing communication capabilities.
• Outlook Add-in: Develop an add-in for Outlook to extend its functionality with custom features and integrations.

For now, we will focus on creating a Tab. To proceed, simply click the "Tab" button.

• Basic Tab: A simple tab template to get you started with the fundamental structure and functionality of a Teams Tab application. This is ideal for learning the basics or for a lightweight project.
• React with Fluent UI: This template sets up a Teams Tab using React and Fluent UI, Microsoft's front-end framework for building consistent, responsive, and accessible web components. It’s perfect for creating modern and visually appealing interfaces.
• Dashboard: A template designed to create a dashboard within Teams. It includes pre-built components and layouts to display various data and insights in a structured manner. Ideal for applications that need to present a lot of information at a glance.
• SPFx (SharePoint Framework): This template is specifically for building Teams Tabs that integrate with SharePoint. It provides tools and libraries for leveraging SharePoint data and services within your Teams application, making it suitable for organizations heavily using SharePoint.

To proceed with our example, select "React with Fluent UI." After that, choose "TypeScript" when prompted to select the language, and then select the folder where you want the project to be created.

After selecting "React with Fluent UI" and choosing "TypeScript" as the language, you will be prompted to choose a folder where your project will be created. Navigate to your desired directory and select it. Then, provide a name for your application.

Now, your extension is ready to run.

Step 3. Run our team extension

To verify that a Microsoft 365 account for development is added, follow these steps.

1. Open Visual Studio Code: Ensure your project is open in VS Code.
2. Navigate to Teams Toolkit: Click on the Teams Toolkit tab in the left sidebar.
3. Check Account: Verify that your Microsoft 365 account is listed under the "Accounts" section.

Here's an example image for reference.

If your account is not listed, you will need to sign in with your Microsoft 365 developer account. To do this, click the "Sign In" button and follow the prompts.

After that, press the F5 button to run your app. This will provision and deploy your local app to the developer portal. You can check the developer portal at Microsoft Teams Developer Portal.

The provisioning and deployment process may take 1 or 2 minutes.

Once everything is set up, check your local environment, as shown in the image below.

This will confirm that your Teams app is running successfully in your local development environment.

Once completed, your app will prompt you to log in to your Teams account.

Once you sign in with your Microsoft 365 account credentials, your app will run in Teams. Simply click the "Add" button to add your extension to your Teams app. Refer to the image below for guidance.

This will add your extension to your Teams app, and you can start using it immediately.

Now that your extension is successfully running in Teams, you can make changes to your code in Visual Studio Code. Thanks to the debug mode, your application will automatically hot reload whenever you save your changes. This streamlined development process allows you to quickly iterate on your extension without the need for manual refreshing or restarting.

Step 4. Deploy your extension

Once your development work is complete, you can proceed to deploy your app. Follow these steps

1. Click the "Provision" button to provision your app.
2. Select the environment where you want to deploy your app.
3. Choose the account that has Azure credits for deployment.
4. After the provisioning is completed, click the "Deploy" button.
5. Select the environment again for deployment.

This process will deploy your app to the specified environment,

After completing the deployment process, navigate to the Microsoft Teams Developer Portal. Click on your app to access its features and information. At the bottom, under the "Deploy" section, you'll find three options.

1. App Package: Download your app package from this option.
2. Publish Your App to Your Organization: Select this option to publish your app within your organization.
3. Publish to Teams Marketplace: Choose this option to publish your app to the Teams Marketplace for wider distribution.

Select the appropriate option based on your deployment needs and follow the prompts to deploy your app accordingly.

Conclusion

This article has provided a comprehensive guide to creating a Microsoft Teams Tab Extension using React with Fluent UI. By following the step-by-step instructions outlined here, developers can quickly set up their development environment, create a new app, and deploy it to Teams. Leveraging the power of React and Fluent UI, developers can build modern and visually appealing extensions that enhance collaboration and productivity within Teams. Whether you're a seasoned developer or just starting out, this tutorial equips you with the knowledge and tools needed to create and deploy custom Teams Tab Extensions with ease. Happy coding, and may your Teams extensions bring value to users across the organization!

If you have any queries or need further clarification, please don't hesitate to let me know in the comment section below. I'm here to help!