Skip to content

Latest commit

 

History

History
77 lines (48 loc) · 6.18 KB

README.md

File metadata and controls

77 lines (48 loc) · 6.18 KB
Raw

Getting Started with Hello World Tab Sample (Azure)

Note: We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

This warning will be removed when the samples are ready for production.

Important: Please be advised that access tokens are stored in sessionStorage for you by default. This can make it possible for malicious code in your app (or code pasted into a console on your page) to access APIs at the same privilege level as your client application. Please ensure you only request the minimum necessary scopes from your client application, and perform any sensitive operations from server side code that your client has to authenticate with.

Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.

Hello World Tab shows you how to build a tab app and how to get user login information with SSO.

Hello World Tab

Prerequisites

What you will learn in this sample:

  • How to use TeamsFx to build frontend hosting on Azure for your tab app.
  • How to use MS graph client in TeamsFx to get access to Microsoft 365 data.

Try the Sample with Visual Studio Code Extension:

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using TeamsFx CLI tool, refer to Try the Sample with TeamsFx CLI

  1. Clone the repo to your local workspace or directly download the source code.
  2. Download Visual Studio Code and install Teams Toolkit Visual Studio Code Extension.
  3. Open the project in Visual Studio Code.
  4. Start debugging the project by hitting the F5 key in Visual Studio Code.

Use the App in Teams

Edit the manifest

You can find the Teams manifest in templates/appPackage folder. The templates contains:

  • manifest.template.json: Manifest file for Teams app running locally and remotely.

Both file contains template arguments with {...} statements which will be replaced at build time. You may add any extra properties or permissions you require to this file. See the schema reference for more.

Deploy to Azure

Deploy your project to Azure by following these steps:

From Visual Studio Code From TeamsFx CLI
  • Open Teams Toolkit, and sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar.
  • After you signed in, select a subscription under your account.
  • Open the Teams Toolkit and click Provision in the cloud from DEPLOYMENT section or open the command palette and select: Teams: Provision in the cloud.
  • Open the Teams Toolkit and click Deploy to the cloud or open the command palette and select: Teams: Deploy to the cloud.
  • Run command teamsfx account login azure.
  • Run command teamsfx account set --subscription <your-subscription-id>.
  • Run command teamsfx provision.
  • Run command: teamsfx deploy.

Note: Provisioning and deployment may incur charges to your Azure Subscription.

Package

  • From Visual Studio Code: open the command palette and select Teams: Zip Teams metadata package.
  • Alternatively, from the command line run teamsfx package in the project directory.

Publish to Teams

Once deployed, you may want to distribute your application to your organization's internal app store in Teams. Your app will be submitted for admin approval.

  • From Visual Studio Code: open the Teams Toolkit and click Publish to Teams or open the command palette and select: Teams: Publish to Teams.
  • From TeamsFx CLI: run command teamsfx publish in your project directory.

Architecture

Code structure

  • You can check app configuration and environment information in: .fx
  • You will find frontend code in: tabs/src/components

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct.

For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.