How to save a SPFx client side web part to a template inside team site?

Question

I would like to know how can I deploy a SPFx client-side web part I have created as a template to use on all page inside team site.

Answer 1

You can deploy web parts in 3 ways as follow:

1.

Deploy SPFx client web part's JS files and JSON files in to Style Library

Note: Here I haven't enable CDN for Style Library.

• Open write-manifests.json file from Config folder from Web Part folder hierarchy.
• Change cdnBasePath as show below:

"cdnBasePath": "https://<server-name>.sharepoint.com/Style%20Library/Webparts/"

Note: Here I will upload all web part related files in Webparts folder within Style Library.

• In Command Prompt run below command:

  gulp bundle --ship

Now you can see JS files and JSON files for the web parts are bundled and ready to upload in Style Library >> Webparts folder. You can get those files in Webpart_folder >> temp >> deploy folder.

• Upload those files in Style Library >> Webparts folder.

• In Command Prompt run below command:

  gulp package-solution --ship

Now your webpart package file is ready to upload in App Catalog. You can find that package file in Webpart_folder >> sharepoint >> solution folder.

• Upload that package file in App Catalog and install web part from Add an app section. After that your web part is ready to use in site.

2.

Deploy Client side web part in Office 365 CDN

• Enable CDN in your Office 365 tenant. You can enable it using PowerShell so ensure that you have latest version of the SharePoint Online Management Shell. Connect to your SharePoint Online tenant with PowerShell session.

  Connect-SPOService -Url https://contoso-admin.sharepoint.com

• Get current status of public CDN settings from tenant level by executing following commands one-by-one.

  Get-SPOTenantCdnEnabled -CdnType Public Get-SPOTenantCdnOrigins -CdnType Public Get-SPOTenantCdnPolicies -CdnType Public

• Enable public CDN in the tenant

  Set-SPOTenantCdnEnabled -CdnType Public

Now public CDN has been enabled in the tenant using default allowed file type configuration. This means that following file type extensions are supported: "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF".

Open up a browser and move to a site collection where you'd like to host your CDN library. This could be any site collection in your tenant. In this tutorial, we create a specific library to act as your CDN library, but you can also use a specific folder in any existing document library as they CDN endpoint.

• Create new document library to your site collection called CDN and a folder called "Webpart-name" to it.

• Move back to your PowerShell console and add new CDN origin. Update provided URL to match your own environment.

  Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/cdn/cdn

• Execute following to get list of CDN origins from your tenant Get-SPOTenantCdnOrigins -CdnType Public

Notice that your newly added origin is listed as a valid CDN origin. Final configuration of the origin will take a while (approximately 15 minutes), so we can continue by creating your test web part, which will be hosted from the origin, when the deployment is completed.

From here, follow steps mentioned in 1st method. But use CDN url in cdnBasePath that created in earlier steps.

Reference: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

3.

Deploy Client side web part in Azure CDN

You will get detailed steps here: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn