Copying WebViewer Static Assets

WebViewer comes with a number of static assets such as WebAssembly modules, HTML, and CSS files. These files typically cannot be bundled with the rest your code, and therefore they need to be served statically by your web server.

Most Javascript frameworks have a public or static folder - a place to put assets that need to be served statically. For example, if you had a file in public/img.png, that image would be served at /img.png

WebViewer files need to be placed in this folder so that they are served statically by your framework or server. The files that need to be copied are located in

• node_modules/@pdftron/webviewer/public if installed via NPM
• /lib if you downloaded the WebViewer ZIP file manually

All the files in this folder need to be copied somewhere where they will be statically served. We recommend moving them into a folder called lib/webviewer, but the actual location does not matter.

This process should always be automated as part of your build process. Below are a number of ways that you could use to achieve this.

1WebViewer({ 
2  path: '/lib/webviewer', // This is the path to the static assets we copy
3}, document.getElementById('app'))
4  .then((instance) => {
5    
6  });
7

The easiest way to copy the required WebViewer files is to create a script in your package.json file that moves the necessary files into your public/static folder.

1{
2  "scripts": {
3    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
4    "start": "npm run copy-webviewer && vite",
5    "build": "npm run copy-webviewer && vite build"
6  }
7}

The copy-webviewer script creates the destination folder if it does not exist and then copies the static assets into it. Please note that your folder names may vary.

Also notice that we updated our start and build command to first copy the WebViewer files over.

Another option is to create a script that copies the files over. This could be a node script or a shell script or whatever you choose. Below are some examples of scripts that could be used.

1mkdir -p ./public/lib/webviewer
2cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer

1const fs = require('fs-extra');
2
3const copyFiles = async () => {
4  try {
5    await fs.copy('./node_modules/@pdftron/webviewer/public', './lib/webviewer');
6    console.log('WebViewer files copied over successfully');
7  } catch (err) {
8    console.error(err);
9  }
10};
11
12copyFiles();

Please note that it is important that the script is ran before or during your build process and before you start your dev server.

Many frameworks have plugins that can automatically copy files over during startup and during builds. The concept is the same - we need the plugin to copy the node_modules/@pdftron/webviewer/public/ assets into our static folder. Below are some examples of different plugins that we recommend.

1import { defineConfig } from 'vite'
2import { viteStaticCopy } from 'vite-plugin-static-copy'
3
4// https://vite.dev/config/
5export default defineConfig({
6  plugins: [viteStaticCopy({
7    targets: [
8      {
9        src: 'node_modules/@pdftron/webviewer/public/*',
10        dest: 'lib/webviewer'
11      }
12    ]
13  })],
14})
15

1const CopyPlugin = require("copy-webpack-plugin");
2
3module.exports = {
4  ...otherConfig,
5  plugins: [
6    new CopyPlugin([{
7        from: './node_modules/@pdftron/webviewer/public',
8        to: './dist/public/lib/webviewer'
9      }]
10    ),
11  ],
12};

1{
2  "staticFiles": {
3    "staticPath": [
4      {
5        "staticPath": "node_modules/@pdftron/webviewer/public",
6        "staticOutDir": "public/lib/webviewer"
7      }
8    ],
9    "watcherGlob": "**"
10  }
11}

If your build system or framework is not mentioned above, you will likely find one that works for your use case.