DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Build a Simple Chat Server With gRPC in .Net Core
  • Amazon Lightsail: Virtual Cloud Server

Trending

  • Advancing Your Software Engineering Career in 2025
  • Navigating and Modernizing Legacy Codebases: A Developer's Guide to AI-Assisted Code Understanding
  • Dropwizard vs. Micronaut: Unpacking the Best Framework for Microservices
  • Building an AI/ML Data Lake With Apache Iceberg
  1. DZone
  2. Coding
  3. Frameworks
  4. Publish and Deploy Angular and .NET Core Applications as a Single Unit

Publish and Deploy Angular and .NET Core Applications as a Single Unit

In this post I will talk about the basics of publishing and deploying Angular and .Net Core Web applications as a single unit.

By 
Jawad Hasan Shani user avatar
Jawad Hasan Shani
DZone Core CORE ·
Jul. 28, 20 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
26.0K Views

Join the DZone community and get the full member experience.

Join For Free

In this post I will talk about the basics of publishing and deploying Angular and .Net Core Web applications as a single Unit.

In this 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 if u like. 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 the 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).

Building Angular


Build & Publish .NET Core Application

Microsoft has great resources available to describe a 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, let's execute following command to build and publish the .NET Core web application.

Building .NET Core app


Command will create a publish folder in your project’s bin directory as follows:

Creating a publish folder

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. 

AccountingApp folder

Database Deployment

There are many different ways you can deploy the database. However, in my case, the application is 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:

Copied publish folder

Now open a PowerShelld prompt inside this folder and execute following command to run the web application using Kestrel:

Run web application


Now browse to this URL using a web browser and we have our published web-app shows up:

Published web app


Using a Reverse Proxy

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

Enable IIS

You will need to install Hosting Bundle which is needed to host .NET Core Applications under IIS. You can download that from Microsoft website.

Hosting Bundle

Deploy to IIS

Once the feature is installed, you can run it from the Start menu as shown below:

Run from start menu

The IIS Screen will show up with a default website.

Default website

Right-click on Sites-node in the left section and add a new website as follows:

Add new website

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:

Application Pool

Adjusting Folder Security

You might need to adjust security permissions as follows for the AccountingApp folder. 

Adjusting folder security


Add a new user as follows:

Add new user


With all this in place, open up the browser and access the application and you will see a familiar dashboard but this time application is being served by IIS. 

Dashboard


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

application .NET AngularJS

Published at DZone with permission of Jawad Hasan Shani. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Build a Simple Chat Server With gRPC in .Net Core
  • Amazon Lightsail: Virtual Cloud Server

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!