Microsoft Teams: How to start developing custom Teams Apps

11 min readSep 4, 2020

What are Microsoft Teams Apps?

Microsoft Teams is a collaboration platform in Office 365 that is tightly integrated with apps and services people use to facilitate collaboration to get work done together in a organization. The Microsoft Teams developer platform makes it easy for developers to integrate their own custom apps and services to improve productivity, make decisions faster, provide focus (by reducing context switching), and create collaboration around existing content and workflows.

You can also look at Apps built on the Microsoft Teams platform as bridges between the Teams client and your services and workflows; bringing them directly into the context of your collaboration platform. You can read more about the Microsoft Teams App here.

You have the opportunity to develop different types of solutions / Apps for Microsoft Teams.

And that is :

Get started

There are many good blogs around how to develop for Microsoft Teams. But I recommend first reading Microsoft documentation on how to get started with building Microsoft Teams apps. There are samples and templates available to get you started. I will post some links to blogs and videos that are very good to get along with to be able to understand the entire development cycle for Microsoft Teams.

You have also a Software Development Kits (SDKs) and tools available. Depending on what you self feel comfortable with the choice of development language. But there is nothing in the way of those of you who prefer to use .Net C # for the development of Microsoft Teams Apps. If you prefer to use TypeScript, React and Node as your primary technologies, I can really recommend the Yeoman generator for Microsoft Teams to scaffold your project and get you started. This generator can create a project structure for you for all kinds of Microsoft Teams apps (Tabs, Bots, Extensions, web hooks, etc.).

Before you can start building your App, you should decide what kind of App you’ll need, review the extensible points in the Microsoft Teams client and start to map your use cases to the Teams app capabilities.

I highly recommend for all of those who are interested in getting into development for Microsoft Teams to watch this video:

Second video is from Microsoft MVP Andrew Connell where he goes through the basics when it comes to developing Teams Apps Messaging extensions Search-based and Action-based.

And not least this video which is also very good.

Setup Developent enviroment

Install Tools:

You need to have NodeJS installed on your machine. You should use the latest LTS version
Get any text editor or IDE. You can install and use Visual Studio Code .
Yeoman Generator for Teams
Install Git
NGROK

ngrok

MS Teams is a cloud-based product. It requires all the services it accesses to be available in the cloud over HTTPS endpoints. While developing the apps locally, we need a tunneling application to work within MS Teams.

The ngrok provides tunneling HTTPS endpoints to a web server running locally on a developer workstation. Ngrok is a command-line application. It can be downloaded from here

Download and unzip:

unzip /path/to/ngrok.zip

Connect your account

Running this command will add your authtoken to the default ngrok.yml configuration file. This will grant you access to more features and longer session times. Running tunnels will be listed on the status page of the dashboard.

./ngrok authtoken {{You GUID Token from ngrok}}

Fire it up

Read the documentation on how to use ngrok. Try it out by running it from the command line:

 ./ngrok help

To start a HTTP tunnel forwarding to your local port 80, run this next:

./ngrok http 80

Now we have started ngrok to open the tunnel through http port 80 back to ouer local machine. This is a quick way to test and get to know how ngrok works. When ngrok fires up it will generate a random URL endpoint that will look like:

https://149372cc1eda.ngrok.io

In theory, this means that for every time you run your solution for testing and debugging, you will get a new random URL endpoint generated by ngrok.

To avoid that you always get a new URL endpoint generated by ngrok, you have the opportunity to buy your own domain. Which will allow you to enter your domain name in .env file in Teams App solution and you will not have to update ngrok URL endpoint in Azure Bot every time you run solution for testing and debugging.

You will know what I mean when you have tested a little more and read a little further down in the blog when we start testing our application.

How ngrok work:

What it is good for:

Billing and payment plans for NGROK:

Install Yeoman and Gulp CLI

To be able to scaffold projects using the Teams generator you need to install the Yeoman tool as well as the Gulp CLI task manager.

Open up a command prompt and type the following:

npm install yo gulp-cli --global

Install the Microsoft Teams Apps generator — Yo Teams

The Yeoman generator for Microsoft Teams apps are installed with the following command:

npm install generator-teams --global

Generate your project

Open up a command prompt and create a new directory where you want to create your project and in that directory type the command yo teams. This will start the Teams Apps generator and you will be asked a set of questions.

Solution name: TeamsTabApp

I selected to create a subfolder, you can selct what ever suits you.

Select the latest version if you dont have any reason to select the previous version.

When it comes to ask you about the Microsoft Partner ID, just leave it blank. This is something you can add in manifest.js file later if you need it.

Select only the option “TAB” for keeping it simple to illustrate how the project is generated and how it works.

