Asset Packaging and the goodies from SharePoint Framework 1.4

By João Ferreira Dec 11, 2017 Development, Office 365 2 Comments

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

1. Open the command line in the project folder
2. Type npm outdated to 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-

3. For each outdated package run the command npm install mypackage@newversion –save
4. Run the command gulp --update to update your config.json to the latest version
5. Once you get all the packages updated run the command gulp clean
6. Build your project again using the command gulp build and 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:

1. Open the command line and run the command npm -g outdated
   
2. To install the latest version run the command npm install @microsoft/generator-sharepoint@latest -g
3. Run the command yo @microsoft/sharepoint to 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:

1. Open your project in your code editor
2. Expand the config folder
3. Open the package-solution.json
4. Add the property includeClientSideAssets with the value true to the node solution
   
5. To package the solution to be installed in your run the command gulp bundle --ship followed 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.

1. Connect to your Office 365 running this command Connect-SPOService -Url "https://contoso-admin.sharepoint.com"
2. 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.