Learn MVC Using Angular and Web API and Deploy to IIS

DZone 's Guide to

Learn MVC Using Angular and Web API and Deploy to IIS

Read on to learn how to use Angular, MVC, and Web API to create an application, and then deploy it to the Internet Information Server.

· Web Dev Zone ·
Free Resource


In this article, we are going to:

  • Publish MVC using Angular.
  • Publish a Web API application.
  • Deploy these applications to the Internet Information Server v.10.

Publish MVC Using Angular

Open any MVC project using an Angular application in Visual Studio 2017. Here, I am going to deploy my previous application that I used in my previous article, “Learn MVC Using Angular Dynamic Control in DataTable.” The reason for this is that in this application, I have used a Web API and a SQL Server. So let us start.

After opening your application, right click on the project name. Then select Publish.


It will be load one window, then select Create New, and click OK.


By selecting Folder, you should enable file browser control, like in the below picture:


After publishing, load output window will appear. If there are any issues while publishing, they will be indicated here. Release Mode is the default mode, but if you'd rather work in Debug Mode, you can change to that as well. 


Now our application is ready for deploy.

Publish Web API Application

Right click on the API Application. Then select Publish.


Here, you can follow the same steps we used above when publishing on MVC using Angular. 


Deploy to the Internet Information Server

Open the internet information server with administrator privileges. It will be suitable for all the windows operating systems.


Right click on the Sites Folder and click Add Website. Enter the website name and choose the physical path of the web application (Presentation Layer).


Note: Sometimes you can face version comparability issues. So first, do not forget to check “Application Pool.”


Then based on your framework version, it may require you to set the environment to the Server or OS.


I have set the port number as “8025” and binding type as HTTP. If you have a domain IP you will need to change your IP address. If you have a public IP, you can give a Host name, but be sure to not allow a duplicate name.


Everything is now done, and our application ready to be added to the IIS.


Right click on the application. Add one more application under the application and this is for the Web API.


Give the name of the application and select the API application's physical path.


Note: After this is complete, do not forget to update your security. Right click on both applications. Follow the above picture and add all the groups and give permissions for full control.


Right click on “Web API,” then browse and check it. The application will work based on its configuration. I have given the port number as “8025.” So it is working fine. Replace the web application consuming URL in web.config file.

<add key="APIUrl" value="http://localhost:8025/WebAPI" />  

You will also want to change your connection string:

    <add name="ConString" providerName="System.Data.SqlClient" connectionString="Data Source=MYLTOP;Initial Catalog=DBMyn;User ID=sa;Password=Thiru@123" />  

If you know the host IP address, enter it in the browser IP as I have shown below:


Now our application running from IIS!


In this article, we have seen learned MVC using Angular and Web API and deployed our app to the Internet Information Server (IIS). If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

angular ,asp.net mvc ,iis ,web api ,web dev

Published at DZone with permission of Thiruppathi Rengasamy , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}