Run Angular and dotnet core api app in docker container with docker compose — Part 2 — The dotnet core API service and docker
Tags: docker, dotnet, angular, dotnetcore
Published: 2021-01-12 03:44:59

<span class="w"></span>

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


<noscript><img alt="Image for post" class="dx gd dy ge t" src="https://miro.medium.com/max/14720/0*FdzZEFC7w989WAls" width="7360" height="4912" srcSet="https://miro.medium.com/max/552/0*FdzZEFC7w989WAls 276w, https://miro.medium.com/max/1104/0*FdzZEFC7w989WAls 552w, https://miro.medium.com/max/1280/0*FdzZEFC7w989WAls 640w, https://miro.medium.com/max/1400/0*FdzZEFC7w989WAls 700w" sizes="700px"/></noscript>

Photo by [Lefteris kallergis](https://unsplash.com/@lefterisk?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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/](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](https://github.com/rramname/KTCDocker/tree/master/KnowThatCountryAPI).

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.

![Image for post](https://miro.medium.com/max/60/1*nvFMmxmoDGABck1QexK7nQ.png?q=20)

<noscript><img alt="Image for post" class="dx gd dy ge t" src="https://miro.medium.com/max/3182/1*nvFMmxmoDGABck1QexK7nQ.png" width="1591" height="664" srcSet="https://miro.medium.com/max/552/1*nvFMmxmoDGABck1QexK7nQ.png 276w, https://miro.medium.com/max/1104/1*nvFMmxmoDGABck1QexK7nQ.png 552w, https://miro.medium.com/max/1280/1*nvFMmxmoDGABck1QexK7nQ.png 640w, https://miro.medium.com/max/1400/1*nvFMmxmoDGABck1QexK7nQ.png 700w" sizes="700px"/></noscript>

Great. Now that <span id="rmm">w</span>e 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
```


![Image for post](https://miro.medium.com/max/60/1*lnWAafyXWC3zynv40VzIWw.png?q=20)

<noscript><img alt="Image for post" class="dx gd dy ge t" src="https://miro.medium.com/max/1398/1*lnWAafyXWC3zynv40VzIWw.png" width="699" height="229" srcSet="https://miro.medium.com/max/552/1*lnWAafyXWC3zynv40VzIWw.png 276w, https://miro.medium.com/max/1104/1*lnWAafyXWC3zynv40VzIWw.png 552w, https://miro.medium.com/max/1280/1*lnWAafyXWC3zynv40VzIWw.png 640w, https://miro.medium.com/max/1398/1*lnWAafyXWC3zynv40VzIWw.png 699w" sizes="699px"/></noscript>

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

![Image for post](https://miro.medium.com/max/60/1*nvFMmxmoDGABck1QexK7nQ.png?q=20)

<noscript><img alt="Image for post" class="dx gd dy ge t" src="https://miro.medium.com/max/3182/1*nvFMmxmoDGABck1QexK7nQ.png" width="1591" height="664" srcSet="https://miro.medium.com/max/552/1*nvFMmxmoDGABck1QexK7nQ.png 276w, https://miro.medium.com/max/1104/1*nvFMmxmoDGABck1QexK7nQ.png 552w, https://miro.medium.com/max/1280/1*nvFMmxmoDGABck1QexK7nQ.png 640w, https://miro.medium.com/max/1400/1*nvFMmxmoDGABck1QexK7nQ.png 700w" sizes="700px"/></noscript>

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.