> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/copy-assets.md).

# 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.

{% hint style="warning" %}
Commands to create directories and copy files may differ depending on your operating system. You may have to adapt the commands to fit your use case.
{% endhint %}

{% hint style="info" %}
The `path` parameter of the WebViewer constructor will be set to point to the location of these static files.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({ 
  path: '/lib/webviewer', // This is the path to the static assets we copy
}, document.getElementById('app'))
  .then((instance) => {
    
  });

```

{% endcode %}
{% endtab %}
{% endtabs %}
{% endhint %}

## Via package.json script

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.

If you have developers working on many different platforms, we recommend not using a package.json script and instead using a method that works cross-platform (see the other two options below).

{% tabs %}
{% tab title="Mac/Linux" %}
{% code title="package.json" lineNumbers="true" %}

```json
{
  "scripts": {
    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
    "start": "npm run copy-webviewer && vite",
    "build": "npm run copy-webviewer && vite build"
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Windows" %}
{% code title="package.json" lineNumbers="true" %}

```json
{
  "scripts": {
    "copy-webviewer": "mkdir public\\lib\\webviewer && xcopy /E /I /Y node_modules\\@pdftron\\webviewer\\public\\* public\\lib\\webviewer\\",
    "start": "npm run copy-webviewer && vite",
    "build": "npm run copy-webviewer && vite build"
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

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.

## Via script

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.

{% tabs %}
{% tab title="Shell" %}
{% code title="copy-webviewer.sh" lineNumbers="true" %}

```shell
# Mac/linux only

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



```

{% endcode %}
{% endtab %}

{% tab title="JavaScript" %}
{% code title="copy-webviewer.js" lineNumbers="true" %}

```js
const fs = require('fs-extra');

const copyFiles = async () => {
  try {
    await fs.copy('./node_modules/@pdftron/webviewer/public', './lib/webviewer');
    console.log('WebViewer files copied over successfully');
  } catch (err) {
    console.error(err);
  }
};

copyFiles();
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

## Via Plugin

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.

{% tabs %}
{% tab title="Vite" %}
If you are using Vite, we recommend using [`vite-plugin-static-copy`](https://www.npmjs.com/package/vite-plugin-static-copy)

{% code title="vite.config.js" lineNumbers="true" %}

```js
import { defineConfig } from 'vite'
import { viteStaticCopy } from 'vite-plugin-static-copy'

// https://vite.dev/config/
export default defineConfig({
  plugins: [viteStaticCopy({
    targets: [
      {
        src: 'node_modules/@pdftron/webviewer/public/*',
        dest: 'lib/webviewer'
      }
    ]
  })],
})

```

{% endcode %}
{% endtab %}

{% tab title="Webpack" %}
If you are using Webpack, we recommend [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin)

{% code title="webpack.config.js" lineNumbers="true" %}

```js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  ...otherConfig,
  plugins: [
    new CopyPlugin([{
        from: './node_modules/@pdftron/webviewer/public',
        to: './dist/public/lib/webviewer'
      }]
    ),
  ],
};
```

{% endcode %}
{% endtab %}

{% tab title="Parcel" %}
If you are using Parcel, we recommend [`parcel-reporter-static-files-copy`](https://www.npmjs.com/package/parcel-reporter-static-files-copy)

{% code title="package.json" lineNumbers="true" %}

```json
{
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "node_modules/@pdftron/webviewer/public",
        "staticOutDir": "public/lib/webviewer"
      }
    ],
    "watcherGlob": "**"
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/copy-assets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.