{"id":1782304,"date":"2021-01-09T15:47:58","date_gmt":"2021-01-09T20:47:58","guid":{"rendered":"https:\/\/www.codementor.io\/noorsaifi\/how-to-deploy-angular-asp-net-core-webapi-to-iis-on-shared-hosting-1dytrihj56"},"modified":"2021-01-09T15:47:58","modified_gmt":"2021-01-09T20:47:58","slug":"how-to-deploy-angular-asp-net-core-webapi-to-iis-on-shared-hosting","status":"publish","type":"station","link":"https:\/\/platodata.io\/plato-data\/how-to-deploy-angular-asp-net-core-webapi-to-iis-on-shared-hosting\/","title":{"rendered":"How to deploy Angular, ASP.NET Core WebAPI to IIS on Shared Hosting"},"content":{"rendered":"

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.<\/p>\n

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 :<\/p>\n

    \n
  1. Build & Deploy Angular App<\/li>\n
  2. Publish & Deploy ASP.NET Core WebAPI Project<\/li>\n<\/ol>\n

    Folder Structure<\/strong>
    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:<\/p>\n

    \"article-20210109-01-folder-structure.PNG\"<\/p>\n

    \/api\/<\/strong>
    api folder will contain the published WebAPI project.<\/p>\n

    \/app\/<\/strong>
    app folder will contain the build files of Angular application.<\/p>\n

    1.1 Configure “environment\/environment.prod.ts”<\/strong>
    Since we are going to host our WebAPI project in “\/api” folder, configure “environment.prod.ts” file as follows:<\/p>\n

    export const environment = { production: true, apiUrl: '\/api'\n};\n<\/code><\/pre>\n
    1.2 Build Angular App<\/strong>
    Angular.IO deployment guide<\/a> 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.<\/p>\n
    ng build --prod --output-path dist --base-href \/app\/\n<\/code><\/pre>\n
    1.3 Add WEB.CONFIG file<\/strong>
    Next would be to add the “web.config” file to angular app folder to configure iis rewrite rules.<\/p>\n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<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>\n<\/configuration>\n<\/code><\/pre>\n
    With the above files ready, we can xcopy the entire “dist” folder to “app” folder on shared hosting via FTP (FileZilla<\/a>).<\/p>\n
    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:
    \"article-20210109-02-aspnet-core-webapi-publish.PNG\"<\/p>\n
    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.
    \"article-20210109-03-aspnet-core-webapi-publish.PNG\"<\/p>\n
    We are ready to publish our project and click on Publish button now.
    \"article-20210109-04-aspnet-core-webapi-publish.PNG\"<\/p>\n
    Visual Studio will generate the published files in the following folder:<\/p>\n
    \/bin\/Release\/publish\/\n<\/code><\/pre>\n
    Depending upon your hosting provider, you may have to change the hosting model in Web.Config file.
    \"article-20210109-05-aspnet-core-webapi-publish.PNG\"<\/p>\n
    By default it is configured as “inprocess”. Change hosting model to “OutOfProcess” as in the following:<\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<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=\".logsstdout\" hostingModel=\"OutOfProcess\" \/> <\/system.webServer> <\/location>\n<\/configuration>\n<\/code><\/pre>\n
    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.<\/p>\n
      \n
    1. Build Angular App by ng build command<\/li>\n
    2. Add Web.Config file to angular project folder<\/li>\n
    3. Publish ASP.NET Core WebAPI project.<\/li>\n
    4. Modify Web.Config file<\/li>\n
    5. XCopy all files to the shared hosting account.<\/li>\n<\/ol>\n
      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.<\/p>\n
      Thanks<\/p>\n