To deploy our webpart, we first need to create a deployable package that can be added to the App Catalog. You may follow the steps below after creating your SPFx webpart.
- Open project using visual studio code. Verify package-solution.json for includeClientSideAssets property to false & then set CDN details in write-manifest.json as below
- Bundle your SPFx webpart project source code using the gulp bundle task.
gulp bundle –ship
- Create your SPFx webpart package using the gulp package-solution task.
gulp package-solution –ship
- Find .sppkg package file at project > sharepoint > solution > filename.sppkg as below
- Find minified asset files at project > temp > deploy as below
- Drag & drop minified files manually to CDN path provided in write-manifest.json
- Upload your SPFx webpart package to the SharePoint App Catalog. Once your SPFx webpart package has finished uploading, you will be prompted with a dialog window to complete the deployment.
Note: This is where you may also get option choose whether to deploy to all sites within your tenant or to all subsites within your site collection. Make your selection and then click the Deploy button.
When you originally created your SPFx project using the SharePoint Yeoman generator, there was a question which asked if you would like to allow the tenant admin the ability to deploy the solution to all sites. Answering yes to this question sets the skipFeatureDeploymentproperty to true in the package-solution.json file which ultimately indicates whether or not the “Make this solution available to all sites in the organization” checkbox is shown. To enable or disable this functionality after the project is generated, you may update the skipFeatureDeployment property within your package-solution.json file and then re-bundle and re-deploy.
- You’ve deployed your SPFx webpart! Now, let’s add the new webpart to site from App catalog.
- After adding to site from App catalog –site catalog contains the newly added app.
- Add Hello World client side webpart to page