How to use ketcher package with example (how to set things up)

[Yuting918]

Hello everyone,

I know this can be a stupid question for you. But I am really really new to this area and I am trying to build and run the "example" locally from my local machine so that I can then potentially make some editions.

I am struck at the very step for 3 days and still making little progress, below is what I've tried:

1. I cloned the whole repository into my local machine
2. I went into the example directory https://github.com/epam/ketcher/tree/master/example of my local copy
3. I use yarn install and then yarn start
4. yarn start gives errors like 'Couldn't find a script named "start".' etc... I fixed it by installing packages with yarn
5. File finally complies but I got the following error:

Can anyone please help how can I utilizing the ketcher package or maybe inform me at which step I made a mistake. It would be really appreciated. Many thanks in advance.

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example'
resolve './src' in '/Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example'
  using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.wasm doesn't exist
      as directory
        existing directory /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src
          using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src)
            using path: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index
              using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.wasm doesn't exist

webpack 5.70.0 compiled with 1 error in 361 ms

[Svetlana-Gubina]

Hello, @Yuting918 !
You should run at once ketcher-core, ketcher-react and example (yarn start:standalone or yarn start:remote - depending on the desired version: https://lifescience.opensource.epam.com/ketcher/demo.html;
please note, that for remote version you may need to install Indigo service locally: https://lifescience.opensource.epam.com/indigo/service/index.html)

Here are some details https://github.com/epam/ketcher/blob/master/DEVNOTES.md
Thank you!

[luna215]

How would you go about setting this up with an existing React app? I'm having trouble doing this. This example doesn't work for me: #578