Learn MVC Using Angular and Web API and Deploy to IIS

4 Min Read 221 Views

Introduction:

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.

MVC

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

MVC

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

MVC

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.

MVC

Now our application is ready for deploy.

Publish Web API Application

Right click on the API Application. Then select Publish.

MVC

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

MVC

Deploy to the Internet Information Server

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

MVC

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).

MVC

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

MVC

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

MVC

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.

MVC

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

MVC

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

MVC

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

MVC

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.

MVC

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: 

<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 it in the browser IP as I have shown below:

MVC

Output

Now our application running from IIS!

Conclusion

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!

Tags: