Configure routerBaseName & PUBLIC_URL for an app hosted at non-root path

Support
1

Describe Your Question

I’m embedding OHIF V3.7 inside a React app via an iframe.

I built the project, copied the build artifacts (contents of the dist folder), and
placed them inside the React app’s public folder under /ohif.

The React app is hosted at e.g. https://www.example.com/med/study-images/
routerBaseName is /med/study-images/ohif
and PUBLIC_URL is /med/study-images/ohif/

When I run the application, the iframe is empty.

In the network panel, I see the request to ohif/ succeed with a 200 but
I don’t see subsequent calls to app-config, bundles, and assets etc…

Any ideas why?

2

Does this work

<iframe
  src="/med/study-images/ohif/"
  width="100%"
  height="600px"
  title="Embedded Application"
/>

and then

public/
├── med/
│   └── study-images/
│       └── ohif/
│           ├── index.html
│           └── ...

You might need a <base> too

3

@alireza, yeah, I’ve tried that and the result is the same empty iframe.

If I change the iframe src to /med/study-images/ohif/index.html,
I see a black screen AND app-config.js plus the various css and js bundles get loaded.

But, I don’t see a call being made to /studies in the network panel.

This is my public folder structure:

public/
├── ohif/
│     ├── index.html
│     └── ...

I also see a bunch of messages in the console panel like

Registering old name UINotificationService
Registering old name DisplaySetService
New measurement mapping added to source 'Cornerstone3DTools@0.1'.
...

This tells me that the iframe is able to locate ohif, load the index.html file, and load the styles/scripts referenced in the <head> section.

Why doesn’t it load studies?

4

@alireza Any ideas why OHIF is not rendering? Here are some screenshots of the behavior:

OHIF-ISSUE-1
OHIF-ISSUE-1839×140 3.68 KB

OHIF-ISSUE-2
OHIF-ISSUE-2987×918 1019 Bytes

OHIF-ISSUE-3
OHIF-ISSUE-3881×763 42.5 KB

OHIF-ISSUE-4
OHIF-ISSUE-41972×1000 97 KB