Unable to use iframe in React

Support
1

Describe Your Question

Following this link, Build for Production | OHIF
The OHIF Viewer built ran without no problems.

And then I tried to create a react app, version 18.2.0, and tried to include the iframe in App.js like this,

import React from 'react';

const App = () => {
  return (
    <div>
      {/* Other content */}
      <iframe
        src="../../Viewers/app/dist"
        style={{ width: '100%', height: '500px', border: 'none' }}
      />
    </div>
  );
};

export default App;

But when i ran npm start, it ran without errors, but only showed a blank white screen.

image
image1037×740 11.6 KB

Does anyone have any experience with iframe on react? Or could someone point me to some guide or tutorials for it?

2

Update:

When I ran
npx http-server ohif

I received this error on the console:

image
image752×190 13.5 KB

3

I was looking at this issue from github, and I was able to make it work on react after all. I did post some steps to get it working.

Here is the issue: https://github.com/OHIF/Viewers/issues/3371