reference tenant site in config.json

Question

I am working in deploying my first spfx webpart to production. I an testing it on my personal dev tenant first.

I am hosting all my assets in a separate site collection called cdn (in both my production tenant and dev tenant).

In my config.json file I have a bunch of entries pointing to the various external libraries I need:

 "externals": {
    "sp-pnp-js": "https://tenant.sharepoint.com/scripts/sp-pnp-js/2.0.1/pnp.min.js",
    "sp-init": {
      "path": "https://tenant.sharepoint.com/_layouts/15/init.js",
      "globalName": "$_global_init"
    },
    "microsoft-ajax": {
      "path": "https://tenant.sharepoint.com/_layouts/15/MicrosoftAjax.js",
      "globalName": "Sys",
      "globalDependencies": [
        "sp-init"
      ]
    },
    "sp-runtime": {...

is there a mechanism to replace the tenant.sharepoint.com in the config.json with the actual tenant name so I don't need to do a find and replace in this file.

The tenant name is also reference in the write-manifests.json file. It would be great if I could just specify the tenant URl in one place, and it would be referenced in these files (and any others I'm not yet aware of).

Answer 1

Unfortunately, when referencing external libraries declaratively in config.json, you have to use fixed absolute URLs and there is no way to inject them, unless you would build a custom gulp task. An alternative would be to load these scripts in code using the SPComponentLoader, e.g.:

import { SPComponentLoader } from '@microsoft/sp-loader';

export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
  // ...
  private componentDidMount(): void {
    SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    //...
  }
}

For more information see: https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom