In this post I will talk about the basics of publishing and deploying Angular and .Net Core Web applications as a single Unit.
In my scenario, I already have a web application built using .Net Core, Angular and Entity Framework and I will use this application for deployment purposes. You can instead use your own application for deployment purposes. The .NET Core web application is also serving an Angular application as well. Lets see how can we publish and deploy this application.
We can break-down the process in two steps as follows:
- Building and Publishing the Application
- Deploying and Running the Application
Building and Publishing the Applications
Building the Angular App
As our Angular application will be hosted inside .NET Core web application, we can build our Angular application first using following command. The output of the build process will be placed inside wwwroot directory which is a default directory for delivering static contents for .NET Core web applications (I set this path in angular.json file for build-output path).
Build & Publish .NET Core Application
Microsoft have great resources available to describe step by step approach. However, for quick reference, I’ll show you how to do this step which requires running following power-shell command.
With our Angular build part already done, lets execute following command to build and publish the .NET Core Web Application.
Command will create a publish folder in your project’s bin directory as follows:
Now this folder is the output we can take and deploy. I am going to copy it on a different location and rename the folder to AccountingApp as well.
Database Deployment
There are many different ways you can deploy the database. However, in our application, we are using Entity Framework migration strategy and if needed we can simply run those migrations against a target database or can also generate script to be deployed in another way.
Deploying and Running the Application
So, we have a self-contained deployment folder for our web-application. The simplest thing we can do is to run it with Kestrel. Kestrel is a cross-platform web server for ASP.NET Core and it is included by default in ASP.NET Core project templates.
Running Using Kestrel
You can use Kestrel by itself or with a reverse proxy server, such as Internet Information Services (IIS), Nginx, or Apache. A reverse proxy server receives HTTP requests from the network and forwards them to Kestrel.
I have copied the publish folder to a different location and renamed it to AccountingApp as follows:
Now open a poweshell prompt inside this folder and execute following command to run the web application using Kestrel:
Now browse to this URL using a web browser and we have our published web-app shows up:
Using a Reverse Proxy
Use of reverse proxy can help in many ways. For example it can limit the exposed public surface area of the apps that it hosts. Also, it can provide an additional layer of configuration and defense and might integrate better with existing infrastructure. There are many other benefits you can look at Microsoft website and in the following section how can be use IIS to deploy our published web application.
Enable IIS Features
Based on your OS, you might need to enable IIS feature as shown below. Microsoft has great information about this process in details.
You will need to install Hosting Bundle which is needed to host .NET Core Applications under IIS. You can download that from Microsoft website.
Deploy to IIS
Once feature is installed, you can run it form start-menu as shown blow:
The IIS Screen will show up with a default website.
Right-click on Sites-node in the left section and add a new website as follows:
For physical path value, I select the same folder where copied the published output earlier. So location is same, we are just delegating its management to IIS.
Configure Applications Pool
Creating a website in IIS also created an application pool and we just need to set it as follows:
Adjusting Folder Security
You might need to adjust security permissions as follows for the AccountingApp folder.
Add a new user as follows:
With all this in-place, open up the browser and access the application and you will see familiar dashboard but this time application is being served by IIS.
Summary
Deploying .Net Core web applications is not that difficult. I have shown you two very common ways to delivery your application. Similar approach is used if you want to deploy to cloud services or you can take one step further and deliver it via docker containers.
You can use any .NET core based application for deployment purposes and if you want to know more details about above shown application, you can check its link in the references section.
References
Build Accounting Application Using .NET Core, Angular and Entity-Framework.
https://www.amazon.com/dp/B08D8PLN6T