Learn MVC : Using Angular And Web API And Deploy To IIS

Introduction:

In this article we are going to,

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

Publish MVC using Angular Application

Open any MVC project using 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.”

After opening your application right click on above the project name. Then select publish.



It will load one window then select create new. After completion click ok button.



If you select folder, It should enable file browser control like below picture



After Publish, load output window. If there are any issues on publish, it will be indicated. Release mode is the default one. If you need to, you can change Debug mode.



Now application is ready for deployment.

Publish Web API Application

Right click above the API Application. Then select publish.



You can follow the above steps such as Publish MVC Using Angular Applications.



Deploy to Internet Information Server

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



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



Notes

Sometimes you may face version compatibility issues. So first, do not forget to check “Application Pool”.



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



I have set port no as “8025” & binding type is http. If you have domain IP then change your IP address. If you have public IP, you can give Host name & do not allow a duplicate name.



Everything is done and the application is ready for surfing.



Right click on the application, Add one more application under the application & this is for Web APIs.



Give the alias name of application & select the API application physical path.



Note

After completion, do not forget to update security. So right click on both applications. Keep following the above picture and add all the groups & give permissions for Full control.



Right click on “Web API” then Browse & check it. Application will work based on configuration. I have given port no “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  also want to change conneciton string

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

If you know the host IP address, enter in browser IP & port+Application Name or your working current system then follow localhost & port+Application Name

Output



Now the application is running from IIS

See my previous Angular JS Articles

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart
• Learn MVC Using Angular Flot Chart
• Learn MVC Using Angular xEditable
• Learn MVC Using Angular Idle
• Learn MVC Using Angular Wizard
• Learn MVC Using Angular - Maps
• Learn MVC Using Angular Bootstrap Nav Tree
• Learn MVC Using Angular Image Crop
• Learn MVC Using Angular UI Select
• Learn MVC Using Angular File Upload
• Learn MVC Using Angular UI Calender
• Learn MVC Using Angular Pdf File Viewer
• Learn MVC Using Angular Dynamic Control in Datatable

Conclusion

In this article, we have learned about MVC using Angular & Web API to deploy to internet information server (IIS). If you have any queries, please tell me through the comments section. Because your comments are very valuable.

Happy Coding!