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

5

Turns out this was a routing issue.

The app is indeed running (scripts are downloaded and I can debug & hit breakpoints). But in this case, it wasn’t going to the root ‘/’ route on initial load. When I navigate to it (by posting a message from the parent app to the child iframe), I can see the StudyList and everything else.

6

Hello !
I have the same issue in my React Vite App.
I add the ohif build in the public folder and when i go to /ohif/index.html i have a black screen.

You said that when you navigate in the app you find a way to show th study list. How did you do, it’s not clear for me ?

Thank you !

7

Inside App.tsx, navigate to the root path when the App component mounts:

React.useEffect(() => {
  navigate('/');
}, []);

I believe this will load the study list.

8

Thank you !

In your case, you don’t have any other app in your React project, it’s just for OHIF ?