Hello World web part in Microsoft Teams using SPFx

This article walks through the process of creating your first Hello World web part using the SharePoint Framework (SPFx) and extending it to run within Microsoft Teams.
You’ll learn how the same SPFx solution can function both in SharePoint and Teams without additional code changes.

⚙️ Create a new web part project

Run the following command to create a new web part using the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

When prompted, choose these options:

• What is your solution name? → spfx-teams-helloworld
• Which baseline packages do you want to target? → SharePoint Online only (latest)
• Where do you want to place the files? → Use the current folder
• Do you want to allow the tenant admin the choice...? → Yes
• Which type of client-side component to create? → WebPart
• What’s your Web part name? → HelloWorld
• Framework to use? → React

📦 Install dependencies

After the solution is created, install the required packages:

npm install

🧩 HelloWorldWebPart.tsx

In the React component, replace the existing render method with the following simple code to display a welcome message:

import * as React from 'react';
import styles from './HelloWorld.module.scss';

export interface IHelloWorldProps {
  description: string;
}

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <div className={styles.helloWorld}>
        <h2>Welcome to the SPFx Hello World WebPart!</h2>
        <p>This web part works in both SharePoint and Microsoft Teams.</p>
      </div>
    );
  }
}

🧠 Add Teams support in manifest

Update the manifest.json file to ensure that the solution is enabled for Microsoft Teams:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-component-manifest.schema.json",
  "id": "e5a776a5-5f72-43a3-8b1b-2b31f7c82680",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",
  "supportsFullBleed": true,
  "supportedHosts": ["SharePointWebPart", "TeamsTab"],
  "version": "1.0.0",
  "manifestVersion": 2
}

This ensures the web part can be added as a Teams tab.

🚀 Deploy and test the solution

Run the build and bundle commands:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog and deploy it.

After deployment:

• Add the web part to a SharePoint page.
• Go to Microsoft Teams → Apps → Upload a custom app, and select the same .sppkg package.
• Add the web part as a Teams tab — you’ll see the same Hello World component running there!

🧭 Key takeaway

The SharePoint Framework (SPFx) lets developers build a single solution that runs natively in both SharePoint Online and Microsoft Teams, sharing the same code and deployment model.

📂 GitHub Source

✅ Summary

You’ve successfully created a Hello World web part in SPFx that runs in both SharePoint and Teams.
This foundational setup is a great first step toward building integrated collaboration apps for Microsoft 365.