Contents tagged with Gulp

  • yo teams: a full Microsoft Teams extensibility Yeoman generator

    Tags: Microsoft Teams, Bot Framework, TypeScript, Yeoman, Office 365, Gulp, Git

    A couple of weeks back I published a Yeoman generator to build Tabs for Microsoft Teams. Since then I've continued to add stuff to it as the Teams team has continued to add features to their extensibility story. So, this generator is not only for creating Tabs, but now also for adding Bots and Custom Bots to Microsoft Teams. With that I decided to rename the generator to yo teams (generator name is generator-teams).

    I'm very thankful to the over 600 downloads within less of a month, and all the positive feedback, the issues and PR created. Keep it coming.

    What's new?

    The two big new features of the generator is the ability to add either a reference to an existing bot that you want to use (your own, or any bot in the Bot Framework directory) or to create a bot from scratch, using the Bot Framework. You can also add a custom bot, which is a Microsoft Teams specific webhook that acts like a bot, which can be used by specific Teams only and you don't have to add it to the Bot Framework - perfect for those internal smart bots you want to build.

    yo teams

    The source code has also gone through some heavy refactoring with sub-generators and all. There's more to come…

    Both the Bot and Custom bot uses the JavaScript/TypeScript implementations of the Bot Framework and you have some boilerplate code to get started, including readme files of the essentials.

    If you have any issues, or feedback, or problem or just feeling chatty, then use the Issues list on Github.

    What do I need to do?

    If you already used the old generator, uninstall it with npm uninstall generator-teams-tab --global and then install the new generator with npm install generator-teams --global. All your current solutions will work, but I recommend you to, if you feel like it, to "move" all your code over to a newly created project.

    The old npm package is deprecated and you will get a warning if you try to install it.

    The Github repository has been renamed, but the old one will still redirect you to the correct location. You can find it here: https://github.com/wictorwilen/generator-teams

  • yo teams-tab: A Microsoft Teams Tabs Yeoman generator

    Tags: Microsoft Teams, Office 365, Yeoman, Git, Gulp

    I'm happy to announce that today at SharePoint Saturday Munich I presented a new Yeoman generator for building Microsoft Teams Tabs projects. Tabs in Microsoft Teams is a great way to extend the user interface and to do integrations to other systems and provide visualizations. Tabs are based on a JavaScript framework, a set of web pages and a manifest describing the Tab. It requires a set of manual steps to both build out the pages, configuring CSS, hooking up the JavaScripts, deploying it all to a web site hosted in the cloud, writing the manifest, packaging the manifest into a zip file and more.

    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.

    yo teams-tab

    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.

    yo teams-tab

    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.

    The tab project

    How to build it

    You build the tab by using a simple Gulp task that will transpile and bundle your TypeScript into JavaScript and sets up the web server. Just use the following command to build it

    gulp build

    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:

    gulp manifest

    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'm looking forward to feedback and I'll keep updating the generator in line with what the Teams team are doing with their JavaScript framework, which is currently at 0.4.

    glhf

  • Announcing gulp-spsync - A Gulp plugin that syncs local files with a SharePoint site

    Tags: Visual Studio Code, Gulp, SharePoint Online

    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.

    image

    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.

About Wictor...

Wictor Wilén is the Nordic Digital Workplace Lead working at Avanade. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for seven consecutive years.

And a word from our sponsors...