Iframe embedding shows up as just a black rectangle instead of OHIF Viewer

Support
1

Hello,
I am using OHIF Viewer v3.9.0-beta.36 (latest version as of this moment), and am trying to embed the OHIF Viewer in an iframe. I followed all the steps in the documentation, but the iframe shows up as a black element instead of the study list as I was expecting, despite seeing many of the network requests relating to the OHIF Viewer in the console. I am using wsl Ubuntu for development.

The iframe:

image
image1911×1002 12.6 KB

Steps to reproduce:

  1. clone OHIF Viewer repository and navigate into directory containing source files (as per documentation in Build for Production | OHIF)
git clone https://github.com/OHIF/Viewers.git
cd Viewers/platform/app/src/
yarn config set workspaces-experimental true
yarn install

  1. Open up file Viewers/platform/app/public/config/default.js and modify routerBaseName to ‘/ohif’ (as per documentation under deployment/iframe).

  2. build project with specified PUBLIC_URL and APP_CONFIG (as per documentation in iframe | OHIF)

cd Viewers/platform/app/src/ 
NODE_ENV=production PUBLIC_URL=/ohif/ APP_CONFIG=default.js yarn build
  1. Now in a separate directory from the local Viewers repository create a react-ts app using vite:
yarn vite create project-name

and then from the prompt, select react-ts from the templates (NOT react-ts SWC)

  1. Open file project-name/vite.config.ts and add the necessary headers for cross origin isolation:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
      // 'Cross-Origin-Resource-Policy': 'same-origin',
      // 'Access-Control-Allow-Origin': '*', // Adjust as needed
      // 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      // 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      // 'Access-Control-Expose-Headers': '*'
    }
  }
})
  1. Open file project-name/src/App.tsx and add in the iframe:
import './App.css'

function App() {
  return (
    <div className="flex flex-col gap-10 p-10">
      <div className="mx-auto text-4xl font-bold text-blue-600">Hello from React!</div>
      <iframe 
        src="./ohif/index.html" 
        className="h-[80svh] w-[80svw] mx-auto rounded-xl border-blue-600 border-8"
      />
    </div>
  )
}

export default App

  1. Go back to OHIF Viewer local repository and copy the build output directory ‘dist/’ located under Viewers/platform/app/, paste it under the ‘public/’ directory of the newly created react app and rename it to ‘ohif’:

  2. Open up a terminal and navigate into root project of newly created react app and start up a development server:

cd ~/path/to/project-name
yarn dev

Note: Before adding in the COEP and COOP headers on my vite.config.ts file, I was getting a black screen with the yellow Cross Origin Isolation warning notification in the bottom right corner, after adding in the headers I longer got those.

Note: I installed tailwindcss into my react app as well but this is not necessary, and I was experiencing the black iframe before I installed it as well.