By using this web site you accept our use of cookies. More information about cookies
Accept
Infopulse - Expert Software Engineering, Infrastructure Management Services
By using this web site you accept our use of cookies. More information about cookies
Accept
Infopulse - Expert Software Engineering, Infrastructure Management Services
Infopulse - Expert Software Engineering, Infrastructure Management Services
Send message
Send message Please fill in this quick form and we will send you a free quote shortly.
* Required fields
Your privacy is important to us. We will never share your data.
Subscribe to our updates Be among the first to get exclusive content on IT insights, innovations, and best practices.
* Required fields
Your privacy is important to us. We will never share your data.
Subscribe to our Vacancies Please fill in this quick form to be among the first to receive our updates.
* Required fields
Your privacy is important to us. We will never share your data.
Subscribe to our updates Be among the first to get exclusive content on IT insights, innovations, and best practices.
* Required fields
Your privacy is important to us. We will never share your data.
Photo of Anton Bastiuchenko Send an email to Anton Bastiuchenko Please fill in this quick form to contact our expert directly.
* Required fields
Your privacy is important to us. We will never share your data.
Infopulse - Expert Software Engineering, Infrastructure Management Services
Read the Full Case Study Don't miss the most interesting part of the story!
Submit this quick form to see the rest and to freely access all case studies on our website.
* Required fields
Your privacy is important to us. We will never share your data.

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu

List of Related Tutorials:

We continue our set of tutorials, dedicated to building solutions with Microsoft open-source cross-platform technologies stack and packed with Docker.

In the first and second parts of our tutorial, we developed an Angular 4 + .NET Core solution in Windows environment. This time we’ll extend our proof of concept to work with .NET Core in Ubuntu.

In this tutorial you’ll learn:

  • Running MongoDB (NoSQL database) as an alternative to MS SQL (SQL database)
  • Packing MongoDB in a Docker container
  • Changing our Angular 4 + .NET Core application to be compatible with MongoDB
  • Packing Angular 4 + .NET Core application to another Docker container

Before we start, you’ll need to install Git, NodeJS, Docker, .NET Core SDK, and Visual Studio Code with C# extension in the Ubuntu environment.

Initial Preparations

IMPORTANT! In this part of the article, we’ll be executing all commands in a terminal with root privileges. To run a terminal with root privileges, run sudo gnome-terminal in a terminal.

At first, you should execute git clone <your repository url> for our Angular 4 + .NET Core application, which we created in the previous parts of our tutorial (Part 1, Part2). Run it, using a familiar set of commands:

npm install

webpack

dotnet run

If you open a link, suggested by dotnet run instruction, you will see the same table as in a Windows environment. That means the code, which we created in Windows environment, will work in Ubuntu without any extra efforts.

Running MongoDB Server

It’s pretty easy to start working with MongoDB if you use Docker. Just run the following instruction in the terminal to assemble a Docker container with MongoDB inside:

docker run --name UbuntuMongoInstance -p 5533:27017 -d mongo

This instruction runs container named UbuntuMongoInstance based on Mongo image from a common repository and maps the exposed Port 27017 (the Mongo port) to the current host environment Port 5533.

The MongoDB container is up and running. We will need to run MongoDB shell in order to connect to the database server and create a new user, who will connect to the database from our application:

docker exec -it UbuntuMongoInstance mongo admin

db.createUser({ user: 'superuser', pwd: 'Qwer!234', roles: [ { role: "userAdminAnyDatabase", db: "admin" } ] });

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 022791

The database server is ready and it’s time to create a new database with a table and populate it with data.

For this purpose, we will use Robomongo – a very popular GUI tool for MongoDB.

In the screenshots below, you can see how to connect to our MongoDB server, running in the Docker container:

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 772069
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 708193
The connection is established and we need to create a new database, named “CompanyDB”:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 290246
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 033475

Let’s open the shell and run an “INSERT” instruction:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 678094

We use “insertMany” instruction to insert data into the table. Data is presented as a JSON array. The “Employees” table will be created automatically. Please note that data in the JSON array is very similar to the data, which we used in the previous part, as we wanted to minify changes to our frontend part:

