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

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]

Article
0 comment

PnP/SPFx Version 1.3.0 released – Check your project version on the fly

Right before the launch of the first version of PnP/SPFx I had a longer chat with a friend of mine Thomas Goelles, and he pointed out that it is great to be able to re-run the generator to add more web parts using a specific version of a framework. There was one fact that we haven’t thought about or maybe overlooked. What happens when the current project setup does not support the required version yet?

Evergreen SPFx project - Version 1.3.0 relased

The previous version had merely a blocking mechanism implemented that checked if the current project was created using version 1.6.

[Read more]

Article
0 comment

How to copy files from src to lib folder in SPFx?

Sometimes there is the requirement to move files from your source code directory to the lib folder. These files can be images, JSON files or any imaginable asset that is not recognised by the build chain of SPFx.

There are two ways to achieve this one. One used gulp the other gets accomplished through the configuration of a copy-static-assets.json. Let me explain these to methods what scenarios suites best in which case.

[Read more]

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]