What’s up guys, Eze is here. Again to those who follow me on Twitter (if you are not a follower you better do it now @skielo) already knows I’ve been working on an app to show you how to create an Angular 2 app using a ASPNET Core 1.1 Web API with a MongoDB database and using all those components in different Docker containers. Today I want to show you how easy is to get up and running an Angular 2 app and connect it to ASPNET Core 1.1 Web API to retrieve data from a MongoDB database, sounds amazing right? well this will be the first out of a series of post where we are going to find out more about those tools
The frontend skeleton
First we need build the frontend and the back-end for our app. As I already told you the front-end will be an Angular 2 app. To create it we are going to use the Angular cli tool. There is nothing new here, and you can follow the steps I already wrote here. The only difference is this time we are creating a server.js file which will be our entry point in the Docker container.
The back-end skeleton
Well the back-end will be an ASPNet Core 1.1 Web API. This API will receive request from the frontend, get/put data to the database and provide a response. to create this application we will use the Yeoman generator. So let’s first install all the required dependencies by running the following command npm install -g yo email@example.com generator-docker. This will install the latest version of the Yeoman tool + the latest generator for aspnet projects and a docker generator. The last one is not completely necessary but it good to have it.
Creating the code
Once we have all the required tools by executing this command yo aspnet Yeoman will create an small web api project. In order to test if our project has been created correctly we need navigate into the project folder and execute this commands: dotnet restore and then dotnet run, when the server has started we can browse this url http://localhost:5000/api/values to test our webapi.
In order to create a data layer to access our MongoDB from our Web API project I’m using MongoDB Driver for C#. Basically I’m using the repository pattern, if you want to know more about that please follow this link. Something which is important to highlight is that within the connection string I’m using as a server name / ip address the name mongodb after the docker image. I will go into more details lately.
Then I’ve created a new web api controller to handle the request from our Angular 2 app.
Well we are almost ready to go. In order to complete our system we need to get the right version of Docker according with our operating system. Please follow this link to get it. Also it’s important to know that we will required the docker-toolbox, you can find it here. This toolbox will create the docker machine in our computer and using this console we will interact with our docker application.
By running this command yo docker and selecting .Net Core as a project we need to follow some bootstrapping scripts to create the docker files in our project. Regardless of the structure used by this tool in my project I’ve created a folder called .docker where I place the created dockerfile. This is a recommendation by @DanWahlin.
Exploring the dockerfile
In the dockerfile we will find the instruction for docker to build and run our images. In the example below we instruct docker to base our image in one from the docker hub: microsoft/dotnet:latest but, what that means? Well that means that we are going to use the official docker image created by microsoft to run a dotnet app. Then we select which port will be available within our container and which is the entry point for this image.
COPY bin/Debug/netcoreapp1.1/publish /app
ENV ASPNETCORE_URLS http://*:80
ENTRYPOINT ["dotnet", "WebAPIApplication.dll"]
Exploring the docker-compose file
This is the file we are going to use to build our images. In this file we specify all the characteristics of our images. We also define the container_name (otherwise docker will pick a funky name on runtime for us), the image we want to use, the internal al external port for the container and something which is really cool, the network. This network specification will allow us to talk from one container to another. As you can see in the code below I’m using as a container_name for the database mongodb, the same I used in the connection string of our web api.
Start the engine
Now we have our applications ready, we already configured the containers so it’s time to start our system. The first step is build and publish our .Net Core app. By running this commands dotnet build and dotnet publish we will do that. Then we need open the Docker Toolbox terminal. This will initialize our docker machine.
If you are running docker in Windows you probably are using hyper-v, if this is your case you might have to edit the start.sh file for your docker-toolbox in order to use hyperv as a driver and a virtual switch.
docker-machine create –driver hyperv –hyperv-virtual–switch “My Internal Switch”
Once the toolbox terminal is done we need to navigate to our project folder and run the command docker-compose build. This will build our images and after that by running docker-compose up -d, Docker is going to start up all our images and keep it running in daemon mode. And that’s it, our application will work all together. Because the images are running in daemon mode we can check the logs by executing docker-compose logs, there is another useful command which is docker ps -a which will show us all the instance for our images.
If you want to see the full code working together I have a working example here. Be aware that this is only an example, is not meant to be use in a production environment because as you can see the database doesn’t have any security at all. If you want more details please follow the official documentation.
For a complete reference of Angular 2 use this link.
For a complete reference of .Net Core use this link
For more references about Mongo images use this link.
If you found this post useful please don’t forget to press the like button and share it. If you are in doubt don’t hesitate to ask a question and as always thank you for reading.