# # Integrating FoxitPDFSDKForWeb Via NPM

FoxitPDFSDKForWeb versions 7.5.0+ support integrating from npm. Since SDK requires static resources to be served, there is an extra step is required which involves manually copying those static files into your dist directory.

## # 1. Install via NPM

    npm i @foxitsoftware/foxit-pdf-sdk-for-web-library

## # 2. Copy static assets

After installed the package, the static assets are located in `node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library` and must be moved into a location that will be served and publicly accessible(usually a `dist` or `build` folter):

### # npm script

1. install `cp-cli` package:

       npm i -D cp-cli

2. then add a script to your `package.json`.

       {
           "scripts": {
               "move-sdk-assets": "cp-cli ./node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib ./dist/lib",
               "build": "mybuildscript && npm run move-sdk-assets"
           }
       }

This will copy all required files into `dist/lib` folder before your build is started.

### # Webpack

If you're using webpack to bundle your project, you can use copy-webpack-plugin
(opens new window) to copy files automatically.

Install the package:

    npm i -D copy-webpack-plugin

then add the following to your webpack config:

    var CopyWebpackPlugin = require('copy-webpack-plugin');
    module.exports = {
        ...otherConfig,
        plugins: [
            new CopyWebpackPlugin({
                patterns: [{
                    from: './node_modules/@foxitsoftware/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib',
                    to: './dist/lib'
                }]
            })
        ]
    };

Please refer to this address
(opens new window) for the complete webapack configuration.

## # 3 Usage

After completing the above copy resource operation, we can get the access path of a resource, which will be used in the initialization parameters

    var PDFUI = UIExtension.PDFUI;
    var Events = UIExtension.PDFViewCtrl.Events;
    var pdfui = new PDFUI({
        viewerOptions: {
            libPath: '/lib',
            jr: {
                workerPath: '/lib/',
                enginePath: '/lib/jr-engine/gsdk',
                fontPath: 'https://webpdf.foxitsoftware.com/webfonts/',
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui',
        appearance: UIExtension.appearances.adaptive,
        fragments: [],
        addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile
            ? '/lib/uix-addons/allInOne.mobile.js'
            : '/lib/uix-addons/allInOne.js',
    });

For more details on usage, see our online showcase on Codesandbox
(opens new window);