Section:

Framework Agnostic Setup

This project sample uses React as the front-end framework, but you may wish to use (or not use) a different framework. This section shows how to setup the front-end agnostic of any framework:

Prerequisites

It is recommended you install Node and npm.

NPM packages

Copying resources to public/ folder

There are several directories that need to be copied and served locally in your application.

There are two folders you need to copy:

  • node_modules/@pdftron/webviewer/public
  • node_modules/@pdftron/webviewer-bim/dist

Bash

1cp -R ./node_modules/@pdftron/webviewer/public public/webviewer/lib
2cp -R ./node_modules/@pdftron/webviewer-bim/dist public/webviewer-bim

See scripts/copy-webviewer-files.js for a simple script to do this.

Afterwards the folder structure will look something like:

sh

1public/
2  webviewer/
3    lib/
4      ui/
5      core/
6  webviewer-bim/
7    compress/
8    oda/
9    webviewer-bim-min.js

Sample code

JavaScript

1import  Webviewer  from  '@pdftron/webviewer';
2import { initializeBimViewer } from '@pdftron/webivewer/bim-client'
3
4Webviewer({
5  path: '/webviewer/lib',
6}, document.getElementById('viewer')).then(instance  => {
7
8  const license = `---- Insert commercial license key here after purchase ----`;
9  const serverURL = `---- Insert server URL after setup ----`;
10  const options = { license: license };
11  const WebViewerBIM = await initializeBimViewer(instance, serverURL, options);
12  WebViewerBIM.File.load3dAsset('Add URL to your 3D asset here');
13
14});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales