Could you explain how to integrate the PSPDFKIT with ReactJS + Electron?

[mirror-coder]

I had tried to integrate the PSPDFKIT with ReactJS + Electron before.
In the development mode, it worked well but it didn't worked in the built-in electron app.
But your application works well.
So, I wanna know the main point for integrating.
Thanks.

[supercodestart]

Hi, @mirror-coder.

I think your question is very important one.

As you know via PSPDFKIT, the configurations were different between ReactJS and Electron.

To resolve this, I am sure the conditional configuration should be implemented.

So, I added the below code for an initialization of the PSPDFKIT.

const isDevMode = process.env.NODE_ENV === 'development';

//...

  useEffect(() => {
    const container = containerRef.current;

    (async function () {
      PSPDFKit.unload(container);

      instance = await PSPDFKit.load({
        container: isDevMode ? container : '#pdf-viewer',
        document: props.document,
        baseUrl: isDevMode
          ? `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
          : undefined,
        appName: 'populate-pdf-form',
      });

      const toolbarItems = instance.toolbarItems;

      instance.setToolbarItems(toolbarItems.filter((item) => permittedToolbarTypes.includes(item.type)));
    })();

    return () => PSPDFKit && PSPDFKit.unload(container);
  }, [props.document]);

As you can see, in the development mode, I used the ReactJS configuration and, otherwise, I used the Electron configuration.

And one most important thing is left.

The different two configurations were implemented, so it's clear that the pspdfkit-lib folder should have two locations for each configuration.

The scripts folder contains three JavaScript files, in there, two files are located for two configurations.

And I updated the package.json as following.

  "scripts": {
    "verify-installation": "node scripts/verify-install.js && node scripts/copy-pspdfkit-files-public.js",
    "del-pspdfkit-folder-build": "rimraf build/pspdfkit-lib",
    "copy-pspdfkit-files-build": "node scripts/copy-pspdfkit-files-build.js",
    "prebuild": "npm run verify-installation",
    "prestart": "npm run verify-installation",
    "start": "react-scripts start",
    "build": "react-scripts build && npm run del-pspdfkit-folder-build && npm run copy-pspdfkit-files-build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:start": "concurrently -k \"cross-env BROWSER=none npm start\" \"wait-on tcp:127.0.0.1:3000 && electronmon .\"",
    "electron:package:mac": "yarn build && electron-builder -m -c.extraMetadata.main=build/electron.js",
    "electron:package:win": "yarn build && electron-builder -w -c.extraMetadata.main=build/electron.js",
    "electron:package:linux": "yarn build && electron-builder -l -c.extraMetadata.main=build/electron.js"
  },

As a result, for each script, the suitable configuration will be selected.

I hope this helps your understanding.

Thanks.