SPFx solution with 2 pages / web-parts communicating

Question

I am replacing a server side solution that allowed a master application page to fire headless window that talk to the originating page.

Now I am doing it in SPO with SPFx and so far I just used one page and web part with a big dialog that can't get out of the sending page.

My users want to be able to put the dialog on the second monitor so I think I have to do it in a different window / web part. I am planning a version 2.0 and collection ideas how to do it.

So far I think I will use "broadcast-channel" for communicating between the parent page/web part and the child page/web part.

I still need to figure out the following:

1. How to create a sharepoint page containing just a SPFx web part without all the side and top bla bla. (safe to hide by CSS?)
2. How to pass the spfxContext from parent to child
3. how to debug 2 separate SPFx projects at the same time while building the solution.

Any suggestion is welcomed. Samples even more  

Thank you in advance.

Answer 1

1. Try to use an extension:

export default class CssInjectApplicationCustomizer
  extends BaseApplicationCustomizer<ICssInjectApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    const cssUrl: string = '/SiteAssets/inject.css';
    const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    let customStyle: HTMLLinkElement = document.createElement("link");
    customStyle.href = cssUrl;
    customStyle.rel = "stylesheet";
    customStyle.type = "text/css";
    head.insertAdjacentElement("beforeEnd", customStyle);

    return Promise.resolve();
  }
}

inject.css:

/* Hide header */
#SuiteNavPlaceHolder, .od-SuiteNav{
    display:none !Important;
}

/** Hide options header **/
div[class^="sideActionsWrapper-"], 
.sideActionsWrapper-53 .ms-searchux-searchbox {
    display: none;
}

/** Hide header lists**/
.CanvasSection .ms-DetailsList-headerWrapper,
.CanvasSection div[class^="itemsViewDetailsListCommandBar_"]{
    display: none;
}

/** Hide Header page **/
div[class^="detailsListContainer_"], 
.ControlZoneEmphasisBackground,
.root-63, 
.root-76{
    background-color:transparent;
}