Hello World webpart in Teams using SPFx

Building Microsoft Teams app is possible if you using SharePoint Framework v1.8 or above. In this article we used v1.10. So basically web part has to hosted in the SharePoint and hosted web part can be accessed inside the Microsoft Teams, let we see the step by step instruction to building the Microsoft Teams app using SPFx,

Create a new web part project

Open power shell and run the following comment to create a new web part by running the Yeoman SharePoint Generator

yo @microsoft/sharepoint

When prompted:

Enter the webpart name as your solution name, and then select Enter.
Select Create a subfolder with solution name for where to place the files.
Select Y to allow the solution to be deployed to all sites immediately.
Select N on the question if solution contains unique permissions.
Select WebPart as the client-side component type to be created.

The next set of prompts ask for specific information about your web part:

Enter your web part name, and then select Enter.
Enter your web part description, and then select Enter.
Accept the default No JavaScipt web framework option for the framework, and then select Enter.

Start Visual Studio Code (or your favorite code editor) within the context of the newly created project folder.

cd .\web part name\
code .

In the project root folder directory, you can find the folder called teams, in the folder, you can find two image files, those files are the app icons. So you can replace the images with the same name if required,

In the \src\webparts\spfxTeamsHelloworld\SpfxTeamsHelloworldWebPart.ts file, we can access the teams context in the render function. teams context allows us to get many input parameters, if you want to do any actions then we have to use Graph API

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import styles from './SpfxTeamsHelloworldWebPart.module.scss';


export default class SpfxTeamsHelloworldWebPart extends BaseClientSideWebPart <any> {

  public render(): void {
    let title: string = '';
    let subTitle: string = '';
    let contextDetail: string = '';

 if (this.context.sdks.microsoftTeams) {
    // We have teams context for the web part
    title = "Welcome to Teams!";
    subTitle = "Building custom enterprise tabs for your business.";
    contextDetail = "We are in the context of following Team: " + this.context.sdks.microsoftTeams.context.teamName;
  }
  else
  {
    // We are rendered in normal SharePoint context
    title = "Welcome to SharePoint!";
    subTitle = "Customize SharePoint experiences using Web Parts.";
    contextDetail = "We are in the context of following site: " + this.context.pageContext.web.title;
  }
    this.domElement.innerHTML = `
      <div class="${ styles.spfxTeamsHelloworld}">
    <div class="${ styles.container}">
      <div class="${ styles.row}">
        <div class="${ styles.column}">
          <span class="${ styles.title}">${title}</span>
            <p class="${ styles.subTitle}">${subTitle}</p>
              <p class="${ styles.description}">${contextDetail}</p>
          </div>
          </div>
          </div>
          </div>`;
  }
}

Deploy the solution in the SharePoint

You’re now ready to build, bundle, package, and deploy the solution.

Run the gulp commands to verify that the solution builds correctly.

gulp build

Use the following command to bundle and package the solution.

gulp bundle
gulp package-solution

Browse to the app catalog of your target tenant and upload the solution package. You can find the solution package under the sharepoint/solution folder of your solution. It is the .sppkg file. After you upload the solution package in the app catalog. you can find and the web part anywhere across the tenant.

In the app, catalog selects the newly installed app and click the “Sync to Teams” so you can find the success message at the top of the page. this process will add the app into the teams

Add web part in the Microsoft Teams

Open Microsoft teams application and App from the list side icon, then you can find the “Build for <Orgazation name>”. If you first time adding the app then that Build for the option will take some hours to appear.

So once you selected the Build for the option then you can see your app, so now you can add the app into the channel tab, in order to add goto the channel and click the Plus symbol in the top then search your app and click install