Run Angular and dotnet core api app in docker container with docker compose — Part 1 — The Plan

“F5” + “NG Serve” to docker compose up — Part 1 — The Plan

Hello Friends,

In this short beginner friendly series, I will be documenting a path to run .core api project and angular 7 app in a docker container instead of running and deploying as 2 separate apps. The objective of this series is not the code but is to get familiarize with docker and how we can build a container with 2 application that talk to each other.

Use case:

Create an API application in .Net Core that provides API to access basic information about countries.

Create an UI application in Angular that uses countries API to get the data and display it on the UI.

Here in this scenario, there are few challenges.

• Build server should have .Net SDK 3 which is used to develop the API project.

• Build server should have specific version of Node and Angular CLI that is used to develop the project

• We will have to setup 2 applications in multiple environment in the SDLC process and configure them correctly. (Port, protocols etc)

• All developers should have these specific framework versions installed on their machine to be able to contribute.

• All of this turn into another requirement; THE Document (which nobody will end up reading). This document will need have different sections for Developer setup and server setup.

This looks like a great use case for Docker. In this process, we will be creating a docker file for each of these apps. This will help us to work on these apps individually. In the end, will create one docker compose file that will tie both of them together in case where we need to run it as ONE application.

In short, this will be the end result.

and the folder structure will be as below.

As you can see here, we will have 2 applications, KnowThatCountryAPI which will be our dotnet core API project and KnowThatCountryUI, which will be our UI project which will get data from the API project. In the end, we have docker-compose.yaml file to tie them up together.

That’s the introduction. Thank you for reading. Will see you in part 2:
“F5” + “NG Serve” to docker compose up — Part 2 — The dotnet core API service and docker