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

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