Docker Basic .Net Core REST API And Angular Application

Build the .Net Core API and Angular Application step-by-step and then enables docker in that and after creating images run that into the docker container.

Install Visual Studio Community (it’s free) with the ASP.NET and web development workload.

1. Create a new ASP.NET Core Web API Project

2. Configure the new Project

3. Set Additional Information of Project like Target Framework, Authentication Type, Enable Https, Enable Docker, Docker OS Support Etc.

Add the new Controller “DemoController”. It will return Welcome to the Docker World when we hit the get method.

This is the Dockerfile that is created by Visual Studio when we enable the Docker Support option while creating the new Web Application.

After that when we run the application by using Docker then It will create the Docker Image in Docker Desktop which you installed on your local machine. (Please confirm the Docker Desktop is running properly on your machine and it will be in running mode)

Here you will see the output after executing the get method of DemoController.

Build Angular Application

Open the Visual Studio Code

1. Create the new Directory at a particular location

mkdir WebAPP

2. Go inside the WebAPP Directory

cd .\WebAPP\

3. Install the Angular CLI inside that.

npm install -g @angular/cli

4. After Installing Angular CLI, Create the new Angular Project.

ng new WebApp

5. Later on go inside your newly created app and run your Angular Application.

ng serve

Here you will see your application is in the running mode now

Now we are going to run this application on Docker. So for that

First, we need to create the Dockerfile in the Root Directory of our Angular Application without any extension specified to it.

So here see, I used node alpine image to run our application inside the Docker Container and set the app directory as the default working docker directory, then copy package.json into that directory from the local machine. After that run, the npm install command installs the required packages and dependencies of our angular application. Later on, copy the content of the app directory and then execute npn run command to build our application as on the production environment, Then we Nginx server image to run our application in docker container and manage the things like routing, reverse proxy, and load balancing.

Now we create the .dockerignore file to exclude some data while building our image using the docker file.

Now we are going to create a docker image of our application which we are going to run in the docker container. So for that.

2. Open the command prompt and run the following command

ng serve build –prod

this will generate the dist folder which is used when we deploying our application in the production environment.

3. Build the docker image.

docker build -t web-app .

here we mentioned the docker image name “webapp” and then put a dot next to that which means the current directory of our application.

4. Finally now we are going to run our image in the docker container

docker run — publish 4200:80 — name webappcontainer web-app

here we can set the default container port as 80 and the application port as 4200 and then mentioned the container name and image name next to that.

Here you can see how your application is running under the docker container.

I hope you understand the things related to docker.

HaPpy Coding!