db.employees.insertMany([{ employeeId: 2, birthDay: new Date('1990-11-05'), firstName: 'Orlando', lastName: 'Gee'},

 { employeeId: 5, birthDay: new Date('1986-07-14'), firstName: 'Keith', lastName: 'Harris'},

 { employeeId: 6, birthDay: new Date('1988-06-05'), firstName: 'Donna', lastName: 'Carreras'},

 { employeeId: 7, birthDay: new Date('1991-08-12'), firstName: 'Janet', lastName: 'Gates'},

 { employeeId: 8, birthDay: new Date('1994-06-24'), firstName: 'Lucy', lastName: 'Harringto'},

 { employeeId: 9, birthDay: new Date('1976-07-03'), firstName: 'Rosmarie', lastName: 'Carroll'},

 { employeeId: 11, birthDay: new Date('1979-07-07'), firstName: 'Dominic', lastName: 'Gash'},

 { employeeId: 12, birthDay: new Date('1990-03-02'), firstName: 'Kathlee', lastName: 'Garza'},

 { employeeId: 14, birthDay: new Date('1989-11-08'), firstName: 'Katherine', lastName: 'Harding'},

 { employeeId: 16, birthDay: new Date('1986-05-17'), firstName: 'Johnny', lastName: 'Caprio'}])

Let’s take a look at the current state of the shell:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 579462
Our database is ready. Now we will push our image to the Docker hub.

Save MongoDB in Docker Hub

While this procedure is not obligatory, we wanted to commit a stable version of our database in order to be able to rollback if something goes wrong.

Run docker ps instruction to find out the container ID:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 712190

Run the following commands to commit and push your image to the Docker Hub:

docker login

docker commit 00399 <your repository name>/ubuntumongodb

docker push <your repository name>/ubuntumongodb

As you may see, we used a magic “00399” code. It’s a short version of our container ID. You don’t need to write the whole ID –just insert first symbols, which can identify the container ID and are unique within the list of images in your environment:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 551995
Now we can see a new block in our repository:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 714899
Before we go on, we’ll need to make a few adjustments.

Project Adjustment

We’ll need to change our project so it can connect to MongoDB database and display retrieved data in a browser.

Open *.csproj file and put the following line to the “ItemGroup” section:

<PackageReference Include="MongoDB.Driver" Version="2.4.4" />

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 383348
We should specify a database connection string, and appsettings.json file is a good place for it.
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 656702

Explanation:

  • superuser – a user we created in MongoDB shell via terminal
  • Qwer!234 – user’s password
  • localhost:5533 – the hostname and the port of MongoDB server, which we mapped in docker run

We’re finished here, and a few more steps are left: to tune our backend and frontend.

Changing Backend

At first, we should create a database context, where we’ll adjust connection to MongoDB.

Create a “Service” folder and a MongoContext.cs file in this folder:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 236998

Now, we’ll create a MongoClient instance based on a connection string, which we’ll take from the appsettings.json file later. Add the following code to the file:

using MongoDB.Driver;
namespace Ng2AspCore.Services
{
	  public class MongoContext
	{
    	    public readonly IMongoDatabase db;
    	      public MongoContext(string connectionStr)
         	{
        		var mongoClient = new MongoClient(connectionStr);
        		db = mongoClient.GetDatabase("CompanyDB");
    	       }
	}
}


The service for the database connection is ready and we need to initialize it as a singleton service.

Open the Startup.cs file and insert the following line, which will start “MongoContext” as a singleton:

services.AddSingleton(new MongoContext(Configuration.GetConnectionString("MongoDbConnection")));

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 280879

Create “EmployeeMongo.cs” file in the DBModel folder. This file will contain a model, which reflects “employees” table in “CompanyDB” database:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 816414

…and insert the following code:

using System;
using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

namespace Ng2AspCore.DBModel
{
	[BsonIgnoreExtraElements]
	public class EmployeeMongo
	{
    	    [BsonElement("employeeId")]
    	    public int EmployeeId  { get; set; }
    	    [BsonElement("firstName")]
    	    public string FirstName  { get; set; }
    	    [BsonElement("lastName")]
    	    public string LastName  { get; set; }
            [BsonElement("birthDay")]
    	    public DateTime BirthDay { get; set; }
	}
}

Please note that [BsonIgnoreExtraElements] and [BsonElement(…)] attributes are necessary to bind retrieved data from MongoDB correctly.

