ChemDraw JS: Webpack React Github demo implementation | ChemDraw JS version 23

Please try the following:
- Download the zip file from Github: https://github.com/Revvity/ChemDraw-JS-Public-Examples/archive/refs/heads/main.zip

- Extract the contents and cd to the project directory: `cd webpack-typescript-react-demo`
- You should have received three files as part of your ChemDraw JS subscription:
1. An npm package as a .tgz file
2. A license as an XML file
3. A ChemDraw Web Service (CDWS) Docker image
- Copy the revvity-signals-chemdraw-js-23.0.0-5343+556024f9d.tgz into your /dependencies folder. The npm package will need to be renamed as `chemdraw-js.tgz`



- Your dependencies folder should look like this:



- ChemDraw JS Web Service will need to be run using Docker for full functionality. Map port 80 in the Docker image to 8080 on your machine, e.g.:
docker load --input chemdraw-web-service-2.2.0-develop-1150.tar.gz
docker run -d -p 8080:80 pkiinformatics/chemdraw-web-service:2.2.0-develop-1150
Follow the instructions in the ChemDraw.Web.Service.Installation.Guide.pdf

For further details on deploying ChemDraw JS backend, please check the following articles:
Deploy ChemDraw JS 22 and ChemDraw Web Service 22 on Linux_Ubuntu Server with NGINX reverse proxy

Deploy ChemDraw Web Service using AWS Elastic Load Balancing: Support for SSL Termination

## Bundling with Webpack

Because ChemDraw JS cannot be bundled directly into an application, we recommend using a script tag in the application's HTML entry point to load the library script.

First configure the [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the ChemDraw JS library to the webpack output. The `from` location should be set to the path to the library inside node_modules, while the `to` location should be set to a suitable location relative to the output path (In our example, we use `assets/chemdrawweb`). By using this plugin, the library will work correctly with a development server (e.g. webpack-dev-server) and a production build.

Once the copy is configured the script tag must be included in the output HTML. Our example uses the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) with the [html-webpack-template](https://github.com/jaketrent/html-webpack-template) to do this. The plugin is commonly used by webpack projects to dynamically generate HTML. The html-webpack-template package provides a template that provides extended options to the plugin. In our example, we use the `script` entry to add a script tag to the applications HTML file.

plugins: [  new CopyPlugin([{ from: "node_modules/@pki-chemistry/chemdraw-js/dist/chemdrawweb", to: "assets/chemdrawweb"}]),

  new HtmlWebpackPlugin({

    title: "cdjs-webpack-demo",

    template: require("html-webpack-template"),

    scripts: ["http:/assets/chemdrawweb/chemdrawweb.js"]

  })

]

If you are providing your HTML file without using a template generator, you should include the following script tag in your HTML file:-

`<script src="http:/assets/chemdrawweb/chemdrawweb.js"></script>`

- - Install project dependencies using npm: npm ci
- Start the development server: npm start

If you receive the following error:
code EINTEGRITY npm ERR! sha512-50ruizEwP94JN7XxBDqTSwC0kQRdcyxKFV8YLFEGqyXmYv8WTumz/b2qk7MDCZRlQjljN+FvmjN65kVyIVTO4g== integrity checksum failed when using sha512: wanted sha512-50ruizEwP94JN7XxBDqTSwC0kQRdcyxKFV8YLFEGqyXmYv8WTumz/b2qk7MDCZRlQjljN+FvmjN65kVyIVTO4g== but got sha512-3u8IGvSbriTzpIxcit5NH3q8P9uA331KVvk9+hj1mbepL77y7wMLatDSB45QaN+9iJQ3ZWi14Ph0FvAysXBGA==. (3291 bytes)

Please try the following:
To avoid any package creating a conflict in your local system, remove the node_modules and _cache folder from the .npm location along with the package.json file.
Run "npm cache clean --force" command to clean the local npm cache.
Next run "npm cache verify"
Try 'npm update'
Run npm install –verbose

With the Branding change last year, we need to change the namespace from perkinelmer to RevvitySignals in the following files:
ChemDraw-JS-Public-Examples-main\webpack-typescript-react-demo\src\ToolbarTools.ts
ChemDraw-JS-Public-Examples-main\webpack-typescript-react-demo\src\App\App.tsx
ChemDraw-JS-Public-Examples-main\webpack-typescript-react-demo\src\ChemDrawEditor\ChemDrawEditor.tsx
@ ./src/ChemDrawEditor/index.tsx 6:0-33 6:0-33
@ ./src/App/App.tsx 44:0-51 88:28-42
@ ./src/App/index.tsx 6:0-22 6:0-22
@ ./src/index.tsx 9:0-28 11:24-27

After renaming all namespaces to RevvitySignals please try:
- - Install project dependencies using npm: npm ci
- Start the development server: npm start

You should get the following on http://localhost:3000/

-