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 GandhiMay 3, 2017 at 11:14
-
@Dikesh Gandhi Yes– AY_91May 3, 2017 at 12:46
1 Answer
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.
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
-
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"– lexApr 5, 2018 at 10:20