Hello World Tab in Microsoft Teams using yo Teams

This article explains how to create a Hello World Tab in Microsoft Teams using the yo Teams generator.
The Yeoman Teams generator simplifies the setup process for creating custom Teams apps that include tabs, bots, and connectors.

🧱 Prerequisites

Make sure the following tools are installed on your machine:

• Node.js (LTS version recommended)
• Gulp CLI
• Yeoman
• Visual Studio Code
• Microsoft 365 Developer Account

Install dependencies globally:

npm install -g yo gulp-cli generator-teams

🔐 Implement Single Sign-On (SSO)

To enable SSO for Teams tabs, first register your app in Azure Active Directory.

Register an App in Azure AD

1. Go to the Azure Portal → Azure Active Directory → App Registrations → New Registration.
2. Provide an app name, select Accounts in any organizational directory, and click Register.

After registration, note the Application (Client) ID — it will be used later.

Prepare Redirect URI

Add a redirect URI under Authentication:

https://localhost:3007/auth-end

This URL allows local testing with the Teams tab authentication flow.

Configure API Permissions

In the API Permissions tab, click Add a Permission → Microsoft Graph → Delegated Permissions and select:

• email
• offline_access
• openid
• profile
• User.Read

Save and grant admin consent.

⚙️ Create a New Teams Project

Run the Yeoman command to create a new Teams app project:

yo teams

When prompted:

• Enter your project name (e.g., teams-yo-helloworld)
• Choose Tab as the project type
• Select React as the framework
• Enable Single-Sign-On support (optional)

💻 Run the App Locally

Build and run the app using:

gulp build
gulp serve

Your local server will be available at:

https://localhost:3007/

When prompted by Teams, load the app’s manifest file (manifest/manifest.json) to sideload it into your Teams environment.

🧩 Add and Test in Microsoft Teams

1. Open Microsoft Teams → Apps → Upload a custom app.
2. Select your app package (.zip file) generated in the /package folder.
3. Add it to a Team or Chat to view your Hello World tab.

You should now see a simple tab interface that displays a "This is your tab" message.

📂 GitHub Sample Project

✅ Summary

The yo Teams generator provides a quick way to scaffold Microsoft Teams apps with React and TypeScript support.
By adding Azure AD authentication, you can extend your app to include secure user data and SSO-based experiences.