Asset Packaging and the goodies from SharePoint Framework 1.4
Asset packaging is an excellent feature for SPFx solutions, until now the manifest and script files had to be hosted in a CDN like Azure or Office 365 CDN. Handling the hosting was a problem to if you want to distribute or sell the solution, with the solution being recompiled to be used in different tenants.
With Asset Packaging the SPFx solution files are deployed to a central CDN without the need to manually specify the url in the solution source code.
The Asset Packaging was released along with the Site Collection App Catalog and both features combined provide the same type of functionality that was provided by the sand box solutions, with all the files included into one package and being able to be installed per site collection and not globally.
How to update to the latest SPFx version
Update an existent project
To use the latest version of the SharePoint Framework you will have to update the packages of your project to do it follow the steps bellow
- Open the command line in the project folder
npm outdatedto get a list of all the outdated packages; from the list you will get:
- Current version installed in your project
- Version requested by your project (available in package.json)
- Latest version available
SharePoint Framework packages are identified by the prefix @microsoft/sp-
- For each outdated package run the command
npm install mypackage@newversion –save
- Run the command
gulp --updateto update your config.json to the latest version
- Once you get all the packages updated run the command
- Build your project again using the command
gulp buildand verify if the newer version didn’t cause any errors.
Note! When performing the update, I got this error:
Error – typescript –
(0,0): error TS2688: Cannot find type definition file for ‘es6-collections’.
This is caused by the missing typing for the ES6, to fix it run the command:
npm install --save @types/es6-collections
Update the Yeoman generator
If you want to start a new project from scratch make sure you have the generator 1.4 installed, to do it follow these steps:
- Open the command line and run the command
npm -g outdated
- To install the latest version run the command
npm install @microsoft/generator-sharepoint@latest -g
- Run the command
yo @microsoft/sharepointto create a new project and follow the wizard
How to enable the Asset Packing
If you are starting a new project after updating the yeoman generator you don’t need to do anything, the solution will be created with this functionality enabled by default.
If you are migrating to the version 1.4 and want to take advantage of the Asset Packaging do the following:
- Open your project in your code editor
- Expand the config folder
- Open the package-solution.json
- Add the property includeClientSideAssets with the value true to the node solution
- To package the solution to be installed in your run the command
gulp bundle --shipfollowed by
gulp package-solution --ship
When installing the solution with the Asset Packaging enabled you will notice that the content will be provided by the domain SharePoint Online.
How to use the Site Collection App Catalog
With the site collection app catalog administrators will be able to make Add-ins and SPFx extensions available per site collection which will allow different and independent versions in the same tenant.
To enable the Site Collection App Catalog you will need to install the SharePoint Online Management Shell. Once you get it installed follow the steps bellow.
- Connect to your Office 365 running this command
Connect-SPOService -Url "https://contoso-admin.sharepoint.com"
- To crearte the site collection app catalog run the command
Add-SPOSiteCollectionAppCatalog -Site https://contoso.sharepoint.com/sites/rome
If you want to disable the site collection app catalog for a site collection run the command
Remove-SPOSiteCollectionAppCatalog -Site https://contoso.sharepoint.com/sites/rome
You can get more information about the features released in SPFx 1.4 here.