"Cannot GET /[subdirectory]" error when hosting a Teams App as a website subdirectory

[symbiotic]

Describe the bug

I'm unable to host Teams Apps, generated by your Yeoman generator for Microsoft Teams, in a subdirectory of a website. For example, viewing a Teams App hosted at "http://locahost/teams" in a browser, results in a blank page containing only the text:

Cannot GET /teams

To Reproduce

Note: I'm using IIS on windows. I also have IISNode and URL Rewrite installed to be able to host in IIS (i have NOT changed the configuration of IISNode and URL Rewrite).

1. Generate a Teams App using:

    yo teams

2. Then build it, with:

    gulp ngrok-serve

3. Add a web.config file to the "dist" folder, containing the following (for IIS):

    <configuration>
        <system.webServer>

            <!-- indicates that the server.js file is a node.js application
            to be handled by the iisnode module -->

            <handlers>
                <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
            </handlers>

            <rewrite>
                <rules>
                    <rule name="sendToNode">
                        <match url="/*" />
                        <action type="Rewrite" url="server.js" />
                    </rule>
                </rules>
            </rewrite>

        </system.webServer>
    </configuration>

4. Host the "dist" folder as the root of a website, at the URL "http://localhost" and note that it seems to work fine (the URL shows the teams logo in a browser)

5. Problem: Now instead host the "dist" folder as a subdirectory, at the URL "http://localhost/teams". This does not seem to work. The browser shows a blank page at that URL, containing only the text:

    Cannot GET /teams

Further analysis

If i go into the "/src/app/server.ts" file (that was created by the Yeoman generated), and replace the following:

express.use("/", Express.static(path.join(__dirname, "web/"), {
    index: "index.html"
}));

with:

express.use("/teams", Express.static(path.join(__dirname, "web/"), {
    index: "index.html"
}));

and do a build again, then the error goes away and i see the teams logo again. But the logo has the wrong size, because "/dist/web/index.html" still contains the old path of the css file:

<link rel="stylesheet" href="/styles/main.css">

instead of the relative path, which would work in both cases:

<link rel="stylesheet" href="styles/main.css">

But, i have no idea of all the potential places, where the path would need to be changed.

Expected behavior

I simply expect that everything still works, when hosting the "dist" folder as a subdirectory (such as "http://localhost/teams") instead of the root (such as "http://localhost") of a website, without me making changes.

Suggestion in case expected behavior is not possible

Ideally i would not have to change any configuration. But, in case this is not possible:

It would be most convenient if the setting could still be change, without doing a build. So if you implement this, then i suggest that you get this prefix ("/teams" in the above example), at runtime from the variable "process.env.virtualDirPath" if it is defined.

This way, i can use the web.config file in the "dist" folder, as the single place where i can prefix all paths. by adding an appSettings to it:

<configuration>
    <appSettings>
        <add key="virtualDirPath" value="/teams" />
    </appSettings>
    
    <system.webServer>

        <!-- indicates that the server.js file is a node.js application
        to be handled by the iisnode module -->

        <handlers>
            <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <rule name="sendToNode">
                    <match url="/*" />
                    <action type="Rewrite" url="server.js" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>
</configuration>

IISNode then automatically defines "process.env.virtualDirPath" at runtime with value "/teams" (i've tested this). You guys could then have gulp build:

const virtualDirPath = process.env.virtualDirPath || "/";

express.use(virtualDirPath, Express.static(path.join(__dirname, "web/"), {
    index: "index.html"
}));

This would also make it practical for an administrator to change the subdirectory in the URL, by only being required to also edit the web.config file, instead of needing all the developer tools and having to do a build. But i would of course prefer this additional configuration not being necessary at all.

Detailed information

• Generator version: 3.1.1
• OS: Windows 10 Pro
• Node version: 12.16.0
• Npm version: 6.13.4
• IISNode version: 0.2.21 x64
• URL Rewrite version: 2.1

Additional information

Hosting several applications, each in their own subdirectory, under the same IIS Website is a common scenario. In my case the Teams App needs to POST JSON content to a third party application under the same website.

If they are in different websites, then one domain would be accessing another domain. This would require me to set CORS (Cross Origin Resource Sharing) permissions. This is not possible in the third party application. And even if it was, i wouldn't want to unnecessarily expose these permissions to the internet, out of security concerns.

[wictorwilen]

Thanks for the idea and suggestion for implementation. We'll take this into consideration. We also would love to see contributions to the project on this.