SPFX Application customizer extension only run if i run it locally and will stop working when I deploy to the app catalog

Question

I want to inject some CSS to my SharePoint page, so I follow those steps to create SPFX Application customizer extension:-

md app-extension
cd app-extension
yo @microsoft/sharepoint

What is your solution name?: app-extension
Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
Which type of client-side component to create?: Extension
What is your Application Customizer name? HelloWorld
What is your Application Customizer description? HelloWorld description

then i added the following code inside the .ts:-

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IHelloWorldApplicationCustomizerProperties {
  // This is an example; replace with your own property
  cssurl: string;
  scripturl: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class HelloWorldApplicationCustomizer
  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {

    @override

    public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
  
      const cssUrl: string = this.properties.cssurl;
      const scriptUrl: string = this.properties.scripturl;

      const url = window.location.href;
      if (cssUrl && url.toLowerCase()=="https://*****.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx") {
          // inject the style sheet
          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";

          const head2: any = document.getElementsByTagName("head")[0] || document.documentElement;
          
          head.insertAdjacentElement("beforeEnd", customStyle);
          head2.insertAdjacentHTML("beforeEnd", '<META HTTP-EQUIV="refresh" CONTENT="300">');

          

      }
      
      return Promise.resolve();
    }
}

and the following inside the elements.xml:-

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="HelloWorld"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="e1b2d761-b43b-4006-8838-a4ba934e053f"
        ClientSideComponentProperties="{&quot;cssurl&quot;:&quot;/Style%20Library/custom.css&quot;}">
    </CustomAction>
</Elements>

Now when I run gulp serve the extension worked well, where the .CSS file took effect >> but when I deploy the SPFX to the app catalogue >> and I added the app inside the site collection >> the SPFx will not load the custom CSS + my browser console will raise this error:-

so why the SPFx is requesting the hello-world-application-customizer.js from local host? and is this the reason why the SPFX is not loading the custom css?

Thanks in advance for any help.

Regards

Answer 1

You'll need to run the following commands to ensure things are bundled correctly for production:

gulp clean
gulp bundle --ship
gulp package-solution --ship

Now when you deploy to the App Catalog the confirmation dialog will no longer show Localhost but SharePoint Online.