How to deploy Angular 6 and Asp Net Core Application in IIS 8?

In this tutorial, we are going to learn how to deploy Angular 6 and Asp Net Core application in IIS (Internet Information Service) manager in step by step. First-of-all, we will install .net core in our system, then we will enable IIS manager on our window, then we will deploy our Angular 6 and Asp Net Core application project, and then finally we will add our angular 6 project to IIS and run with the system ip address.

Previous tutorials of Angular 6 & Asp Net Core Series.

• How to setup a project using Angular CLI in VS Code?
• How to Setup a project with Angular 6 and ASP.NET Core 2.1 ?
• How to create CRUD Operations using Angular 6 and ASP.NET Core?
• How to implement Search functionality in Angular 6 & ASP.NET Core?
• How to implement server-side filtration in angular 6 & asp.net core ?
• How to sort record using angular 6 and asp.net core?
• Search, Sort, and Pagination in angular 6 and asp.net core.
• How to create web api in angular 6 and asp.net core?
• How to implement Angular 6 authentication and authorization using Asp Net Core?
• How to upload file using Angular 6 and Asp Net web API?
• How to add static Pie-Chart in Angular 6 and Asp Net Core Application?

How to deploy Angular and Asp Net Core Application on IIS.

The first two steps are prerequisites for deploying Angular 6 and Asp Net core Application. If you have already done these steps, then skip these two steps and start with step 3.

• Deploy Angular 6 and Asp Net Core App to Azure using FileZilla
• Deploy Angular 6 and Asp Net Core App to Azure using Visual Studio 2017

Step # 1 – Install .net core

First-of-all, we need to install .net core runtime in the system where we want to deploy our Angular 6 and Asp Net Core application. So, click here to get .net core and then install it in your system.

Step # 2 – Enable IIS on windows 10

Note:- If you have already enabled IIS on your machine, then skip this step. Otherwise follow the step and enable the IIS on your machine.

So, go to control panel in windows 10 => then click on “programs” => then “Programs and Features” => then click on “Turn windows features on or off” from the sidebar. It will open a new popup with the name of “Windows Features”. Now, click on “Internet Information Services” plus icon => then “Web Management Tools” plus icon => then check the “IIS Management Console” checkbox. And then click the ok button and then selected features will be added and applied to windows 10.

Note:- Now make sure your project is in production mode. If you project is not in production mode, then go to project terminal and run this below command.

=> ng build --prod

Step # 3 – Publish Angular 6 and Asp Net Core Application.

Note:- Before going to publish just make sure you don’t have dist folder in your wwwroot folder under the web.host project.

Now, in this step we will publish our Angular 6 and Asp Net Core application. So, go to project folder and then right click on project and then select publish as you see in below screenshot.

Then you will see, it will open a new window with the name of Publish. Now, click on “New Profile” link, then it will open new popup with the name of “Pick a publish target”. Then click on “Folder” from sidebar as you see in the below screenshot.

Now, click on “Browse…” button to choose path for your publish folder, it will open a new popup window with the name of “Target Location”. Now create a new folder with the name that you want (mine “Publish”) and then inside the publish folder create a new folder with the name of “v1” as you see in below screenshot.

Now, just click open button, and it will close the “target Location” popup. Now, in “Pick a publish target” popup, and then click on “Publish” button. Then it will close the this popup, now again you will see the “Publish” window. Now click on “Publish” button as you see in the below screenshot.

Then it will take some time to publish your project within your directory. Then it will add the project files in your folder directory as you see in the below screenshot.

Now, go to folder where you have published your project and open the file appsettings.json and then change the “ServerRootAddress” and “ClientRootAddress” as you see in the below file line 6 and 7.

Now, go to version 2 folder where you have published your project, and then wwwroot => then assets => and then appconfig.json. Open this file and then update the “remoteServiceBaseUrl” and “appBaseUrl” as you see in the below file.

Now, go to v2 folder => then src folder => then assets and then appconfig.json and then change the file as you see in the below file.

Step # 4 – Add Angular 6 and Asp Net Core Website on IIS.

Now, go to IIS and then go to sidebar and right click on the “Sites” folder => then click on “Add Website”. Then it will open a new popup with the name of “Add Website”. Now, enter the name of site, choose physical path where you have published your Angular 6 and Asp net Core project, then assign IP Address with port 80 and then click ok button as you see in the below screenshot.

Now, go to browser and then write the url like this “http://http:192.168.1.68:80/” of “http://localhost/dashboard” then you will see the out as you see in the below screenshot.