Speed up your Microsoft Teams development

When developing a Microsoft Teams solution in C# with Visual Studio, I often find myself changing the manifest file. Mainly because I use ngrok to tunnel from Teams to my local development machine. So every time I fire up a new instance of ngrok I need to change the manifest file to a new endpoint url. A quick trick to make this process faster is adding the needed files to my solution. This way I keep it all in one place.

A package that you need to upload to Teams is a file that is just a zip package containing 3 items. The manifest file that describes information about you and your app. And 2 icons that are used in Teams to visualise your app. More information can be found here

Contents of the manifest folder in my solution

Automatically generate a package after every build

Now to create the manifest file automatically after every build I simply add a package.json file and a gulpfile.js to the solution. This way I can use the build in task runner from VS. This will automatically create a new version of the package file every time I build my solution.

new npm configuraiton file
Add a new npm configuration file to the project

Add the below piece of code to the configuration file. This is so that you can use gulp and gulp-zip to create a zip file.

{
  "version": "1.0.0",
  "name": "teamsproactive",
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-zip": "^4.2.0"
  }
}
new javascript file that will become a gulpfile.js
Add a js file and name it gulpfile.js

Add the following code to the gulpfile.js

const gulp = require('gulp');
const zip = require('gulp-zip');

gulp.task('packageCreation', () =>
    gulp.src('manifest/*')
    .pipe(zip('manifest.zip'))
    .pipe(gulp.dest('bin\\debug'))
);

Now I you fire up the task runner explorer (under View – Other windows) you can see the task you just created. And if you right click on it you can select to have it run after every build.

task runner explorer
My packageCreation task will run after every build
task runner explorer executing
It will take the contents of my manifest folder and zip it into a package in the debug folder This way I’m my package I upload to Teams is always in sync with what’s in my solution

One last recommendation I can make is that when starting out with creating manifests and packages for Teams. There are several options to do this. There is the Teams Yeoman generator or you can use the App Studio that is available as app in Microsoft Teams.