.NET Core 2.0, Angular 4 and MySQL. IIS Deployment – DEVELOPPARADISE
30/04/2018

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

Before we start the deployment process, I would like to point out one important thing. We should always deploy an application in the production environment as soon as we start with development. That way, we are able to observe how the application behaves in a production environment from the beginning of the development process.

That leads us to a conclusion that deployment process should not be the last step of the application’s lifecycle. We should deploy our application to the staging environment as soon as we start building it.

For the purpose of this deployment, we are going to build our Angular application for production to produce optimized static files and to combine them with the .NET Core server.

This process is pretty much the same for any client-side project you want (React, Vue.js or any other).

So, let’s start.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out Introduction of the .NET Core series.

For complete navigation and all the basic instructions of the Angular series, check out Introduction of the Angular series.

For the previous part, check out Creating Angular4 client side – Angular Delete Actions.

All required projects and the publish files are available at GitHub .NET Core, Angular 4 and MySQL. Part 16 – Source Code

This post is divided into several sections:

Building Angular Production Files

First, we need to create the production files for our Angular project by executing the command:

ng build --prod

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

This is the way to create the production files for the Angular project. But if we were to use React or Vue.js for the client side, the command would be: npm run build.

Publishing .NET Core Files for the IIS Deployment

Angular CLI is going to create a new folder with the name “dist” inside our project and publish all the production files inside. Copy all those files from the dist folder and paste them into the wwwroot folder inside the .NET Core’s project. Now with the static files in the right place, we are going to use Visual Studio’s feature to create publish files for the entire application.

Let’s create a folder on the local machine with the name publish. Inside that folder, we want to place all of our files for the deployment. Then, right-click on the AccountOwnerServer project and click the Publish option:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

In the next window, we are going to create the production files and place them in the “publish” folder:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

Excellent!

Now we have all the files in the right place.

Windows Server Hosting Bundle and the Hosts File

Prior to any further action, let’s install .NET Core Windows Server Hosting bundle on our system to install the .NET Core Runtime. Furthermore, with this bundle, we are installing the .NET Core Library, and the ASP.NET Core Module. This installation will create a reverse proxy between IIS and the Kestrel server, which is crucial for the deployment process.

During the installation, it will try to install the Microsoft Visual C++ 2015 Redistributable, so just let it do that.

After the installation, locate the Windows hosts file on C:/Windows/System32/drivers/etc and add the following record at the end of the file:

127.0.0.1   www.accountowner.com

Finally, save the file.

Installing IIS and the Site Deployment

If you don’t have IIS installed on the machine, you need to install it by opening ControlPanel and then Programs and Features:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

After the IIS installation finishes, open the Run window (windows key + R) and type: inetmgr to open the IIS manager:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

Now we can create a new website:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

In the next window, we need to add a name to our site and a path to the published files:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

After this step, we are going to have our site inside the “sites” folder in the IIS Manager. Additionally, we need to set up some basic settings for our application pool:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

After we click on the Basic Settings link, let’s configure our application pool:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

Your website and the application pool should be started automatically.

In order to deploy the application to IIS, we need to register the IIS integration in our .NET Core part of the project. We have already done that in our ServiceExtensions class, in Part 2 of this tutorial.

Excellent!

Everything is in place.

Now let’s open a browser and type http://www.accountowner.com to inspect the result:

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

.NET Core 2.0, Angular 4 and MySQL. IIS Deployment

Conclusion

By reading this post, you have learned:

  • How to build production files from the client side application
  • The way to publish files using Visual Studio
  • Which additional resources we need for IIS deployment to work
  • How to install IIS
  • To deploy the application on IIS

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, we are going to publish this complete application to the Linux environment.

If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content, we encourage you to subscribe to our blog.

The post .NET Core 2.0, Angular 4 and MySQL. IIS Deployment appeared first on Code Maze.