Run Angular and dotnet core api app in docker container with docker compose — Part 2 — The dotnet core API service and docker

“F5” + “NG Serve” to docker compose up — Part 2 — The dotnet core API service and docker

Photo by Lefteris kallergis on Unsplash

Hello Friends,

In this part we will be building our first application, the dotnet core API that serves information about countries. I am going to call it as KnowThatCountryAPI (ktcapi)

For the data, I am going to third party API provider. Please check it out.
https://restcountries.eu/

For this artical, I am not going to call the API in code. Instead, I have already downloaded all the information in json file and will be using that as a data source. You can check the full code on GitHub.

The objective of this series to understand the docker files hence, I wont go into details of each file in the API project, but this is how my CountriesController.cs looks like.

[ApiController]
    [Route("[controller]/[action]")]
    public class CountriesController : Controller
    {
        ICountryServices countryService;
        public CountriesController(ICountryServices country )
        {
            countryService = country;
        }
        [HttpGet]
        public List<CountryInfo> GetAll()
        {
            return countryService.GetAll();
        }

[HttpGet]
        public CountryInfo GetByID(int id )
        {
            return countryService.GetByID(id);
        }
}</span>

If we go to the root directory and run the app as

dotnet run</span>

we should be able to hit the API and get results.

[https://localhost:5001/Countries/GetAll](https://localhost:5001/Countries/GetAll)</span>

Notice that I am using port 5001 for api project in launchsettings.json but you can any port you prefer.

Great. Now that we have our API project ready, we need to run it into a docker container.

We do that by creating a dockerfile at the root.

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

WORKDIR /app

COPY ./KnowThatCountryAPI/ ./
RUN dotnet restore KnowThatCountryAPI.csproj

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENV ASPNETCORE_URLS=http://+:5005  
ENTRYPOINT ["dotnet", "KnowThatCountryAPI.dll"]

This is very basic docker file for running dotnet core apps and you can find the details on numerous blogs including the official documentation. But we want to specifically highlight below part.

ENV ASPNETCORE_URLS=http://+:5005  

This part sets the environment variable ASPNETCORE_URLS for the docker container. .net core uses this URL and port to run the application. Based on this, our application will run at port 5005 inside the docker container.

Now , we create an image from the docker file at current location (hence the dot in the end) by tagging it as ktcapi

docker build -t ktcapi .

and run ktcapi image by exposing port 5005 and tag it as ktcapi.

docker run --rm -p 5005:5005 --name=ktcapi ktcapi

At this point, we should be able to access the API at port 5005 inside the container.

Great. We have working container for our API.

In the next part, we will look at our UI application in Angular that will be using this API to display the data.

Thanks for reading…see you in part 3 of this series.

Comments

[Victor Coll]

Great article.

PS: I think you misstyped "dockerfile.yaml". The dockerfile doesn't have extension.

[Rohit Ramname]

Thank you Victor. I have corrected :).