Hosting .Net Core app and Angular app under IIS Default website

Question

I'm using ASP.net core Boilerplate with angular. I tried hosting both apps individually website for Angular and website for .NET core under IIS localhost with no problem.
:
But When I want to deploy my App on public I encountered this problem :
1- I have only one public IP which is redirecting to the IIS Default Website and each app has a different port.
**So, Both Front-end and Back-end should be hosted under the IIS Default Website with a different port.

is that applicable with .NET core and Angular?**

Update

And here is my appsetting.json

{

  "ConnectionStrings": {
    "Default": "Server=localhost\\SQLEXPRESS; Database=MyDb;User Id=admin;Password=1234"
  },
  "App": {
    "ServerRootAddress": "http://localhost:21021/",
    "ClientRootAddress": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200,http://localhost:8080,http://localhost:8081,http://localhost:3000"
  },
  "Authentication": {
    "JwtBearer": {
      "IsEnabled": "true",
      "SecurityKey": "MyApp_C421AAEE0D114E9C",
      "Issuer": "MyApp",
      "Audience": "MyApp"
    }
  }
}

Update 2

Angular web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
    <!-- IIS URL Rewrite for Angular routes -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Angular appconfig.production.json

{
  "remoteServiceBaseUrl": "http://localhost:21021",
  "appBaseUrl": "http://localhost:4200",
  "localeMappings": [
    {
      "from": "pt-BR",
      "to": "pt"
    },
    {
      "from": "zh-CN",
      "to": "zh"
    },
    {
      "from": "he-IL",
      "to": "he"
    }
  ]
}

Answer 1

Here are some steps:

Pre-requisite :

Client Alias=> path name for client application which needed to add application in iis

Service Alias => path name for service application which needed to add application in iis

1. Download .NET Core 3.0 Runtime & Hosting Bundle for Windows or you can find exact version as per your project https://dotnet.microsoft.com/download/dotnet-core/thank-you/runtime-aspnetcore-3.0.0-windows-hosting-bundle-installer
2. For the setup of Angular 8 infrastructure in Clinical Content Editor, installation of IIS extension "URL Rewrite” is required https://www.iis.net/downloads/microsoft/url-rewrite

Front End:

3. Build your angular run ng build --prod --base-href=/client-alias/

4. Go to Default Web Site in IIS

5. Add a application

6. Add Alias and point physical path to your dist folder in angular application

7. You can test this http://localhost/client-alias

Back End : (https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1#create-the-iis-site)

8. Publish the API project and so that we can copy the content to the new web application of API Service.

9. Create an application pool with .net CLR version to No Managed Code

10. In IIS create a new web application for API Service with application pool added in step 9 and physical path of published folder as in step 8.

Now these two application are running on as http://127.0.0.1/client-alias and http://127.0.0.1/service-alias

You can make your IP(8080) public with no another port open.