Environment Setup

1 - Prepare your Office 365 tenant

⚡ IMPORTANT! ⚡ : Community tenant cannot be used for this lab. Please sign up for a free Microsoft 365 Developer Program subscription.

If you are an Office 365 subscriber, you can develop apps for Microsoft Teams with one of the following plans:

Microsoft Teams will also be available to customers who subscribed to E4 prior to its retirement.

Just need a development environment?

If you don’t currently have an Office 365 account, you can sign up for a Microsoft 365 Developer Program subscription. It’s free for 90 days and will continually renew as long as you’re using it for development activity. If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 developer subscription, active for the life of your Visual Studio subscription. See Set up a Microsoft 365 developer subscription.

Enable Microsoft Teams for your organization

If Microsoft Teams has not been enabled for your organization, you’ll need to do that first. Take a look at our detailed guidance for enabling Teams for your organization.

Enable custom Teams apps and turn on custom app uploading

Turn on custom app sideloading for your developer tenant as follows:

  1. Login to Microsoft 365 admin center with your admin credential.

  2. Select Show All –> Teams.

[!Note] It can take up to 24 hours for the “Teams” option to appear. During interim, you can Upload your custom app to a Teams environment for testing and validation.

  1. Navigate to Teams apps –> Setup Policies –> Global(Org-wide default)

  2. Toggle upload custom apps to the on position.

That’s it! Your test tenant will now allow custom app sideloading.

[!Note] It can take up to 24 hours before sideloading is enabled. During interim, you can use upload for <your tenant> to test your app.

For complete information on how these settings interact, See, Manage custom app policies and settings in Microsoft Teams and Manage app setup policies in Microsoft Teams.

2 - Install Visual Studio Code

The latest Visual Studio Code version is available here: https://code.visualstudio.com/

3 - Install Node.js

Visit https://nodejs.org/ to install Node.js Long Term Support version.

4 - Download Microsoft Teams Toolkit

Microsoft Teams Toolkit extension for Visual Studio Code is available in Visual Studio Marketplace.

5 - Setup Ngrok

Download ngrok: https://ngrok.com/download

Unzip to install

On Linux or OSX you can unzip ngrok from a terminal with the following command. On Windows, just double click ngrok.zip.

unzip /path/to/ngrok.zip

Connect your account

Running this command will add your authtoken to your ngrok.yml file. Connecting an account will list your open tunnels in the dashboard, give you longer tunnel timeouts, and more. Visit the dashboard to get your auth token.

./ngrok authtoken <your_auth_token>

If you don’t have an account, Sign up.

Run Ngrok

Try running it from the command line:

./ngrok help

To start a HTTP tunnel on port 80, run this next: Read the documentation to get more ideas on how to use ngrok.

./ngrok http 80


Next Step

▶️ Part 1 - Create a new Teams custom tab