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"
    }
  ]
}

Even with a single IP address you can host multiple sites (different host names) at port 80. Stop the idea of using different ports as that only makes things complex. — Lex Li
– Lex Li, Commented Apr 13, 2020 at 16:13
@LexLi My public IP on Server x and I hosted the project on Server Y and my X server redirect the REquest to Y IIS server. I don't know why they did that but I can't change this scenario. — Abdulaziz Burghal
– Abdulaziz Burghal, Commented Apr 13, 2020 at 17:07
Then what do you have/install on server X? Usually people have a reverse proxy there, but you really need to learn what you have first. With a reverse proxy, you can do almost whatever you like (like learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/…). — Lex Li
– Lex Li, Commented Apr 13, 2020 at 17:08

Community · Accepted Answer · 2024-05-22 13:22:04Z

4

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

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

Build your angular run ng build --prod --base-href=/client-alias/
Go to Default Web Site in IIS
Add a application
Add Alias and point physical path to your dist folder in angular application
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)

Publish the API project and so that we can copy the content to the new web application of API Service.
Create an application pool with .net CLR version to No Managed Code
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.

edited May 22, 2024 at 13:22

CommunityBot

11 silver badge

answered Apr 13, 2020 at 17:48

Gourav Garg

2,92114 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Abdulaziz Burghal Over a year ago

thank you, Actually that what I exactly did, but I don't know what is the problem I think related to my app ports because default Backend app port is 21021 and 4200 for front-end and the Default website is 8080.

Gourav Garg Over a year ago

I have updated 1 thing. We can discuss in chat if that doesn't solve your issue

Abdulaziz Burghal Over a year ago

Thank you again, Actually, I did that before but with no luck, I think the problem in angular and .NET core app configuration, yes we can discuss that on chat but how could I open chat session in StackOverflow?

Gourav Garg Over a year ago

created chat.stackoverflow.com/rooms/211613/…

Gourav Garg Over a year ago

Were you able to complete this?

|

Dominik Oswald · Accepted Answer · 2020-04-13 15:45:22Z

1

Only your angular Website should be public. Every IIS Website need an unique port. https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Deployment-Angular-Publish-IIS

Also check out in your IIS Host Website the appSettings.json for

"App": {
    "ServerRootAddress": "http://localhost:21021/", -> Host 
    "ClientRootAddress": "http://localhost:4200/", -> Angular
    "CorsOrigins": "http://localhost:4200" -> your domain, https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

},

If you have merged your Angular and Host Project: https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#merged-project

answered Apr 13, 2020 at 15:45

Dominik Oswald

3752 silver badges6 bronze badges

1 Comment

Abdulaziz Burghal Over a year ago

Dear Dominik, Once I added my domain to the CorsOrigins the Front end stop working and after checking the log file I found CORS policy execution failed. also , regarding the first link actually I follow the steps but in my scenario, I can't create any website for My app what should I did is adding the both under IIS default website. regarding the second link actually I don't merge the solution I build each of them individually .

Collectives™ on Stack Overflow

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

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related