Article
2 comments

Develop SPFx web parts for different section designs using CSS

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.

[Read more]

Article
0 comment

SharePoint Framework and the Office UI Fabric grid system

A while a GitHub issue in the sp-dev-docs came to my attention, where someone had a problem titled as Can’t get grid system working using office fabric ui react. I took a closer look on why it is so challenging to get the grid system running right now and in SPFx projects in general. There are some catches you need to be aware.

Some of those issues are already documented in the a blog post on How to make your web parts responsive to the parent container or How to use Bootstrap in SharePoint Framework projects. Here is the rest of the story.

Office UI Fabric is somewhat like the first and foremost first third-party Framework that you may want to use in all your projects to create a seamless experience with the rest of the Office 365 platform. It is not exclusively to SharePoint or SharePoint Framework Projects.

[Read more]

Article
0 comment

‘gulp dist’ in SPFx? One command to create a clean solution package

Many projects that use gulp as the build system mostly implement a particular gulp task that is name ‘dist’ for distribution. This task package and bundle everything for production use.

Can we have a gulp task like this in SPFx too? Yes, we can have this too. First, let us take a look at the steps you need to do when you like to create a clean ‘sppkg’ file in the SharePoint Framework.

[Read more]

Article
0 comment

How to create an SPFx project using a specific version

Have you ever wanted to run an older version of the SPFx generator? Maybe on an existing project to add some new assets? It is possible without any installation of the generator at all. Recently a tool was released inside your NPM installation that is named ‘NPX‘.

In short, NPX is a tool that allows you to run npm binaries and packages without having them installed locally. This tool got first released in NPM 5.2.0.

[Read more]

Article
0 comment

Kick-start SPFx build chain on any file change

Whenever you save a TypeScript file in your SPFx project, the build chain creates a new build and refreshes the local workbench automatically.

There are some situations you like to have this support for other asset or frameworks too. In most cases with the PnP/SPFx generator, we need to force a build when a Handlebar or VueJS file get saved.

So the goal is to hijack the build process and add some custom file watch based on the requirement of the framework or file. Why file? Imagine you have an SVG file in your solution. The expected outcome is that you see the changes immediately in your browser.

The key word to this is watch. It requires a custom file extension watch that than trigger the build.

[Read more]