In This Topic ▼

Containerize LEADVIEW with Docker

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

Overview
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 mcr.microsoft.com/dotnet/core/sdk:2.1 AS build-env 
WORKDIR /app 
 
# 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 
 
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 
 
# 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 (http://askubuntu.com/a/25614) 
 
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 https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox_0.12.5-1.stretch_amd64.deb 
RUN apt install -y --allow-unauthenticated \ 
 ./wkhtmltox_0.12.5-1.stretch_amd64.deb 
RUN ldconfig 
 
# Clean up APT cache 
 
RUN rm -rf /var/lib/apt/lists/* 
 
# 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\

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

Wrap-up

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