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.

A regular gulp watch.

The following code describes a custom watch.

gulp.watch('./src/**/*.hbs', (event) => {
    // do something in here
});

The double asterisks stand for the ‘src’ directory and every file included in subdirectories. ‘*.hbs’ is the custom file extension that should raise an event. Inside the event function, you can copy files from source to a target location and perform even more complex tasks such as lint, compile and prefix a style sheet.

Gulp watch in SPFx

In SPFx this is no difference, and the gulp file can include such custom watches too. There is no need to add the watch to the build rig of SPFx. The definition of this watch is enough. Since we are not able to inject additional watches to the build rig directly, there is the need to work around.

TypeScript build kicker in SPFx

Any src folder of SPFx contains an empty TypeScript file with the following remark.

// A file is required to be in the root of the ‘/src’ directory by the TypeScript compiler

The truth is the TypeScript compiler perse does not need it it is more needed by the watch mechanism. Sometimes on some operating systems when a watch is registered, it won’t start when no matching file is present. Therefore the file and even if it is a blank file helps and is useful for our scenario too.

// register custom watch for hbs.JS files
// copy of '.hbs' files will be handled by 'copy-static-assets.json'
gulp.watch('./src/**/*.hbs', event => {

    // copy empty index.ts onto itself to launch build procees
    gulp.src('./src/index.ts')
      .pipe(gulp.dest('./src/'));

});

In the previous blog post on how to transfer files from ‘src’ to ‘lib’ directory using,copy-static-assets.json I already configured how to transfer the ‘.hbs’ files. Now the only thing left is to watch for changes and fire the event. Inside the event, it copies the blank ‘index.ts’ file over the blank ‘index.ts’. Seems like a useless operation but this change on the TypeScript file is enough to trigger the SPFx file watch, and it starts the build chain of SPFx.

—image

The same mechanism is in use in most of the PnP/SPFx generators.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.