Integrate full feature Ketcher into Vite React app (probably via iframe)

[Fleury93]

Hello,
I cannot understand how to integrate a full-featured Ketcher into our React app built via Vite. We use React 18, after installing Ketcher packages, and some dependencies conflict. So, I would like to deploy Ketcher via Nginx in docker.
So I downloaded ketcher-remote-2.26.0.zip which I think is built to be used within Indigo service ran as a separated service.

I deployed the downloaded HTML to Ngix in docker. It was smooth without problem. After opening the browser see the Ketcher UI in the console there is an error GET http://localhost:8001/v2/info 404 (Not Found) main.db240f66.js:2

I do not know how to connect Indigo services (run in docker as well, I can hit /v2/indigo/info endpoint successfully, so seems it is working).

Open structure -> Image Recognition service is not available. Yeah well, this should be available with Indigo backend so it's okay.
Info popout showing:

I thought I downloaded a full-featured remote not a standalone. Any ideas on how can I run it I will really appreciate any. Documentation is IMHO not completed and not sufficient and clear for me.

Thanks

[rrodionov91]

Hi @Fleury93
If you want to use "ketcher-remote-2.26.0.zip" artifact to run ketcher then there is a way to connect it to remote indigo by passing api_path parameter in url. Example: http://localhost:4002?api_path=http://localhost:3001 if indigo working on 3001 port.

Another way is to create your own app using ketcher as npm dependencies. You can find example here: https://github.com/epam/ketcher/blob/master/example/src/App.tsx
In this case you can set path to indigo in .env file using API_PATH variable.

[Fleury93]

Hi, @rrodionov91, thanks for quick answer.
It seems it can work, but there is a problem with CORS:

Access to fetch at 'http://localhost:8002/info' from origin 'http://localhost:8001' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
:8002/info:1 
        
Failed to load resource: net::ERR_FAILED

So I should make reverse proxy for the indigo to be on the same URL, or is there another way without that?

Thanks

[rrodionov91]

Hi @Fleury93
Yes, reverse proxy is a way how to achieve that.