SharePoint Site Remove SP Header for Anonymous Access using SPFX Extensions

Question

Hello,

I am working on a SharePoint 2019 Community Site that we built with SPFX.

We built it using WebParts and Extensions. The WebParts are working fine and the Extension that we used to globally load CSS and JS files.

However, there is another extension that we built for making a global Header and Footer on all pages following this MS guide. We deployed the app but the extension is not working.

Is there any specific customization to be done on the site to make this extension work ?

These errors are appearing in Console while they seem not related:

Speaking of extensions, what is the best way to remove the regular SP header for anonymous access (I want only my header to appear) ?

Last thing for the extensions, once they got added in the config.json it generates a random page URL. Is there a way to make it work on my local workbench?

    "layout": {
      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
      "customActions": {
        "d62b0f28-c92f-4e62-a9d0-660934586e0c": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    }

Answer 1

Hi @Mohammed Abed,

I will recommend you to use SPFx extension to inject CSS/JS to hide the SP Header. Please refer to the following extension

https://github.com/pnp/sp-dev-fx-extensions/blob/master/samples/react-application-injectcss/README.md

You can deploy the extension in your site and inject css file to edit your page.

Here is a nice article similar with your requirement, please make a reference

https://www.sharepointpals.com/post/step-by-step-procedure-to-add-a-js-file-to-all-pages-in-a-spfx-modern-pages-using-sharepoint-framework-extension/

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.