Merge pull request #1 from PSPDFKit/ritesh/webpack

Implement Webpack example for PSPDFKit integration

Author: ritz078

examples/webpack/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

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 [email protected] 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.

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.

examples/webpack/assets/download.svg

@@ -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);
+}

examples/webpack/assets/example.pdf

@@ -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 <script src="[name].js"><script> to the page.
+    new HtmlWebpackPlugin({
+      template: path.resolve("./src/index.html"),
+      chunks: ["vendor", "app"],
+    }),
+
+    // Copy the WASM/ASM and CSS files to the `output.path`.
+    new CopyWebpackPlugin({
+      patterns: filesToCopy,
+    }),
+  ],
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        // Creates a `vendor.js` bundle which contains external libraries (including pspdfkit.js).
+        vendor: {
+          test: /node_modules/,
+          chunks: "initial",
+          name: "vendor",
+          priority: 10,
+          enforce: true,
+        },
+      },
+    },
+  },
+
+  devServer: {
+    port: 3000,
+  },
+};
+
+module.exports = config;