Blog / Deployment
Deploy Angular and .Net Core API in same IIS folder
  • Sep 10, 2022
  • 95
  • 69

There are some benefits of keeping both UI and API parts in the same place for small projects. In this article, I will explain how I did to deploy Angular Web and ASP .Net Core API in the same folder in IIS

1. Structure of the Deployment folder

Even though the purpose is to keep the UI and API in the same place, we should separate the two part in that common folder. So, let's create a folder called api inside the directory of my website.


2. Configurations on IIS

Step 1: Create Virtual Directories

  • Open IIS 
  • Expand Sites > Default Web Site
  • Right click on Default Web Site and click on Add Virtual Directory. Here enter your website name.
  • Right click on the newly created Virtual Directory, create another Virtual Directory and called api
  • Right click on each Virtual Directory and Convert to Application

Once it's done, your directories will be similar to below:

Step 2: Change Authentications

Your application can be either Windows or Anonymous Authenticated. So it's up to you to enable these two options based on your needs. However, the ASP .NET Impersonation must be disabled.

  • In IIS left panel, click on each applications created (ASLTracking_V2 and api)
  • Double click on Authentication icon in Features View pane
  • Right click on ASP .NET Impersonation and select Disabled

Note: If ASP .NET Impersonation is not available, make sure to install everything under Internet Information Services in Turn Windows features on or off. Once it's done, delete the virtual directories created and create a new one again.

Step 3: Application Pool

It's ok for me to use Default Application Pool. However, to add a new Application Pool, you can do the following:

  • Right click on Application Pools in IIS left panel
  • Click on Add Application Pool
  • Configure your Application Pool as desired
  • Go back to both applications created, make sure they use the new application pool (Right Click > Manage Application > Advanced Settings)

I'm using Default Application Pool with below settings:

3. Deploy your ASP .NET Core API to the api folder

Note: Depends on Visual Studio version, these screens might be different. I'm using VS 2019.
Note: It's necessary to make your app offline during publishing. I can't publish sometimes due to "File in Use" error.

  • Right click on the project file in Visual Studio, then click on Publish...
  • Click on New to add a new Publish Profile or you can just Edit the existing one by clicking on More actions > Edits
  • Configure the settings as below. Note that Target Runtime is Portable.
  • Once done, click on Save.
  • Click on Publish on Publish screen in Visual Studio.

4. Deploy your Angular Web to the main folder

Note: Since your API is now in api folder, the API path in your Angular project must change to include "/api".

  • In Visual Studio Code, open a new Terminal. Run below command. Make sure to have --base-href /YourAppName/
ng build --base-href /YourAppName/
  • The published files will be found in dist/yourappname folder.
  • Copy all Files and Folders in this folder to the main folder in IIS.

Once it's done, your website is now ready. However, there will be some issue such as 404 when you refresh your page. This will be discussed in the next post.

Read more in this series:

If you have a Website or a Web API developed by using .Net Core and looking for a way to publish your applications, this post will explain how to do it using GoDaddy Windows Hosting.Note: at this mome ...

Search text in Stored Procedure in SQL SELECT DISTINCT AS Object_Name, o.type_desc FROM sys.sql_modules m INNER JOIN sys.objects o ON m.object_id = o ...

Using cherry-pick to select specific commits for your Pull Request.1. Create a new branch based on the target of the Pull Requestgit branch cherry-branch origin/master2. Switch to a new branchgit chec ...

In Object-Oriented Programming, S.O.L.I.D refers to the first five design principle for the purpose of making software designs more understandable, flexible, and maintainable. The principles was first ...

1. The Situation:Error Message: Pulse Secure Application failed to load Java. Please install correct JRE version.Description: This issue happens when I'm using a M1 Mac with a correct version of ...

Accelerated Mobile Pages (AMP) focuses on delivering static content from publishers as quickly as possible and possibly rewards early adopters with a boost in rank. Let's see how to implement it ...

Below is how to decrypt/convert a Hex string value into text using VB.Net:Decrypting Hex string value to string in VB.Net Function HexToString(ByVal hex As String) As String Dim text As New Sy ...

After a month of publishing on Google Play, Jungle Words has made it to the Top Android Games To Try Out In April 2021. Please check it out! GameKeys.netGameKeys is a website which introduces gam ...

Centering HTML elements is an important aspect for anything involving designing with CSS. There are various methods of centering things, however, it also depends on the elements that you are working w ...