Document Engine and Nutrient Web viewer integration — other runtimes

You can integrate Document Engine with Nutrient Web SDK. This integration enables you to offload document processing, rendering, and management to the server, enabling features such as real-time collaboration, annotation synchronization, and improved performance for large or complex documents.

This guide provides an overview of how to set up the integration of Document Engine with Nutrient Web SDK in a web application library or framework of your choice. The steps include setting up the server, handling file uploads, and generating JWTs for secure document access.

Requirements

Document Engine is compatible with a range of platforms. Below is the list of supported operating systems.

macOS:
- Ventura
- Monterey
- Mojave
- Catalina
- Big Sur
Linux:
- Ubuntu, Fedora, Debian, and CentOS
- Ubuntu and Debian derivatives (such as Kubuntu, Xubuntu) are also supported

Processor requirements:

64-bit Intel (x86_64) processors
ARM (AArch64) processors

Minimum system requirements:

At least 4GB of RAM, regardless of the operating system

Installing Docker

Document Engine is distributed as a Docker container. To run it on your computer, you need to install a Docker runtime distribution for your operating system.

Install and start Docker Desktop for Mac. For detailed instructions, refer to the Docker website(opens in a new tab).

Setting up Document Engine

Copy the code snippet below and save it anywhere on your computer in a file called docker-compose.yml:

version: "3.8"

services:
  document_engine:
    image: pspdfkit/document-engine:1.10.0
    environment:
      PGUSER: de-user
      PGPASSWORD: password
      PGDATABASE: document-engine
      PGHOST: db
      PGPORT: 5432
      API_AUTH_TOKEN: secret
      SECRET_KEY_BASE: secret-key-base
      JWT_PUBLIC_KEY: |
        -----BEGIN PUBLIC KEY-----
        MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2gzhmJ9TDanEzWdP1WG+
        0Ecwbe7f3bv6e5UUpvcT5q68IQJKP47AQdBAnSlFVi4X9SaurbWoXdS6jpmPpk24
        QvitzLNFphHdwjFBelTAOa6taZrSusoFvrtK9x5xsW4zzt/bkpUraNx82Z8MwLwr
        t6HlY7dgO9+xBAabj4t1d2t+0HS8O/ed3CB6T2lj6S8AbLDSEFc9ScO6Uc1XJlSo
        rgyJJSPCpNhSq3AubEZ1wMS1iEtgAzTPRDsQv50qWIbn634HLWxTP/UH6YNJBwzt
        3O6q29kTtjXlMGXCvin37PyX4Jy1IiPFwJm45aWJGKSfVGMDojTJbuUtM+8P9Rrn
        AwIDAQAB
        -----END PUBLIC KEY-----
      JWT_ALGORITHM: RS256
      DASHBOARD_USERNAME: dashboard
      DASHBOARD_PASSWORD: secret
    ports:
      - 5000:5000
    depends_on:
      - db
  db:
    image: postgres:16
    environment:
      POSTGRES_USER: de-user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: document-engine
      POSTGRES_INITDB_ARGS: --data-checksums
      PGDATA: /var/lib/postgresql/data/pgdata
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Starting Document Engine

To start Document Engine, follow the steps below.

Open your terminal emulator.
Use the terminal emulator integrated with your code editor or IDE. Alternatively, you can use Terminal.app or [iTerm2][].

Use your code editor’s integrated terminal or [PowerShell][].

Use the terminal emulator integrated with your code editor or IDE, or the one bundled with your desktop environment.
Go to the directory where you saved the docker-compose.yml file:
Terminal window
```
cd <path-to-directory-with-docker-compose-yml>
```
Run the following:
Terminal window
```
docker-compose up
```

This command might take a while to run, depending on your internet connection speed. Wait until you see the following message in the terminal:

document_engine_1  | Access the web dashboard at http://localhost:5000/dashboard

Document Engine is now up and running!

Uploading a document to Document Engine

With Document Engine running, visit http://localhost:5000/dashboard and authenticate using "dashboard" for the username and "secret" for the password. Choose Add Document and upload the document you want to work with.

Screenshot showing the create document modal window in the Document Engine Dashboard

Once the document is uploaded, visit http://localhost:5000/dashboard/documents to see the list of available documents. Each document is identified by an ID. Take note of the ID of the document you just uploaded, as you’ll need it shortly.

Screenshot showing the uploaded document in the list of available documents

The ID will look similar to 7KPS8X13JRB2G841X4V7EQ3T2J.

Generating the application

Now, the application using Document Engine needs to be provisioned.

To use Document Engine, you’ll need a web application library or framework. Depending on the chosen technology, different steps might be necessary. Refer to the technology/framework-specific guidelines for setting up the project.

Creating a JSON Web Token (JWT)

Nutrient requires the use of a JSON Web Token (JWT) to authenticate and authorize a viewer session against Document Engine.

You can generate JWTs using one of the libraries available in the programming language of your choice. The list of available libraries can be found at jwt.io(opens in a new tab).

When generating the JWT, make sure to use the RS256 signing algorithm and the private key below:

When it comes to claims, you must provide the document ID, the set of permissions, and an expiry time in the future.

Some libraries might automatically inject the exp (expiration time) field, while other ones expect the field to be present in the payload. Check the documentation of the chosen JWT library to see how it’s handled.

{
    "document_id": documentId,
    "permissions": ["read-document", "write", "download"]
  }

Loading an existing document

To view the document in the browser, first you need to load the Nutrient Web SDK JavaScript library. Add the following script tag to the page that will present the document:

<script src="https://cdn.cloud.nutrient.io/[email protected]/pspdfkit.js"></script>

Then, on the same page, add the div element where the Nutrient Web SDK viewer will be mounted:

<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; max-width: 800px; height: 480px;"></div>

Finally, add a script that will initialize the viewer:

<script>
  PSPDFKit.load({
    serverUrl: "http://localhost:5000",
    container: "#pspdfkit",
    documentId: documentId,
    authPayload: { jwt: jwt },
    instant: true,
  })
    .then(function (instance) {
      console.log("PSPDFKit loaded", instance);
    })
    .catch(function (error) {
      console.error(error.message);
    });
</script>

There are two variables that need to be passed in: documentId and jwt. Refer to the documentation of the web application framework you use to see how to pass variables to the page, or use hardcoded values. When you open the page, you’ll see the Nutrient Web SDK viewer showing the document you just uploaded. If you annotate the document and refresh the page, all changes will be automatically persisted.