Sharepoint framework
Categories:

Deep Dive into SharePoint Framework webpart configuration Part 1

SharePoint is one of the powerful collaboration tool which is been there for decades and evolving day by day. Another crown to it is SharePoint Framework a page and webpart model which provides full support for client-side development model.

In this article we are not going to see how to develop it, we are going one step forward and discuss about its configuration options available. If you want to learn about building SharePoint Framework webparts and extensions, please follow the below links.

1. Create SPFx Webparts
2. Integrate SPFx Webparts with Angular 4
3. Create SPFx Extensions

How to change SPFx bundle file name?

Whenever you run gulp bundle ship command, a new bundle file will be created with some prefix and appends with GUID at the end. GUID is auto generated one to maintain uniqueness of the file, but you can change the prefix of that bundle file.

Go to config folder in your project and look for config.json, the highlighted content in below picture is your bundled files prefix. You can change it as per your wish with meaningful name.SPFx bundle

What happens if I change the webpart folder name in SPFx?

If you change the webpart folder name alone without changing the appropriate configurations, you will end up with the error like below, No localized files found under the root directory.

the webpart folder

So, whenever you change the webpart folder name make sure to change the below localized resources path in config.json

config.json

How to change the solution name in SPFx?

How to change SPFx app version?

Leaderboard_CDR

How to publish SPFx app assests to Office 365 CDN?

How to change the package (.sppkg) file name in SPFx?

Answer for all the question resides in same file in the location config/package-solution.json

package solution

In the above screen shot I have highlighted answers for the above questions, where you could change the version/solution name/publish in office 365 CDN/package name.

Please refer this blog to host webpart in office 365 CDN.

How to hide SPFx webpart from toolbox?

Even after deploying the SPFx webparts globally we have got an option to hide it from normal users to directly add the webpart in the page. To enable this setting, please go to the WebPart.manifest.json file in file location

/src/webparts/{webpartname}/{WebPartName}WebPart.manifest.json

A property called hiddenFromToolbox is used to hide the webparts in toolbox, which will look like below,

How to hide SPFx webpart from toolbox?

Even after deploying the SPFx webparts globally we have got an option to hide it from normal users to directly add the webpart in the page. To enable this setting, please go to the WebPart.manifest.json file in file location

/src/webparts/{webpartname}/{WebPartName}WebPart.manifest.json

A property called hiddenFromToolbox is used to hide the webparts in toolbox, which will look like below,

webparts-1

How to place all the SPFx webparts to be appeared in same toolbox folder?

How to change the SPFx webpart title?

Answers for these questions reside in the webpart manifest file which is in the below location to do the settings for that

/src/webparts/{webpartname}/{WebPartName}WebPart.manifest.json

webpartname

If you maintain the same group id and same group name in all your apps, you could be able to see all SPFx webapps under one folder.

Where to mention the external CDN path in SPFx?

If you have decided to host the SPFx app external CDN other than Office 365 public CDN, where to specify the base CDN path in SPFx? There is a setting for this in the config/write-manifests.json file which is highlighted below

manifests

Note: If you specify the external CDN path in the above image then includeClientSideAssets property setting in config/package-solution.json will be ignored and assets won’t be deployed in Office 365 CDN along with .sppkg file. A warning will be displayed in command prompt for the same as below,

in Office 365 CDN

What will happen if I run gulp clean in SPFx?

This is a predefined task in SPFx package which cleans up all the files/folders that are created temporarily at runtime. For example, it will delete the folders like lib, temp, dist,. Don’t worry these folders will be created again when you build/bundle the SPFx apps.

Where to specify the azure storage container details in SPFx?

If you want to host your SPFx apps in Azure CDN storage container, SPFx provides options for that as well in the config/deploy-azure-storage.json file. Use the gulp task gulp deploy-azure-storage

gulp deploy-azure-storage

workingDir: all files from this location will be moved to azure

account: Azure storage account name

container: storage container name of this app

accessKey: Key to access the storage account

Please follow this blog to know more CDN.

In this article we have discussed some of the configurations setup and its usage with some screen shots in SPFx. Still there are some more to go and new set of configurations are expected to come in the upcoming SPFx releases which you can find in my next article.

If you have any questions/issues about this article, please let me know in comments.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *