Sunday, February 10, 2019

Simplify Teams app package creation with Gulp

Since SharePoint Framework v1.7 it's possible to implement Microsoft Teams tabs using SharePoint Framework. Software houses can now support both SharePoint and Teams with the same SPFx web part.

In order to simplify the Teams tab development, SPFx v1.7 creates a Teams folder in the solution structure. You find there all the necessary files for the Teams app package. Here is how it looks:


 manifest.json - Manifest file for Teams application
 tab20x20.png - Default small picture for a tab
 tab96x96.png - Default large picture for a tab

During development or at the latest while preparing your solution for production, you must create the Teams app package. In detail, you must generate a zip file which contains the files from the Teams folder. This zip file represents the Microsoft Teams application and will be used to deploy the web part to Teams.

Since the process of app package creation isn't automated, I created a gulp task which does it for us ðŸ˜Ž It's a nice way of making the development faster and avoiding errors while creating the app package. If you think "I don't need a task for that!", then keep in mind that manifest.json and images are in the root of the zip file or deployment will not work. The code below should be added to the gulpfile.js file. It also requires the npm gulp-zip module and the Node.js file system module to work:

The zipteam task reads the web part name from the manifest file and uses it as the zip's filename. The last step creates the zip file within the Teams folder. Note that all the existing zip files within the Teams folder will be ignored while generating a new app package file.

I extended the code with another gulp task which runs all the necessary tasks to create the solution package using just one command. Thanks Stephen Bauer for your comprehensive blog post regarding this topic. If you want more detail on that, I recommend you check out his post. The code below additionally requires the npm module gulp-sequence to work:

The zipteam task is executed after the SPFx solution package is created. Once the dist task is complete you are really ready to deploy your app packages to SharePoint and to Teams.

I hope these gulp tasks will make your life as a developer easier!

No comments:

Post a Comment