Unable to Deploy Microsoft Team application to Azure

Question

Summary: When attempting to deploy a Microsoft Teams Node.JS project written in typescript to Azure servers the Teams application throws an error "There was a problem reaching this app." The application works fine when opening in a browser but is not recognized in Teams. It appears that all the manifest is setup correctly and when run in the verification of App Studio no errors are returned.

Attempted Solutions: Attempted to match the manifest with examples given by Microsoft. Attempted to get a Microsoft teams application deployed to Azure using the examples shared by Microsoft.

Code:

Teams App Manifest:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",
  "manifestVersion": "1.7",
  "id": "dfe1fc96-d4db-4ed4-b76a-c26194928313",
  "version": "1.0.0",
  "packageName": "messageleapteams",
  "developer": {
    "name": "Real Data Consulting",
    "websiteUrl": "https://messageleapteams.azurewebsites.net",
    "privacyUrl": "https://messageleapteams.azurewebsites.net/privacy.html",
    "termsOfUseUrl": "https://messageleapteams.azurewebsites.net/tou.html"
  },
  "name": {
    "short": "messageLeapTeams",
    "full": "messageLeapTeams"
  },
  "description": {
    "short": "TODO: add short description here",
    "full": "TODO: add full description here"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#D85028",
  "configurableTabs": [
    {
      "configurationUrl": "https://messageleapteams.azurewebsites.net/messageLeapTeamsTab/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "messageleapteams.azurewebsites.net"
  ],
  "showLoadingIndicator": true,
  "isFullScreen": false,
  "webApplicationInfo": {
    "id": "dfe1fc96-d4db-4ed4-b76a-c26194928313",
    "resource": "api://messageleapteams.azurewebsites.net/dfe1fc96-d4db-4ed4-b76a-c26194928313"
  }
}

Answer 1

In my opinion, if you can ensure there is no error with your code, you can check your configuration.

Next description are based on the c# sample (conversation bot)that Ms provided. And I think nodejs is similar.You can click the link and see the detail.

1. you have to create an Azure Ad app with client secret, and modify the 'appsetting' file to make sure the code can run in local.
2. ngrok is needed so you can visit your code running in local.
3. pls create a bot on Azure portal, enter correct appId, client secret(created in setp 1) and Messaging endpoint(get the https url after starting the ngrok,and don't forget to append '/api/messages' after the url)
4. now you can test your code running in local environment in web chat.
5. if you want to test in Teams client, you need to modify 'manifest.json' and create a ZIP file and upload your bot to Teams. Then you have to add the Teams channel in the bot created in step 3. enter image description here

Please note if the Azure AD application created in step 1 belongs to a tenant which is different from your Teams login account's tenant, you should set the app as a multi-tenant app(when you create an app, it will ask you to choose whom are allowed to visit this app).

If there is no problem running the program locally, it will be fine after deploying to azure app service .

Answer 2

It turns out the web application was properly deployed and the manifest built correctly, however with teams tab applications hosted in Azure the loading indicator must be disabled. I fixed this issue by setting "showLoadingIndicator": false in the manifest.json