So you have developed your Angular app with ASP.NET Core WebAPI and would like to deploy it to a Shared Windows hosting. Shared hosting provides budgeted plans are a great way to start your project with ready environment but comes with limited features.

Your application is running smoothly on local environment, but to run it on a shared hosting account, I would suggest to consider the following steps :

1. Build & Deploy Angular App
2. Publish & Deploy ASP.NET Core WebAPI Project

Folder Structure
To make the best use of limited features on a share hosting environment, my approach is to organize the project in the following folder structure:

/api/
api folder will contain the published WebAPI project.

/app/
app folder will contain the build files of Angular application.

1. Build & Deploy Angular App

1.1 Configure "environment/environment.prod.ts"
Since we are going to host our WebAPI project in "/api" folder, configure "environment.prod.ts" file as follows:

export const environment = {
  production: true,
  apiUrl: '/api'
};

1.2 Build Angular App
Angular.IO deployment guide describes the build procedure in details. Following command prepares the required angular files for deployment in "dist" folder with base path configured to use "/app/" folder.

ng build --prod --output-path dist --base-href /app/

1.3 Add WEB.CONFIG file
Next would be to add the "web.config" file to angular app folder to configure iis rewrite rules.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS 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="/app/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

With the above files ready, we can xcopy the entire "dist" folder to "app" folder on shared hosting via FTP (FileZilla).

2. Publish & Deploy ASP.NET Core WebAPI Project

Right click on ASP.NET Core WebAPI project in Visual Studio and click on Publish which brings the following screen. Configure the values as shown here:

Click Next, and configure these settings. I am using .NET Core 5.0 version which is supported by my hosting provider. Check with your hosting provider for the supported .NET Core Versions. Click save to finish the settings.

We are ready to publish our project and click on Publish button now.

Visual Studio will generate the published files in the following folder:

/bin/Release/publish/

Depending upon your hosting provider, you may have to change the hosting model in Web.Config file.

By default it is configured as "inprocess". Change hosting model to "OutOfProcess" as in the following:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\MyApp.WebAPI.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="OutOfProcess" />
    </system.webServer>
  </location>
</configuration>

Once all files are successfully published and Web.Config file is modified, navigate to the published folder and XCopy entire content to the API folder on your shared hosting account.

Summary

1. Build Angular App by ng build command
2. Add Web.Config file to angular project folder
3. Publish ASP.NET Core WebAPI project.
4. Modify Web.Config file
5. XCopy all files to the shared hosting account.

I would love to hear from you about these steps. If you find a better way, or have a suggestion, please do let me know.

Thanks