5

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.

  • Are you asking to deploy SPFx client side web part in SharePoint Online? – Dikesh Gandhi May 3 '17 at 11:14
  • @Dikesh Gandhi Yes – AY_91 May 3 '17 at 12:46
10

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. enter image description here
  • 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. enter image description here

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

  • 1
    You can upvote my answer if its helpful ! ;-) – Dikesh Gandhi Oct 17 '17 at 13:12
  • Uploading the js and json file into the style library caused an error message. To solve this I had to run: "set-sposite https://<sitename>.sharepoint.com -denyaddandcustomizepages 0" – lex Apr 5 '18 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.