The last step of our backend part adjustment will be to create a WebAPI controller.

Create “EmpMongoController.cs” file in the “Controllers” folder:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 757292
…and insert the following code:

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using MongoDB.Bson;
using MongoDB.Driver;
using MongoDB.Driver.Linq;
using Ng2AspCore.DBModel;
using Ng2AspCore.Services;

namespace Ng2AspCore.Controllers
{
	[Route("api/EmployeeMongodb")]
	public class EmpMongoController: Controller
	{
    	      private MongoContext context;
    	      public EmpMongoController(MongoContext context)
    	      {
    	          	this.context = context;
    	      }

    	      [HttpGet("GetAll")]
    	      public IEnumerable GetAllEmployeesFromMongodb()
    	      {
    	       return context.db.GetCollection("employees")
    	      .Find(x=>x.LastName.StartsWith("C")).ToList();
    	   }
      }
}

Let’s take a look at the class constructor. It has one MongoContext context parameter. We will receive the value of this variable through Dependency Injection, which .NET Core provides out-of-box when we use services.AddSingleton method. As an example of a query to MongoDB, we get all employees with a “GetAllEmployeesFromMongodb” action if their last name starts with “C” character.

Changing Frontend

Open employee.service.ts file, which you can find in <project root>\src\app\employees\employee.service.ts folder.

Change the existed endpoint URI to the new endpoint URI:

  • from api/Employee/GetAll
  • to /api/EmployeeMongodb/GetAll

Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 215609

No other changes should be done to the frontend part, as we haven’t changed the model of our data.

Changing “Hello World” Message (optional)

This is a cosmetic change to show that we are in Ubuntu environment.

Go to HelloController.cs and change our “Hello World” message:

  • From Hello Angular4 and ASP.NET Core from Windows 10
  • To Hello Angular4 and ASP.NET Core from Ubuntu

Running our Application

Now, our MongoDB database is running within the Docker container and our Angular 4 + .NET Core application runs within our Ubuntu host environment. Let’s launch all that:

webpack

dotnet run

Open your browser to check the result:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 590684

As we can see, all changes have appeared and we can see the employees list according to the query.

Interoperation between Containers

In the last neat trick, we will show you how to establish a connection between two Docker containers.

We’ll connect our Angular 4 + .NET Core application to the Mongo DB Docker container. To do that, we’ll need to deal with one small matter.

Previously, we’ve coded our Angular 4 + .NET Core application to connect to the database according to the connection string, specified in appsettings.json file:

“mongodb://superuser:Qwer!234@localhost:5533

The Angular 4 + .NET Core application thinks that “localhost” is the Docker container environment where the application is running.

We need to connect the application to another Docker container, where our MongoDB database is deployed now, and get rid of the “localhost”. We can specify the IP Address of the host environment in order to connect to MongoDB database in the container. Press “arrows” button on the top panel of Ubuntu GUI and select “Connection Information”:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 979506
You can find the IP Address in a popup window:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 462314
Let’s change “localhost” to the IP Address in the connection string:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 774562

Build the application again and pack it in a Docker container:

dotnet build

dotnet publish

docker build bin/Debug/netcoreapp1.1/publish -t ng2aspcorecontainer_linux

docker run -it -d -p 8888:80 ng2aspcorecontainer_linux

We mapped Port 8888 to the exposed port 80 in the container.

Run docker ps to check, which containers we have:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 884150

Run the application using the port, which we assigned:
Tutorial: Creating ASP.NET Core + Angular 4 application with connection to MongoDB in Ubuntu - Infopulse - 874848

As you can see, everything works fine and both containers interoperate with each other.

We’ll push our recently created container to the Docker hub just to make sure current progress is saved:

docker commit bf28 <your own repository>/ng2aspcorecontainer_linux

docker push <your own repository>/ng2aspcorecontainer_linux

You can find the final version of this proof of concept in our GitHub Repository.

With this article, we end our set of tutorials, dedicated to building Angular 4 + .NET Core solutions with Docker and open-source cross-platform technologies stack. For more information, please refer to the first and the second parts of our tutorials.

If you have any questions or comments, feel free to – we will be happy to help you!

Subscribe to our Newsletter