Containerize LEADVIEW with Docker

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

Summary This tutorial covers how to Containerize the LEADVIEW Document Viewer Demo using Docker.
Completion Time 30 minutes
Platform JavaScript Application using Docker
IDE Visual Studio 2017, 2019
Development License Download LEADTOOLS

Required Knowledge

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

Prepare Project for Containerizing

Locate the LEADVIEW demo folder at <INSTALL_DIR>\LEADTOOLS21\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo.

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

cd '<INSTALL_DIR>\LEADTOOLS21\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo\' 

Run the following command:

dotnet build 

This will pull all the required runtime files from the <INSTALL_DIR>\LEADTOOLS21\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

In the <INSTALL_DIR>\LEADTOOLS21\Examples\JS\DocumentViewerDemos\LEADVIEW_DocumentViewerDemo directory, create a new file named Dockerfile. This file will contain all the instructions for Docker to build the container. The Dockerfile instructs Docker to install the required dependencies within the container so that everything functions correctly.

Copy and paste the following code to the Dockerfile:

### Building the project 
FROM AS build-env 
# Copy CSPROJ and restore 
COPY \*.csproj ./ 
RUN dotnet restore 
# Copy everything else and build 
COPY . ./ 
RUN dotnet publish -c Release -o ./out/ 
### Building the runtime image 
WORKDIR /temp 
# Add package source 
RUN echo "deb 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 
# Install the LEAD dependencies 
RUN apt-get install -y \ 
 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 ( 
RUN echo "ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula select true" | debconf-set-selections 
RUN apt-get install -y \ 
 fontconfig ttf-mscorefonts-installer 
# Install wkhtmltopdf 
RUN wget -q 
RUN apt install -y --allow-unauthenticated \ 
RUN ldconfig 
# Clean up APT cache 
RUN rm -rf /var/lib/apt/lists/* 
# Delete the temp files 
RUN rm -rf /temp 
# 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:


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>\LEADTOOLS21\Examples\JS\DocumentViewerDemos\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.

Navigate to localhost:5000 to display LEADVIEW


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

See Also

Help Version 21.0.2020.11.10
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.