Containerize LEADVIEW with Docker

This tutorial shows how to set up LEADVIEW Document Viewer in a Docker container.

Required Knowledge

In order to complete this project, install the LEADTOOLS Main Evaluation as well as Docker for Desktop:

• Docker Desktop
• Download LEADTOOLS

Prepare Project for Containerizing

Locate the LEADVIEW demo folder at <INSTALL_DIR>\LEADTOOLS23\Examples\Viewers\JS\LEADVIEW_DocumentViewerDemo.

Open the Terminal / Command Prompt or Windows PowerShell and change the directory to this location using:

cd '<INSTALL_DIR>\LEADTOOLS23\Examples\Viewers\JS\LEADVIEW_DocumentViewerDemo\' 

Run the following command:

dotnet build 

This will pull all the required runtime files from the <INSTALL_DIR>\LEADTOOLS23\Bin\JS\ folder and put them in the correct locations.

Open the LEADVIEW_DocumentViewerDemo.csproj project in a text editor, and comment out the following lines:

// <ItemGroup> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.js" link="wwwroot\Common\Leadtools.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Controls.js" link="wwwroot\Common\Leadtools.Controls.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.ImageProcessing.Main.js" link="wwwroot\Common\Leadtools.ImageProcessing.Main.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.ImageProcessing.Color.js" link="wwwroot\Common\Leadtools.ImageProcessing.Color.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.ImageProcessing.Core.js" link="wwwroot\Common\Leadtools.ImageProcessing.Core.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.ImageProcessing.Effects.js" link="wwwroot\Common\Leadtools.ImageProcessing.Effects.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Engine.js" link="wwwroot\Common\Leadtools.Annotations.Engine.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Designers.js" link="wwwroot\Common\Leadtools.Annotations.Designers.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Rendering.JavaScript.js" link="wwwroot\Common\Leadtools.Annotations.Rendering.JavaScript.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Automation.js" link="wwwroot\Common\Leadtools.Annotations.Automation.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Document.js" link="wwwroot\Common\Leadtools.Document.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Document.Viewer.js" link="wwwroot\Common\Leadtools.Document.Viewer.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Pdf.Compatibility.js" link="wwwroot\Common\Leadtools.Pdf.Compatibility.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Pdf.js" link="wwwroot\Common\Leadtools.Pdf.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Pdf.Worker.js" link="wwwroot\Common\Leadtools.Pdf.Worker.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.LEADVIEW.js" link="wwwroot\Common\Leadtools.LEADVIEW.js" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.LEADVIEW.css" link="wwwroot\Styles\Leadtools.LEADVIEW.css" /> 
// </ItemGroup> 
 
// <ItemGroup> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.d.ts" link="dts\Leadtools.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Controls.d.ts" link="dts\Leadtools.Controls.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Engine.d.ts" link="dts\Leadtools.Annotations.Engine.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Designers.d.ts" link="dts\Leadtools.Annotations.Designers.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Rendering.JavaScript.d.ts" link="dts\Leadtools.Annotations.Rendering.JavaScript.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Annotations.Automation.d.ts" link="dts\Leadtools.Annotations.Automation.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Document.d.ts" link="dts\Leadtools.Document.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.Document.Viewer.d.ts" link="dts\Leadtools.Document.Viewer.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\Leadtools.LEADVIEW.d.ts" link="dts\Leadtools.LEADVIEW.d.ts" /> 
//    <Content Include="..\..\..\..\Bin\JS\ThirdParty\jquery\jquery.d.ts" link="dts\jquery.d.ts" /> 
// </ItemGroup> 

Save the file to finish preparing the project for the container.

Creating the Docker File

Open the LEADVIEW_DocumentViewerDemo folder. Create a new file named Dockerfile. This file will contain all the instructions for Docker to build the Document Service. The Dockerfile instructs Docker to install the required dependencies within the container.

Setup Project Files

This section of the Dockerfile will set up the project files to be ran in the container. First, it installs the SDK required by the application (change to match accordingly, information found at hub.docker.com/_microsoft-dotnet-sdk).

Next, it sets the container's current directory to /app and copies all the files in the local directory to the container's app directory and restores and publishes the .csproj into the app/out directory on the container.

Add the following code to the Dockerfile:

### Building the project (hub.docker.com/_/microsoft-dotnet-sdk) 
 
FROM mcr.microsoft.com/dotnet/core/sdk:2.1 AS build-env 
WORKDIR /app 
 
# Copy everything and build 
COPY . ./ 
RUN dotnet restore \ 
    && dotnet publish -c Release -o out 

