01-Create_Teams_tab.md

Part 1 - Create a new Teams custom tab

• Part 0 - Environment Setup
• Part 1 - Create a new Teams custom tab ( 📍 You are here )
• Part 2 - Register your application in Azure Active Directory
• Part 3 - Add Microsoft Graph Toolkit and build the auth pop-up page
• Part 4 - Design your One Productivity Hub using Microsoft Graph Toolkit components
• Part 5 - Test your tab in Microsoft Teams App Studio

1. Launch Visual Studio Code and select Microsoft Teams icon on the left side bar, then Sign in with your Microsoft 365 Developer tenant.

📌 NOTE 📌 : Make sure to complete the setup for Microsoft Teams Toolkit.

1. Select Create a new Teams app,

   • Give a name for the app such as "OneProductivityHub"
   • Choose Tab for the capability
   • Select Next

   

   • Select Personal tab
   • Select Finish

   

   • Open Terminal and run:

     npm install
     
     npm start

Set up ngrok and create a tunnel

If you didn't setup your ngrok yet, you may follow the instructions: Setup Ngrok.

In order to test your application later, you will need to host your application over a public-facing URL using HTTPS. Install ngrok and create a tunnel from the Internet to http://localhost:3000 with the following command:

ngrok http 3000

⚡ IMPORTANT! ⚡ : In your project directory, locate the .publish\Development.env file and replace the value for baseUrl0 with your ngrok URL.

References

• Microsoft Docs - Build apps with the Microsoft Teams Toolkit and Visual Studio Code
• Visual Studio Marketplace - Microsoft Teams Toolkit Extension for Visual Studio Code
• Ngrok

Next Step

▶️ Part 2 - Register your application in Azure Active Directory