A Docker container image is a lightweight, self-contained, executable software package that contains everything needed to run an application: code, runtime, system tools, system libraries, and settings.

This tutorial shows how to create an ASP.NET Core Web application that hosts the required backend and the client-side MVC Document Editor that is deployed, including the required synchronization TCP service, all prerequisites, and fonts to be used in the editor.

Prerequisites

The following requirements must be installed on your local machine in order to follow this tutorial:

Tutorial

The following tutorial steps will guide you through the process of creating the backend, preparing the image and creating the container in Docker.

Creating the Backend Application

The ASP.NET Core backend application implements the WebSocketMiddleware to communicate with the Document Editor and the synchronization TCP service.

  1. Follow this tutorial to create a basic backend application:
    Getting Started: Document Editor with ASP.NET Core

  2. In the Solution Explorer, select the project and create two new folders named InstallFonts and Helpers by choosing Project -> New Folder from the main menu.

  3. In the folder Helpers, create a new class file Fonts.cs and copy the following code into it:

    using System.Runtime.InteropServices;
    public class Fonts
    {
    [DllImport("gdi32", EntryPoint = "AddFontResource")]
    public static extern int AddFontResourceA(string lpFileName);
    [System.Runtime.InteropServices.DllImport("gdi32.dll")]
    public static extern int AddFontResource(string lpszFilename);
    }
    view raw test.cs hosted with ❤ by GitHub

  4. Add your desired font files (OTF and TTF) into the folder InstallFonts and set the Copy to Output Directory property to Copy always.

  5. Open the Program.cs and add the following code after the app.UseMiddleware entry:

    foreach(string font in Directory.GetFiles(Path.Combine(app.Environment.ContentRootPath, "InstallFonts"))) {
    Fonts.AddFontResource(font);
    }
    view raw test.cs hosted with ❤ by GitHub

Preparing the Image

A Docker image is created automatically based on a Dockerfile by reading the instructions. The following steps are required to prepare a build process:

  1. Preparing Folders

    Create a new folder named Docker_Editor that contains the following sub-folders and files:

    • Folder named BackendApp
      This folder contains all your published files of the ASP.NET Core web application.

    • Folder named SyncService
      This folder contains all required files of the TCP synchronization service.

    • A text file named Dockerfile (no extension)
      The Docker description file.

    Docker folder structure

  2. Copy ASP.NET Core Web Application

    Into the folder BackendApp, copy all files required for your ASP.NET Core web application that uses the document editor. If you are using the Publish method of Visual Studio, copy the content of the publish target directory into the BackendApp folder. A similar deployment would look like the structure in the following screenshot:

    Docker folder structure

  3. Copy TCP Synchronization Service

    Into the folder SyncService, copy all redistributable files required to deploy the TX Text Control TCP Synchronization Service. Based on the components you are deploying, the folder should look similar to this screenshot:

    Docker folder structure

  4. Dockerfile

    A list of possible ASP.NET Core Runtime images can be found here:

    ASP.NET Core Runtime

    The following Dockerfile uses Windows Server Core 2019 (LTSC) and should have the following content:

    Loading...

    Important

    The ENTRYPOINT in line 20 of the above Dockerfile defines how to start the application. This command accepts an array that is transformed into a command-line invocation with arguments. The first element defines that dotnet should be executed. The second element is the application assembly name.

    ENTRYPOINT ["dotnet", "your_application_name.dll"]

    In the above Dockerfile, change BackendApp.dll to the assembly name of your application.

Creating the Image

In order to create the image, use the following commands:

  1. Assume that you have installed Docker for Windows, open a PowerShell command window with explicit administrator rights and change to the directory where you created the folder Docker_Editor.

  2. Type in and execute the following command to build the Docker image based on the Dockerfile in the same directory:

    docker build -t txcore .

Creating and Testing the Container

  1. Create and start a container based on the created image with the following command:

    docker run -it --rm -p 5000:80 -e ASPNETCORE_URLS=http://+:80 --name aspnetcore_sample txcore

  2. Open any browser and open the exposed location http://localhost:5000/.