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.

How it works then?

I not go into the details too much what this npxcommand is capable of and focus more on the fundamental understanding. The first step is to define the packages you need to execute a specific command. In the case of the SPFx generator, those are two packages needed.

  • yo
  • @microsoft/generator-sharepoint

With that the command needs to look like this:

When you execute this command, it gives you the latest SPFx generator, but you can also target a specific version. Just add the version you are aiming for at the end of the ‘@microsoft/generator-sharepoint’ definition. In case of SPFx version 1.4.1, the command looks like this then.

If you have some additional packages all, define them you using a simple ‘-p’ as for packages option.

To run the generator then you need to add the regular start command after your packages definition, and the final command looks like this:

With this options, you are ready to go and run an older or newer version of the generator without the need to have it installed.

NPX allow you to create a new project on a specific SPFx version

To check that the project has successfully executed an older version of the generator check the version numbers in the package.jsonfile.

Verification of the correct package references ins package.json

How to add a new web part to an existing project?

Just use the same command as shown before. Got to your project directory and run.

The output on your screen should look similar to mine.

Add an additional web part to the project

Create a command shortcut in your project?

While you can always look up your project version in the ‘package.json’ file to figure out what the exact version, an easier approach would be to have a shortcut for that. The easiest way to accomplish this is to define an npm script entry in the ‘package.json’ file.

NPM Script shortcut to create a new asset

NPM Script shortcut to create a new asset

I defined a new key with the name add that, and as a value, I defined the command with the specific SPFx version number included.

To run this script execute:

This way you use it more like a regular CLI command but leads to the same result.

Execution of npm script to add a new asset

Last words to succeed

Like I demonstrated before it is a pretty charming way to run and execute event older SPFx versions. There is one thing essential to succeed. The ‘@microsoft/generator-sharepoint’ need to be entirely removed from your system before — the reason is that the generator internally always look up the globally installed generator and always uses the generator you have globally install rather than the specified one. Let us say you already have installed version ‘1.7.0’ of the SPFx generator then ‘1.7.0’ instead of ‘1.4.1’.

To uninstall:

Tomorrow I extend this example a bit more because you can also target the NodeJS version directly from your project but have the most recent one installed on your machine.

What do you think about this method, please let me know in the comments below.

Further information

Article
0 comment

New extension to SPFx for VueJS: PnP/SPFx generator v1.2.0

I firmly believe that the Yeoman generator provided by Microsoft is a great tool. It serves all the capabilities to create new web parts, extensions and customisations in the future. With the current support of ReactJS, Knockout and bare-bone HTML version, you have three great possibilities.

This PnP/SPFx generator project goes beyond these possibilities and supports enhanced functionalities. A way to add additional capabilities in the future not even for new frameworks and libraries on the market. It also helps organisations to defined their development standards.

[Read more]

Article
0 comment

The Community SPFx generator – The ideas, the patterns and possibilities

I am pretty excited that finally the first version of the open source community driven SPFx generator has been released last Thursday and publicly announced and is part of the SharePoint / Office 365 Pattern and Practices Personally, for me, it was a great journey to bring this to life in collaboration with Microsoft engineering.

It was a longer journey than expected but there were some considerations and decisions to make to have a solid fundament for future improvements and to allow fast and easy integrations.

[Read more]

Article
0 comment

Custom SPFx generator: Make Yarn your default package manager

The most straightforward example to make you familiar with how to create a custom SPFx Yeoman generator is to use Yarn instead of NPM as your default package manager. The approach to change the default package manager is simple, and many people already use it as there default package managing solution.

So, instead of adding the ‘–skip-install’ option whenever you start a new project just add this option to a generator.

The first step is, as always, to create a new NPM package.

[Read more]

Article
0 comment

Extend the SharePoint generator to your needs?

Whenever you start a new SharePoint project, you might depend on external libraries. These libraries are maybe small helper tools such as jQuery or maybe like to go beyond KnockOut or React. Let’s say you want to use Handlebars, VueJS or perhaps Angular 1.x. Everything you perform the same setup steps in the same order. In my case, I start most new projects using Handlebars. Luckily I wrote my documentation to make the configurations pretty smoothly. To be honest, it is proper training but on the other hand a complete waste of time. Why not automate my personal preferences and start a new project from scratch with my settings already applied. This article takes a look at why you might consider writing your own SharePoint generator in future. [Read more]

Article
0 comment

A bash on Windows and the new SharePoint Framework

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.

[Read more]