URL for where you will host your solution will be automatically generated as shown in the picture above. This is some this you also can later on change in manifest.js file. Just leave it as it is and press ENTER.

And when the generator will ask for “Loading indicator”, “Azure Application Insight”, and “Test Framework”, select NO.

Let the Tab name be as it is!

Now you have to options for type of Tab to be created:

Configurable
Personal (static)

Select “Configurable”

Next you need to select what scopes you intend to use for your Tab. You have two options:

In a Team
In a group chat

Let us select “In a Team”

Nex you will be ask for is if you want to require Azure AD Single-Sign-On support for the tab, select Yes and press enter.

Leave the Application ID and URI as it is, you can change it later in manifest.js

Next you will be asked for is if you want your TAB to be available in SharePoint. For those who are familiar with SharePoint Framework and knows how it works. Will understand that you have two option to create a custom Teams Tab. Either by Microsoft framework for Teams App or by SharePoint Framework Web-part.

Select NO

Finally it start creating the project. It will take couple of minutes to be finished, be patient :)

Now navigate into the solution CD

Open the solution in Visual Studio Code:

Run the command :

gulp build

Before start running the application, we need to create/register Bot Channel in Azure.

Azure Bot Chanel Registration

Following these instructions we are going to setup a Bot Channel Registration in Azure. At first this might sound strange, why do we need a Bot if we are just putting a button on the messaging extension or a simple Teams tab and showing a custom UI?

It’s important to understand that for messaging extensions or tab code never communicates directly with the users Teams client. All communication with the users Teams client is channeled through the Microsoft Bot framework.

So let’s create the Bot Channel Registration in Azure.

Click on the “Bot Channel Registration”

Click on “Create” button.

Give you bot a name “Bot handle”, selec prefered recourse group, location ect and create the Bot.

Now the Bot Channel is created.

On the left side menu you can se a link to settings, click on the link

Messaging endpoint field is where you have to paste the endpoint URL generated by ngrok each time you run your application for testing and debug.

Now we need to generate the App Secret or password for Bot App.

Click on the link “Manage”

Under the “Client Secret” section, click on NEW…

Genereate the secret as shown in the picture above. Remeber to copy the password/secret GUID generated…

And now go back the blade with settings:

Copy the App ID witch is same as BotID, you have to put this guid in the .env file in the solution.

Run and test the Microsft Teams Tab

First we need to update the .env file in ouer solution:

# The domain name of where you host your applicationHOSTNAME=teamstabapp.azurewebsites.net# Id of the Microsoft Teams applicationAPPLICATION_ID=64d51d80-ee89-11ea-98b6-434f42e29f93# Package name of the Microsoft Teams applicationPACKAGE_NAME=teamstabapp# App Id and App Password for the Bot Framework botMICROSOFT_APP_ID=c8b1f8d3-587d-4c85-ac5b-27d5df4d70baMICROSOFT_APP_PASSWORD=y.BTn--a1~bO.A7gjg4dvyAq47XDF_n1ip# Port for local debuggingPORT=3007# Security token for the default outgoing webhookSECURITY_TOKEN=# ID of the Outlook ConnectorCONNECTOR_ID=# Application Insights instrumentation keyAPPINSIGHTS_INSTRUMENTATIONKEY=# NGROK configuration for development# NGROK authentication token (leave empty for anonymous)NGROK_AUTH=# NGROK sub domain. ex "myapp" or  (leave empty for random)NGROK_SUBDOMAIN=# NGROK region. (us, eu, au, ap - default is us)NGROK_REGION=# Debug settings, default logging "msteams"DEBUG=msteamsTEAMSTABAPPTAB_APP_ID=00000000-0000-0000-0000-000000000000TEAMSTABAPPTAB_APP_URI=api://teamstabapp.azurewebsites.net/00000000-0000-0000-0000-000000000000

Now go back to your command prompt for running the Microsoft Teams App.

Run the command:

gulp ngrok-serve

In picture above you can see that when you run the solution by comman “gulp ngrok-serve”, it fires up the ngrok to generate the random URL endpoint.

Copy this endpoint URL, and paste it in Azure Bot Channel you just created.

So each time you will run you solution you have to update this URL endpoint.

Your URL endpoint have to look like this :

https://xxxxxxx.ngrok.io/api/messages

https://22d4c066bc1e.ngrok.io/api/messages

For checking that every thing is OK, and Teams tunnelng with ngrok is working, copy and paste the ngrok endpoint URL in a browser:

If you get the “Welocome to the TeamsTabApp” as picture above, means that every thing is good, and tunneling with ngrok is working.

So how can we deploy this Tab to the Teams. Lets go to the Teams application and upload the .zip file. Open up the Teams web version in browser, you can also do the same in desktop. But iam doing it in browser.