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/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 { IoSocketClient } from "../lib/communication/layers/IoSocketClient";
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";
import "./graph.css";

export default function App({ Component, pageProps, hostname }) {
  const dispatcher = getDispatcher(
    {
      communicator: (new IoSocketClient(
        require("os").hostname() + ":7000"
      ) as any) as ICommunicationBridge,
      logger: getNopeLogger("dispatcher", "debug")
    },
    nopeDispatcherManager
  );

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

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

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