0 comment

An Azure Function for an smart stupid web part – Part 2

In my first blog post of this series, I discussed how many intelligence you need in your web part when it comes to third-party API. Sometimes it makes more sense to remove the business logic out of the web part and use web parts just as the presentation layer. In the previous post, I also mentioned that might Azure Functions can be beneficial.

Text written on white background saying Azure Function for an Smart Stupid Web Part

The Azure Portal is capable of implementing any Azure Function directly on their user interface, but there is also another option. It is possible to write Azure Functions nowadays locally and deploy them later to the cloud. This approach is in most cases more convenient, less error-prone and more comfortable to debug directly from Visual Studio Code for example.

[Read more]

0 comment

Smart stupid web parts with SharePoint Framework – Part 1

When you write a new web part with the SharePoint Framework you might create a genius web part, where all the business logic is compiled into your web part. This approach makes sense when the web part is an isolated piece of work.

Image with text saying Smart stupid web parts with SharePoint Framework

Sometimes you like to write pretty simple web parts that only access a backend or third-party API from somewhere on the Interweb. In this case, you can write all the data access inside your web part. Give the user the option to store APP Key, APP Secret and particular access token directly in the web part. Might pre-populate some of those properties of with your company-wide secrets and API keys too.

[Read more]

0 comment

NPM 6.0 and SharePoint Framework – Security Reporting

In case you recently upgrade NPM to Version 6.0 and created a new SharePoint Project through the Yeoman generator. There is a chance that you recognised the following new notification at the end of the NPM installation process.

Security Report after SPFx installation

Security Report after SPFx installation

What there are five vulnerabilities, one with severity low and four with severity high and I can run ‘npm audit’ to get a detailed report?

Don’t start to scream “fire” and run in panic through your office, uninstall all your SPFx projects from all your tenants, clean up your CDN, keep calm and learn the reason why this gets now reported after the installation.

[Read more]

0 comment

NPM Package for Office UI Fabric colours released – Ok a while back

A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.

To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.

[Read more]


How to use Handlebars in SharePoint Framework Projects – SPFX

I believe one on the most used front end tools in the web development world is out there is Moustache or Handlebars. It is easy to use; you can write native HTML and compelling too.
In the SharePoint world, many web parts directly show data on the page, and therefore this is the right weapon of choice to get fast going.
Right after the first version of SPFx become public available, I created a ticket in GitHub on how to use this front end tool. With the RC0 drop of the framework, a new functionality has become available that allows you to embed Handlebars through a so-called webpack loader. I was pretty excited when Pat Miller tweeted me about this.

Let me show and explain what steps are required to make use of it in your next project.

[Read more]

0 comment

Script your SharePoint Framework project updates


With every new drop of the SharePoint Framework it seems that always the same procedure needs to be executed to update existing projects.
Luckily npm is capable of scripting. To be able to execute a script, it needs to be added to the ‘package.json’ file.
Open the ‘package.json’ and look out for the script section. To register the update script create a new entry “update-spfx” and chain all commands delimited by ampersand together.

*** Update 21.09.2016 for Drop 4 of SPFX use the following update-spfx command ***

Now you are ready to execute the following command

After all the steps have been finished, you are ready to go with your new drop of the new SharePoint Framework.
If you think it feels like hacking. Well, it is the normal way to handle such things in NodeJS.
For the next drop or a version of the SharePoint framework you just need to execute the script again. In case something have changed please check out the documentation or simply modify the update script to the changed requirements.

How it works

Like mentioned before you can chain all the commands together. The first part contains npm update. After the update you can specify all the node modules you like to update. You can simply add all packages right after the update and don’t need to update them individually.
You also don’t need to fumble around with the package versions the npm update command does this for you.
I this case we had three packages to update.

  • sp-client-base
  • sp-client-preview
  • sp-webpart-workbench

Right after the package name you see and additional @-sign. This defines to which version you like to update. ‘@latest’ indicates the latest version which actually is the version of the current drop. Luckily, there is only latest version with every new drop.
The next commands that needs to be executed are npm prune, followed by npm dedupe, followed by gulp nuke, followed by gulp.
In case you like to make sure you really rebuild your project can use gulp build. This will explicitly call a rebuild. The next update can come and you only need to execute npm run update-spfx again. Before you execute you should definitely check if something might have been changed.
In this case you can add or modify the commands.

Final hint – npm rebuild

The new SharePoint Framework contains a lot of binary components. Those components needs to be rebuilt / recompiled on your client first.
Sadly rebuild only happens when you install a package, but not during an update. The additional command that needs to be executed in this case is.

Optionally you can change this command to your npm update script too. In this case make sure that all those components are freshly built. Eve if not required it won’t hurt your installation.