Provision SPFx Web Parts to Classic Sites – Part 1: Include SPFx Assets & Package inside of WSP

Hello everybody! This time I would like to share with you complete solution how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package in four steps / blog posts:

  1. Include SPFx Assets & Package inside of WSP (this blog post)
  2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
  3. Install SPFx Web Part to SharePoint Site/Web inside Feature
  4. Include SPFx Web Part inside of Web Template

So, lets start with first step, others follow soon.
We have WSP SharePoint Project Solution created from template with Visual Studio. And we have one (or more) SPFx Web Parts created from Yeoman template generator in node.js environment.

I placed all SPFx Web Parts into SPFx/WebParts folder inside of Root Folder of my Visual Studio SharePoint Project, each in their own sub-folder.

2018-04-23_0747

As you already know, we can create new SPFx Web Part with yo @microsoft/sharepoint command from CMD (you need node.js and Yeoman generator with @microsoft/sharepoint templates installed before). Make sure that you create SPFx Web Part for SharePoint 2016 on-prem and not only for SharePoint Online (you will be warned in Yeoman generator wizard).

Project outputs for each of your SPFx Web Part are sppkg package file (inside sharepoint/solution subfolder) and assets js and json files (inside temp/deploy subfolder).
This files need to be copied to your SharePoint:

  • sppkg file to App Catalog
  • js json to your CDN folder

For this purpose I create SPFxAssetsM/WebParts SharePoint Module Item inside of my SharePoint WSP project where all these files will be copied automatically from SPFx Web Part project folder.

2018-04-23_0801

So, we have to make logic how to automatically copy your sppkg, js and json files to this module above.

2018-04-23_0806

Gulp is the way to go! 🙂 It is already installed inside of all SPFx Web Parts project templates. But for our needs we have to install three additional npm packages:

  • npm install –save-dev yargs
  • npm install –save-dev gulp-clean
  • npm install –save spfx-build-url-rewrite

After that you have to create copy-to-wsp.json file inside config subfolder.

2018-04-23_0814

Then create new config property deployWspPath inside of it. Replace path below with relative path from your SPFx Web Part project folder to Module folder of your SharePoint WSP Project.

{
    "deployWspPath": "../../../Contents/Modules/SPFxAssetsM/WebParts/snack-webpart"
}

Go to existing config file named write-manifests.json and replace cdnBasePath property with https://contoso.sharepoint.com root url + suffix bolder above (exactly this root url is needed by spfx-build-url-rewrite npm package installed before).

Then please switch to gulpfile.js file inside of your SPFx Web Part Project and add next script to line 7 (before “build.initialize(gulp);” statement):

var args = require('yargs').argv;

var copyToWspTaskPre = build.subTask('copytowsp-pre', (gulp, buildConfig, done) => {
    var copyAssetsConfig = require("./config/copy-assets");
    var clean = require("gulp-clean");

    return gulp.src(copyAssetsConfig.deployCdnPath, {read: false})
    .pipe(clean({force: true}));
});

var copyAssetsToWspTaskPost = build.subTask('copyassetstowsp-post', (gulp, buildConfig, done) => {
    var copyAssetsConfig = require("./config/copy-assets");
    var copyToWSPConfig = require("./config/copy-to-wsp");

    return gulp.src(copyAssetsConfig.deployCdnPath + "/*")
    .pipe(gulp.dest(copyToWSPConfig.deployWspPath));
});
build.task('copyassetstowsp', copyAssetsToWspTaskPost);

var copyPackageToWspTaskPost = build.subTask('copypackagetowsp-post', (gulp, buildConfig, done) => {
    var copyToWSPConfig = require("./config/copy-to-wsp");
   
    return gulp.src("./sharepoint/solution/*.sppkg")
    .pipe(gulp.dest(copyToWSPConfig.deployWspPath));
});
build.task('copypackagetowsp', copyPackageToWspTaskPost);

if (args.copytowsp) {
    build.copyAssets.taskConfig = { excludeHashFromFileNames: true, }
    build.rig.addPreBuildTask(copyToWspTaskPre);
}

const rewrite = require('spfx-build-url-rewrite');
rewrite.config(build);

This is main thing for today blog post – including SPFx Assets & Package to WSP. So lets take a look deeply to this part of code.

There we have three sub tasks named copytowsp-precopyassetstowsp-post and copypackagetowsp-post.
First one is for deleting existing files from temp/deploy subfolder. This will be added as Pre-Build Task to existing SPFx Build task created by Microsoft.
Second is for copying new assets files (js json) from temp/deploy to SharePoint Module path. This task will be Post-Build Task called manually by “gulp copyassetstowsp” command.
And last one is for copying package file (sppkg) from sharepoint/solution to SharePoint Module path. This task will be Post-Build Task too and will be called manually by “gulp copypackagetowsp” command.

In addition we define copytowsp flag because of two reasons:

  • excludeHashFromFileNames: exclude hash (GUID) from assets file names because we want always same file name (when we do SPFx WebParts upgrades we could remove this line).
  • register our copytowsp-pre gulp sub task as pre-build task.

And the last one is including rewrite module (from spfx-build-url-rewrite)  to our existing SPFx build process. This one is for rewriting “https://contoso.sharepoint.com” part of cdnBasePath from write-manifests.json config file to path defined with target-cdn flag below.

Thats all folks.
Finnaly, you can create all assets files (js & json) and package file (sppkg) with next commands in this order:

gulp bundle --ship --copytowsp --target-cdn http://sp2016/sites/appcatalog/SPFxAssets
gulp copyassetstowsp
gulp package-solution --ship
gulp copypackagetowsp

(replace target-cdn path with path to Document Library, where you want to have assets files placed.)

Next step ->  Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP

Cheers!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: