I am pretty excited on the last weeks launch of hTWOo. It is time to show you how to get started in the most simple possible way and how to add a simple themed button to your web part.
Over the last couple of days, I banged my head against the wall. I hate when things don’t work as expected. On the other hand, I love challenges.
The thing we are talking about the documentation on “Supporting section background“. To be clear, the documentation is correct. It works as described. The issue I and many others have with this documentation it does not apply to your project.
When you write a web part, that don’t use Fluent UI or its predecessor Office UI Fabric, you might have recognised Segoe UI from SharePoint is not loaded there.
Following the instruction on how to create a library component, get you pretty easy up and running to try out this new feature.
To make it production-ready you have to do some manual steps and tweaks. Here are some suggestions.
SharePoint Framework offers you a pretty solid project setup, but on the other hand, it doesn’t give you options to optimise the gulp, build or the webpack configuration.
The more web parts exist in a single project, the slower the build task become and all the code in the project will be compiled at once, instead of smaller incremental builds. Technical possible but not yet supported.
The good thing is that there are some options you can directly trigger from your web part code. Some of these options affect webpack others can be applied in ReactJS. Not only in case of build times but also case of user experience and web part performance.
The following configuration shows the webpack.js generated during the build process of a SPFx
Hello World wep part. References to fixed path in the generated webpack config were replaced with the default way of resolving path. (
If you try to log something in your SPFx project, it can be tough to find your ‘console.log’ messages. SharePoint Framework, in that sense, is chatty.