Reputation: 129

How can I render html file inside my react component

I know that we have similar questions about this problem but nothing seems to work here.

I'd like to render this page that is located on the root of my react project.

appmixerStudio.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  </head>
  <body>
    <div id="flow-manager"></div>
    <div id="designer"></div>
    <script src="https://.appmixer.cloud/appmixer/appmixer.js"></script>

    <script async type="module">
      const appmixer = new Appmixer();
      const BASE_URL = "******";
      const USERNAME = "******";
      const PASSWORD = "*******";

      appmixer.set("baseUrl", BASE_URL);

      function start() {
        flowManager.on("flow:open", (flowId) => {
        flowManager.close();
        designer.set("flowId", flowId);
        designer.open();
      });
      flowManager.open();
      }

      appmixer.api.authenticateUser(USERNAME, PASSWORD).then((auth) => {
            appmixer.set('accessToken', auth.token);
            start();
      })

      const flowManager = appmixer.ui.FlowManager({ el: "#flow-manager" });
      const designer = appmixer.ui.Designer({ el: "#designer" });

    </script>
  </body>
</html>

This is where I'm trying to render it :

import {htmlFile} from '../../../appmixerWithHTMLcontent.js';
import Page from '../../../appmixerStudio.html?raw';

const Workflow = () => {
  const template = {__html: Page}
  return (
    <div style={{ height: '100vh', marginLeft: '1.5rem', minWidth: '90%', transform: 'translateX(1.8rem)' }}>
      <div 
        style={{ height: '100%', marginRight: '1.5rem', marginTop: '2.8em' }} 
        dangerouslySetInnerHTML={template}
      />
    </div>
  )
}

export default Workflow;

Before that, I converted my html into a string like so:

export  let htmlFile = `<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
<script src="https://appmixer.cloud/appmixer/appmixer.js"></script>
  <div id="flow-manager"></div>
  <div id="designer"></div>

  <script async type="module">
    const appmixer = new Appmixer();

      const BASE_URL = "******";
      const USERNAME = "******";
      const PASSWORD = "*******";

    appmixer.set("baseUrl", BASE_URL);
    function start() {

      flowManager.on("flow:open", (flowId) => {
      flowManager.close();
      designer.set("flowId", flowId);
      designer.open();
    });

    flowManager.open();

      }

    appmixer.api.authenticateUser(USERNAME, PASSWORD).then((auth) => {
          appmixer.set('accessToken', auth.token);
          start();
      })

    const flowManager = appmixer.ui.FlowManager({ el: "#flow-manager" });
    const designer = appmixer.ui.Designer({ el: "#designer" });

  
  </script>
</body>
</html>

`

When I righ click on the page the tags seem to be there