M365Bootcamp-TeamsOneProductivityHub

Part 1 - Create a new Teams custom tab

  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.

    Microsoft Teams Toolkit Extension for Visual Studio Code

  2. Select Create a new Teams app,
    • Give a name for the app such as “OneProductivityHub”
    • Choose Tab for the capability
    • Select Next

    Microsoft Teams Toolkit Extension for Visual Studio Code

    • Select Personal tab
    • Select Finish

    Microsoft Teams Toolkit Extension for Visual Studio Code

    • 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

Next Step

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