how to host a Microsoft Teams App in IIS with a virtual path instead of as a Web Site?

Question

i followed the microsoft tutorials:

https://learn.microsoft.com/en-us/learn/paths/m365-msteams-associate/

https://learn.microsoft.com/en-us/learn/modules/embedded-web-experiences/

and generated a Microsoft Teams App using the Microsoft Teams Yeoman generator. using the command:

yo teams

i built the app, which creates a "dist" directory, using:

gulp ngrok-serve

the App works through the ngrok url and at http://localhost:3007.

i installed IISNode and UrlRewrite to host the App in IIS.

i added a web.config file to the "dist" directory, and added this directory as an Application under the Default Web Site.

Problem

when i take my browser to http://localhost/dist (the virtual path), then i get a white page with the text:

Cannot GET /dist

the App actually seems to work, when i add the "dist" directory to IIS as a Website instead of an Application. however this isn't what i want, because this places the App in a different domain from the "Default Web Site".

what do i need to do to make the App work as one of the Applications under an IIS web site?

EDIT: using a different domain causes CORS (Cross Origin Resource Sharing) issues. and unnecessary configuration for CORS on the Default Web Site, raises security concerns at my company. i've already been down that path.

dist (directory)

dist
│   server.js
│   server.js.map
│   web.config
│
└───web
    │   index.html
    │   privacy.html
    │   tou.html
    │
    ├───assets
    │       icon.png
    │
    ├───learnPersonalTab
    │       index.html
    │
    ├───scripts
    │       client.js
    │       client.js.map
    │
    └───styles
            main.css

web.config (file)

<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>

server.ts (typescript for server.js. generated by Microsoft Teams Yeoman generator)

import * as Express from "express";
import * as http from "http";
import * as path from "path";
import * as morgan from "morgan";
import { MsTeamsApiRouter, MsTeamsPageRouter } from "express-msteams-host";
import * as debug from "debug";
import * as compression from "compression";



// Initialize debug logging module
const log = debug("msteams");

log(`Initializing Microsoft Teams Express hosted App...`);

// Initialize dotenv, to use .env file settings if existing
// tslint:disable-next-line:no-var-requires
require("dotenv").config();



// The import of components has to be done AFTER the dotenv config
import * as allComponents from "./TeamsAppsComponents";

// Create the Express webserver
const express = Express();
const port = process.env.port || process.env.PORT || 3007;

// Inject the raw request body onto the request object
express.use(Express.json({
    verify: (req, res, buf: Buffer, encoding: string): void => {
        (req as any).rawBody = buf.toString();
    }
}));
express.use(Express.urlencoded({ extended: true }));

// Express configuration
express.set("views", path.join(__dirname, "/"));

// Add simple logging
express.use(morgan("tiny"));

// Add compression - uncomment to remove compression
express.use(compression());

// Add /scripts and /assets as static folders
express.use("/scripts", Express.static(path.join(__dirname, "web/scripts")));
express.use("/assets", Express.static(path.join(__dirname, "web/assets")));

// routing for bots, connectors and incoming web hooks - based on the decorators
// For more information see: https://www.npmjs.com/package/express-msteams-host
express.use(MsTeamsApiRouter(allComponents));

// routing for pages for tabs and connector configuration
// For more information see: https://www.npmjs.com/package/express-msteams-host
express.use(MsTeamsPageRouter({
    root: path.join(__dirname, "web/"),
    components: allComponents
}));

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

// Set the port
express.set("port", port);

// Start the webserver
http.createServer(express).listen(port, () => {
    log(`Server running on ${port}`);
});

Answer 1

Try to grant IUSR account full control of the "Dist" folder.

Besides, in order to solve the IIS CORS issue, I advise you to install the below extension. It is easily solved.
https://www.iis.net/downloads/microsoft/iis-cors-module
Then configure it in the below section.

<configuration>
  <system.webServer>
    <cors enabled="true">
      <add origin="*" />
    </cors>
  </system.webServer>
</configuration>

Here is a simple example in the official blog.
https://blogs.iis.net/iisteam/getting-started-with-the-iis-cors-module