DEV Community

Rohit Ramname
Rohit Ramname

Posted on • Updated on

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

Image for post

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>
Enter fullscreen mode Exit fullscreen mode

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

dotnet run</span>
Enter fullscreen mode Exit fullscreen mode

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

[https://localhost:5001/Countries/GetAll](https://localhost:5001/Countries/GetAll)</span>
Enter fullscreen mode Exit fullscreen mode

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

Image for post

Image for post

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"]
Enter fullscreen mode Exit fullscreen mode

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  

Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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

docker run --rm -p 5005:5005 --name=ktcapi ktcapi
Enter fullscreen mode Exit fullscreen mode

Image for post

Image for post

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

Image for post

Image for post

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.

Top comments (2)

Collapse
 
vcoll profile image
Victor Coll

Great article.

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

Collapse
 
rramname profile image
Rohit Ramname

Thank you Victor. I have corrected :).