diff --git a/examples/webpack/.gitignore b/examples/webpack/.gitignore new file mode 100644 index 0000000..de4d1f0 --- /dev/null +++ b/examples/webpack/.gitignore @@ -0,0 +1,2 @@ +dist +node_modules diff --git a/examples/webpack/LICENSE b/examples/webpack/LICENSE new file mode 100644 index 0000000..d241b0d --- /dev/null +++ b/examples/webpack/LICENSE @@ -0,0 +1,42 @@ +The PSPDFKit Sample applications are licensed with a modified BSD +license. In plain language: you're allowed to do whatever you wish +with the code, modify, redistribute, embed in your products (free or +commercial), but you must include copyright, terms of usage and +disclaimer as stated in the license. + +You will require a commercial PSPDFKit License to run these examples +in non-demo mode. Please refer to sales@nutrient.io for details. + +Copyright © 2017-present PSPDFKit GmbH. +All rights reserved. + +Redistribution and use in source or binary forms, +with or without modification, are permitted provided +that the following conditions are met: + +- Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. + +- Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the + distribution. + +- Redistributions of PSPDFKit Samples must include attribution to + PSPDFKit, either in documentation or other appropriate media. + +- Neither the name of the PSPDFKit, PSPDFKit GmbH, nor its developers + may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/examples/webpack/README.md b/examples/webpack/README.md new file mode 100644 index 0000000..4347bad --- /dev/null +++ b/examples/webpack/README.md @@ -0,0 +1,71 @@ +# Nutrient Web SDK Example – Webpack + +This example shows how to build a [PSPDFKit for Web](https://www.nutrient.io/web/) web application with +[webpack](https://webpack.js.org/). + +This example uses the Standalone version of [PSPDFKit for Web](https://www.nutrient.io/web/) +distributed as an npm package. + +## Prerequisites + +- [Node.js](http://nodejs.org/) + +## Support, Issues and License Questions + +PSPDFKit offers support for customers with an active SDK license via https://www.nutrient.io/support/request/ + +Are you [evaluating our SDK](https://www.nutrient.io/try/)? That's great, we're happy to help out! To make sure this is fast, please use a work email and have someone from your company fill out our sales form: https://www.nutrient.io/sales/ + +## Getting Started + +Clone the repo: + +```bash +git clone https://github.com/PSPDFKit/pspdfkit-web-example-webpack.git +cd pspdfkit-web-example-webpack +``` + +Install the project dependencies with `npm`: + +```bash +npm install +``` + +## Running the Example + +We are ready to launch the app! 🎉 + +```bash +npm run start +``` + +You can now open http://localhost:8080 in your browser and enjoy! + +Upload a PDF either via the `Select File` button at top-left or by dropping a PDF into the page. + +We put a sample PDF document in the `assets` folder of this project for you to try! + +For further instructions please refer to our online guide available at +https://www.nutrient.io/guides/web/current/standalone/adding-to-your-project#toc_install-with-npm + +### Development mode + +To run the app in development mode run + +```bash +npm run start:dev +``` + +## webpack configuration file + +The `webpack` configuration file is located at [./config/webpack.js](config/webpack.js). + +## License + +This software is licensed under a [modified BSD license](LICENSE). + +## Contributing + +Please ensure +[you signed our CLA](https://www.nutrient.io/guides/web/current/miscellaneous/contributing/) so we can +accept your contributions. diff --git a/examples/webpack/assets/download.svg b/examples/webpack/assets/download.svg new file mode 100644 index 0000000..bffd3ab --- /dev/null +++ b/examples/webpack/assets/download.svg @@ -0,0 +1,4 @@ + + + + diff --git a/examples/webpack/assets/example.pdf b/examples/webpack/assets/example.pdf new file mode 100644 index 0000000..59b035f Binary files /dev/null and b/examples/webpack/assets/example.pdf differ diff --git a/examples/webpack/bin/verify-install.js b/examples/webpack/bin/verify-install.js new file mode 100755 index 0000000..dcf5c79 --- /dev/null +++ b/examples/webpack/bin/verify-install.js @@ -0,0 +1,15 @@ +try { + require("pspdfkit"); +} catch (error) { + if (!/cannot find module/i.test(error.message)) { + process.exit(0); + } + + console.log( + `This application requires you to install PSPDFKit for Web manually using your unique customer or trial url. +For further instructions please refer to our online guide available at: + +https://www.nutrient.io/guides/web/current/standalone/adding-to-your-project#toc_install-with-npm`, + ); + process.exit(1); +} diff --git a/examples/webpack/config/webpack.js b/examples/webpack/config/webpack.js new file mode 100644 index 0000000..c7a4b60 --- /dev/null +++ b/examples/webpack/config/webpack.js @@ -0,0 +1,102 @@ +/** + * webpack configuration file used to build both a development and production + * version of the app. + * + * The production version is built in the `./dist` folder. When building the + * development mode it also starts a web server at http://localhost:8080 + * + * This configuration file creates two main bundles: + * + * - vendor.js - contains external libraries (including pspdfkit.js). + * - app.js - contains the application code. + * + * It also copies the WASM/ASM and CSS files from the npm package folder, since + * `PSPDFKit.load` loads them relative to the application execution path. + */ + +const path = require("node:path"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); + +/** + * Determine whether we are in development mode. + * + * $ NODE_ENV=development webpack --config config/webpack.js + */ +const isDev = process.env.NODE_ENV === "development"; + +const filesToCopy = [ + // PSPDFKit files. + { + from: "./node_modules/pspdfkit/dist/pspdfkit-lib", + to: "./pspdfkit-lib", + }, + // Application CSS. + { + from: "./src/index.css", + to: "./index.css", + }, + // Assets directory. + { + from: "./assets", + to: "./assets", + }, +]; + +/** + * webpack main configuration object. + */ +const config = { + entry: { + // Creates an `app.js` bundle which contains the application code. + app: path.resolve("./src/index.js"), + }, + + // Configure Compilation Mode + mode: isDev ? "development" : "production", + + output: { + path: path.resolve("./dist"), + publicPath: "/", + // [name] is the bundle name from above. + filename: "[name].js", + }, + + resolve: { + modules: [path.resolve("./src"), path.resolve("./node_modules")], + }, + + plugins: [ + // Automatically insert