SPFX - Inlcude Static Files in the Solution Package

Question

We need to include a third-party solution in our SPFX app which itself is rendered as in iFrame within the web part. We have this working locally in the workbench and it works when deployed, but only if we manually change the location of the iFrame to the correct URL. Anyhow, we need a relative path and therefore would like to include the third-party components files (html, css, js) in the solution package so that they can be hosted from the O365 CDN.

My question: Is it possible? and if so how can we configure the SPFX toolchain to simply include a collection of files (and folder structure) in the solution package?

Answer 1

According to SharePoint PnP Webcast – Including assets in SharePoint Framework solution packages,

Starting from version 1.4 JavaScript assets and other static solution files are automatically included in the sppkg file, which is deployed to app catalog. These assets are automatically hosted from the app catalog URL address.

If Office 365 Public CDN is enabled in the tenant, it’s automatically used when the SharePoint Framework solution files are being requested. If Office 365 CDN is not however enabled, assets are served directly from the app catalog site collection.

Starting from version 1.4, solution assets are automatically included in the sppkg file. This behavior can, however, be controlled from the package-solution.json file with includeClientSideAssets property.

Check video tutorial given in above URL.

Also you can add custom JavaScript files, CSS files and images in your SPFx webpart using SPComponentLoader module and require.

For detailed information, check below article:

How to add external libraries and assets in SharePoint client-side web part.