Contents tagged with Gulp
With the Teams Tab generator you can in an easy manner scaffold out the project and get a build and deployment pipeline, and be up and running in a few minutes.
The project that will be created is a TypeScript based project with a set of Gulp tasks to build the project and package the manifest, and optionally a built-in Express server to host the web sites and configuration so that you can with a simple command deploy your project to an Azure Web App.
How to get it
The generator is published as an npm package and you use npm to install it. The following command will install it as a global package for you to scaffold your Teams tabs.
npm install generator-teams-tab --global
How to use it
To create a new Teams Tab all you need to do is open up a command prompt and use Yeoman to create the project. The generator will ask you a set of questions and your project will configured based on those.
How to use the project
The project contains all source code you need to build and deploy tabs. Use Visual Studio Code or whatever text editor you prefer. The source code is divided into two areas. The first one being the actual tabs (pages and scripts), located in ./src/app You will find one folder called web which contains the web pages required for a tab; such as the actual tab page, the configure page and remove page. In the scripts folder you will have the TypeScripts file in which you build the logic for your tabs. For instance the actual main tab page, tab.html, has a corresponding tab.ts TypeScript file. You'll get it…
In the ./src/app folder there is also a TypeScript file called server.ts. Note, this file only exists if you answers yes to the question on using Express to host the Tab. This file is the server side node.js web server. If you need to modify the paths or want it to do fancier stuff than just client-side scripting this is where you start hacking.
There's also a folder calle ./src/manifest which contains the Tab manifest. A json file you might want to configure. And that folder also contains the two images you need to have for a Tab.
How to build it
Once you've built it you can follow the instructions in the README.md file to deploy it to an Azure Web App.
The manifest for the tab is created by using another Gulp task:
This task will create a zip file that you use to upload to your Teams team and it references the specified web site hosting the tabs. The file being created is located at ./package/tab.zip
This is great, but I want to…
I know, you want to have more stuff in the generator. It's all available on Github for you to grab and hopefully come back with suggestions. Go git it here: https://github.com/wictorwilen/generator-teams-tab
I have to admit it I have succumbed to Visual Studio Code and now also Gulp tasks, well almost at least. I was working the other day with some display templates and page layouts and needed a more efficient way than uploading the files to SharePoint Online. Open with Explorer could have worked, but since I used a customers Office 365 tenant I did not want to store credentials and do all the required voodoo to get that to work. Instead I decided to explore Gulp and see if I could automate this, and the result is a Gulp plugin called gulp-spsync.
You can find gulp-spsync in this Github repo: https://github.com/wictorwilen/gulp-spsync
For you who have not used Gulp, the short description is that it is a task runner that runs tasks on command or at build. In this case it will copy local files to a SharePoint site.
This is how gulp-spsync looks like in practice in Visual Studio Code. As soon as I edit one of my files and saves it, the file will be uploaded to SharePoint. In the sample below it is a Display Template html file, once saved it will be uploaded, and then in SharePoint converted to the .js correspondent file.
To use this you need a copy of Visual Studio Code and full access to a SharePoint Online Site Collection. How to configure it all is documented in the repo, so I will not rehash it. But the basic outline is that you open up a folder on your local machine. Create a folder in that one where you create sub folders representing the sites libraries and catalogs. Then comes the tricky part, this task requires that you register an App in the Site Collection and give that App permissions. Once you have the App details you install the gulp-spsync plugin and then configure Gulp. All that then is left is to start working with your files.
I hope more people than me get some use of this one and any feedback is welcome.