nope/pages/_app.tsx

import "@fortawesome/fontawesome-svg-core/styles.css";
// import "bootstrap/dist/css/bootstrap.min.css";
// import "bootswatch/dist/materia/bootstrap.min.css";
import "bootswatch/dist/yeti/bootstrap.min.css";
// import "bootswatch/dist/darkly/bootstrap.min.css";
import { useEffect } from "react";
import "react-grid-layout/css/styles.css";
import "reflect-metadata";
import "swagger-ui-react/swagger-ui.css";
import { Bridge } from "../lib/communication/bridge";
import { IoSocketMirrorClient } from "../lib/communication/mirrors/ioSocketMirrorClient";
import { getDispatcher } from "../lib/dispatcher/getDispatcher";
import { nopeDispatcherManager } from "../lib/dispatcher/nopeDispatcherManager";
import { getNopeLogger } from "../lib/logger/getLogger";
import { ICommunicationBridge } from "../lib/types/nope/nopeCommunication.interface";

export default function App({ Component, pageProps, hostname }) {
  const bridge = new Bridge(
    "browser",
    "bridge",
    "info"
  ) as any as ICommunicationBridge;
  bridge.addMirror(
    new IoSocketMirrorClient(require("os").hostname() + ":7000", "info"),
    true
  );

  const dispatcher: any = getDispatcher(
    {
      communicator: bridge,
      logger: getNopeLogger("dispatcher", "info"),
    },
    nopeDispatcherManager
  );

  useEffect(() => {
    const dispatcher: any = getDispatcher(
      {
        communicator: bridge,
        logger: getNopeLogger("dispatcher", "info"),
      },
      nopeDispatcherManager
    );

    return () => {
      // componentwillunmount in functional component.
      // Anything in here is fired on component unmount.
      dispatcher.dispose();
    };
  }, []);

  const params = {
    dispatcher,
    ...pageProps,
  };

  return <Component {...params} />;
}