spfx-update

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.

When you are working with SPFX and you start it with gulp serve, it takes some time to start. During this startup many things happen but there are not clear indication if SPFx is working or what it actually does.

gulp server - default start

gulp server – default start

Once the workbench was started you see all the gulp task that will be executed with or without error and what it actually does.
The background tasks are well hidden, but you can take a peek into those background activities. It’s just a simple trick, but I use it every time now when I work with SPFX now.
Instead, execute gulp server and add the command line optionĀ --verbose. Execute SPFx with:

Now the hidden world and architecture of SPFX will become more visible. In additon you get sometimes many additonal informations what might goes wrong.

gulp serv - with verbose logging

gulp serv – with verbose logging

From my point of view, it is easier and helps with debugging.
I will also see if the issue is caused by your configuration, code or locate a problem with SPFX.

Happy coding!!!

This was actually the first question I asked after the new framework has been released. Since then there has been an ongoing discussion on that issue.
When you created a new project using a yeoman generator you’d expect a proper gulp/grunt/whatsoever file that list all the task required to build and develop the project.
When you open the gulp file of the new SharePoint Framework you see just the following lines of code.

The rest of the SharePoint framework is well hidden and deeply nested inside the node_modules folders. Theoretically, you can whatever you like in this folder, but your changes will get lost whenever fresh version will be checkout out form the source control and/or npm install will be exited, upgrade your project to the newest drop of the SharePoint Framework or install an updated version of any package. The node_modules folder is the _layouts folder of the new SharePoint Framework but you can be sure that files in there will be always replaced.
My mate Waldek wrote a great blog post on how to extend the SharePoint Framework with a custom build task.
I think his article is suitable for a deep integration in the SharePoint Framework. From my point of view, it solves a problem that exists because of the Framework.
I working with yeoman generators for more than two years now and I’ve never seen a gulp implementation that only contains of a simple function call. The new SharePoint Framework follows in this case a pretty uncommon approach. I was clueless for a while.
In SPFX everything is built on gulp and it turn’s out that adding a custom gulp task is much simpler than I have expected. However, sometimes it is hard to see the forest for the trees.
Let me explain how to accomplish the same thing Waldek describe just by standard gulp methods but first let me explain some basics.

Continue reading

On July 29 Microsoft announced that they will completely remove of code-base sandboxed solution support in Office 365.
The main problem is that many of those SharePoint solutions just deploy XML based artifacts but no binary code.
Nevertheless I think many of those sandbox solutions deploy an empty dll to Office 365 especially when they are developed in Visual Studio.
This unwanted dll can be simply avoided directly through the correct configuration of your Visual Studio.

Continue reading

Not so fast… As announced at the May the 4th event there are a lot of new technologies that come to SharePoint and you can pick your personal flavored framework to enhance the SharePoint.
Some things of the upcoming changes are already available in Office 365. Things like the hidden web parts or the new document library. Time to rip the components of the new document library apart and show you what was used to build it.

TL;DR

The new document libraries are built with the following three core components:

  • React
  • KnockoutJS
  • RequireJS

In addition a React-based implementation of Office UI Fabric will become available together with the new SharePoint Framework.

Continue reading

While I was looking at the new SharePoint site content page I asked myself if more can be found that gives an indication of the upcoming framework and future improvements.
First, I took a look at the source code. Not a big surprise the page was built again using Facebooks ‘React‘ for the user interface and ‘Knockout‘ was used for data binding.
After that I came up with the idea to take a closer look at the web part gallery to see if might some web parts have been deployed to. To my big surprise I found overall five new web parts.

Web Parts of the new SharePoint Framework Extension

Web Parts of the new SharePoint Framework Extension

While some web parts are used to provide tips and trick or how to get started. Two other web parts are more interesting.
The ‘Embed Video Web Part’ and the ‘Embed picture library web part’. I populated them to the gallery and added them to a page in SharePoint. Currently they are deployed, but sadly not working yet. There are no web part specific properties to be configure now and I guess they current won’t load any additional Script or CSS.

New webparts embedded on page

New webparts embedded on page

Embed video web part makes sense to me because this is currently handled by a script embedding web part. A web part that is not responsive without customization.
The embed picture library web part is more interesting because the description states that you can use this to create a fancy new slide show.
In addition to those upcoming web parts it is likely that the new namespace of the additional framework will be ‘Microsoft.SharePoint.SPX‘.

Finally

It is great to see at least a glimpse of the upcoming changes and how the new user interface will be built. Waiting until autumn is still such a long way to go. Especially if you use the same mechanism to customize SharePoint for at least two years now.
Let’s hope it will be released sooner than later. I guess many people love to get their hands on it and provide feedback. Even if it is not rock solid yet.
If you are not so familiar with things like Yeoman, Angular, ReactJS, Handlebars or Knockout, please check out some really great web casts done by the Office PNP team.

a-bash-on-windows

You might have heard the Unix Bash Shell is now coming to Windows. To be more specific a whole Linux sub system based on the Ubuntu distribution comes to Windows. This addition to Windows was announce at this years Build Conference and I knew exactly how this would match to my clients and other people in the SharePoint Community. Especially with the new SharePoint Framework you should know this option because it makes many things easier using NodeJS on Windows.

Continue reading

Last weekend I had the great opportunity to speak at the SharePoint Saturday Stockholm for the very first time. This event is really great because I already attended the last two events too, and it was a great time to visit this beautiful city as well as meet some friends.
On Saturday I had my session in a packed full room and sorry for the people who had to stand at the back. A big thanks to all the attendees.

Continue reading

We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365.

Continue reading