microsoft-teamsteams-toolkitmicrosoft-teams-js

Static Tabs Application fails to initialize: There was a problem reaching this app

I'm developing simple Tab application for my search engine, my idea is to just add an iframe in hello.html and set the source to my URL.

here is my markup - hello.html:

<html>
    <head>
        <script src="..../teams-js/2.22.0/..." ></script>
        <script src=".../teamsapp.js?v=1.0.1"></script>
        <title>My App</title>
    </head>
    <body>
        <iframe src="https://chat.web.com">
        <script>
            microsoftTeams.appInitialization.notifySuccess();
        </script>
    </body>
</html>

here is my teamsapp.js

(function () { 
    "use strict"; 

    // Call the initialize API first 
    microsoftTeams.app.initialize().then(function() {});
})();

and here is my manifest.json

{     
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",    
    "manifestVersion": "1.19",     
    "version": "1.0.1",     
    "id": "abcb1633-6493-47e9-8472-12328939dfff",     
    "developer": 
    {         
        "name": "Ahmad Ahsan",         
        "websiteUrl": "https://www.web.com/",         
        "privacyUrl": "https://www.web.com/team-app-privacy-policy",        
        "termsOfUseUrl": "https://www.web.com/team-app-terms-and-conditions"     
    },     
    "icons":
    {
        "color": "color.png",
        "outline": "outline.png"
    },     
    "name":
    {
        "short": "TeamApp",
        "full": "Team App full Nmae"
    },     
    "description":
    {
        "short": "Teams App Short Description",
        "full": "Teams App Full Description."
    },    
    "accentColor": "#FFFFFF",     
    "staticTabs": [         
        {             
            "entityId": "index0",            
            "name": "Home",             
            "contentUrl": "https://chat.web.com/",             
            "websiteUrl": "https://chat.web.com/",             
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],     
    "validDomains": [
        "chat.web.com"
    ] 
}

The issue is:

However if I set it to "contentUrl": "${{TAB_ENDPOINT}}" and is .env.local it is set to TAB_ENDPOINT=https://localhost:53000 then it works fine, but I don't know how it'll behave when I set the value to TAB_ENDPOINT=https://chat.web.com in .env.dev file and

why it is not working when:

  1. I set the value without using variable?
  2. I remove the contentUrl from staticTabs object?

P.S: My website have no other page / path / url. Domain name is only valid URL.

Solution

  • If you are building this Tab from the Teams Toolkit, you will notice that in the app.js file, we start the service on port 53000 and add a mapping for /tab. Therefore, you do not need to modify the contentUrl and websiteUrl in the staticTabs.

    You can add an iframe directly to the hello.html page, similar to the following code：

    <body>
  <iframe src="https://www.example.com"></iframe>
  <script type="text/javascript">
    microsoftTeams.appInitialization.notifySuccess();
  </script>
</body>

    Additionally, if you are running in a local environment, you only need to modify the .env.local file. Teams Toolkit will write it to .localConfigs and load it into environment variables when you press F5. The .env.dev file is used for environment variables when deploying on Azure.