Setup Runtime Environment

This next section of the Dockerfile will set up the runtime environment in the container.

First, it installs the runtime required by the application (change to match accordingly, information found at hub.docker.com/_/microsoft-dotnet-aspnet). It then sets the containers current directory to temp and adds the debian package source to the sources.list file to be able to utilize and pull required dependencies via apt-get. Next, it sets a container environment DEBIAN_FRONTEND to non-interactive to prevent any confirmations or optional inputs to be requested by installing dependencies. Finally, it updates the apt-get and installs the apt-utils and wget to further facilitate installation of the other dependencies.

Add the following code to the Dockerfile:

### Building the runtime image (hub.docker.com/_/microsoft-dotnet-aspnet) 
 
FROM mcr.microsoft.com/dotnet/core/aspnet:2.1 
WORKDIR /temp 
 
# Add package source 
 
RUN echo "deb http://ftp.us.debian.org/debian stretch main contrib" >> /etc/apt/sources.list 
 
# Generate the APT cache 
 
ENV DEBIAN_FRONTEND noninteractive 
RUN apt-get update \ 
    && apt-get install -y apt-utils wget \ 

Setup LEADTOOLS Dependencies

This section installs the dependencies needed by LEADTOOLS in order to run in the container.

The Microsoft fonts section is only needed for applications with a GUI. The wkhtmltopdf section is needed to process HTML and provide dependencies in license processing. The final line removes any apt lists we generated as they are no longer needed.

Add the following code to the Dockerfile:

# Install the LEAD dependencies (https://www.leadtools.com/help/sdk/v23/main/api/getting-started-with-the-leadtools-linux-libraries-and-demo-projects.html) 
 
    uuid-dev uuid-runtime gcc g++ libc-dev-bin \ 
    linux-libc-dev libx11-6 libx11-dev libxt6 \ 
    libxt-dev sqlite3 libsqlite3-dev libfreetype6 \ 
 
# Install Microsoft fonts (http://askubuntu.com/a/25614) 
 
    && echo "ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula select true" | debconf-set-selections \ 
    && apt install -y fontconfig ttf-mscorefonts-installer \ 
 
# Install wkhtmltopdf (http://wkhtmltopdf.org) 
    && wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.stretch_amd64.deb \ 
    && apt install -y --allow-unauthenticated \ 
    ./wkhtmltox_0.12.6-1.stretch_amd64.deb \ 
    && ldconfig \ 
 
# Clean up APT cache 
 
    && rm -rf /var/lib/apt/lists/* 

Final Setup

In this final section we do a final clean up and setup, and then initialize the app.

Set the container's current directory to app and remove the temp directory we made above, as it is no longer needed. Next, copy the contents of the /app/out directory in the container that was stored in the buid-env section to the app folder. Lastly, set the command, ENTRYPOINT ["dotnet", "LEADVIEW_DocumentViewerDemo.dll"], to be ran when we start the container which triggers the application to run.

Add the following code to the Dockerfile:

# Delete the temp files 
WORKDIR /app 
RUN rm -rf /temp 
 
#EXPOSE 80 
 
# Copy and deploy application 
 
COPY --from=build-env /app/out ./ 
ENTRYPOINT ["dotnet", "LEADVIEW_DocumentViewerDemo.dll"] 

Create a Docker Ignore File

Create another file in the same directory named .dockerignore. This file is used by Docker to ignore specified files and directories. This will reduce the amount of time Docker takes to build the project since it will not have to migrate the entire directory to the container when it is being built.

Copy and paste the following into the .dockerignore file:

.\bin\ 
.\obj\ 
.\vs\ 
.\vscode\ 

Build the Docker Container

Open the Command Prompt/Terminal or Windows PowerShell and change the directory to the LEADVIEW_DocumentViewerDemo folder using:

cd '<INSTALL_DIR>\LEADTOOLS23\Examples\Viewers\JS\LEADVIEW_DocumentViewerDemo\' 

Build and name the container leadview using the script below:

docker build -t leadview . 

It may take a few minutes for Docker to complete. Once completed, the image can then be run.

Run the Docker Container

Once the Docker image can be run, use the following command to run the container:

docker run -p 5000:80 leadview 

The -p flag binds the container port 5000:80 to localhost:5000.

Make sure the LEADTOOLS Document Service is running and accepting requests on localhost:30000.

Go to the browser and enter https://localhost:5000 into its address bar. The following page should display.

Wrap-up

This tutorial showed how to containerize the LEADVIEW Document Viewer Demo in a Docker Container and run on localhost.

See Also

• Document Service in Docker