Coding Stephan

Teams Hacktogether: Toolkit

There were some ground rules for the Teams Hacktogether, we were going to build our Teams tab in Blazor. And this post describes the experience we had with the Visual Studio template for a Teams Tab in Blazor.

Getting started

Getting started building your first app in Blazor is a breeze in Visual Studio (once you installed the required individual component). Start by opening the Visual Studio Installer click Modify, Individual components and Search For Teams. This will allow you to install the required toolkit and the Teams templates, the component is called Microsoft Teams Development Tools at the moment.

Install Microsoft Teams Development Tools

Once installed you can created a new Teams Tab project using Blazor.

What I noticed is that it helps if you’re already signed-in to either a M365 development tenant or the tenant you’re allowed to use, inside Visual Studio. And have the admin setup Allowing custom apps in Teams

What you get by default

The template sets you up with a project, almost ready to run. It will guide you through all the required steps. When you press F5 (debug), it will tell you if you missed a step, like preparing the tenant.

Once you went through all the mandatory steps, you’re able to press F5 and get a popup if you want to add your app (running straight from your local machine). You can even use Hot Reload which means you can change some code, press save and see the results almost immediately.

This makes for an awesome developer flow, the immediate feedback really helps in getting your app just right.

The Teams Toolkit helps developers create and deploy Teams apps with integrated Identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and M365 with a “zero-configuration” approach to the developer experience.

Using additional features

By default your template even has code that shows data from the Graph API. This means the app is setup to do single-sign-on and there is a way to get a token from Graph automatically. Setting this up would normally take you several hours, because it requires you to know exactly how to set it up.

Magic is not for everyone

Getting started developing a Teams app is really hard. Especially if you had to do all the mandatory configuration steps in Teams, Azure AD, M365. All the configuration has to match and has to be exactly like Teams requires.

Using the Teams Template (or Toolkit on VS Code), gives you to power to start quickly. But you need either a dev tenant where you’re the admin or pretty high access to an existing tenant.

As a seasoned developer I would like to know what is happening behind the scenes when I click any of the options in the Teams Toolkit.

My suggestion would be to have an optional (command-line) wizard that does something like:

  1. We are now going to create an App Registration for you Teams app. Would you like to execute or see the PowerShell script?
  2. Shall we continue?
  3. Checking ability to add custom apps.
  4. Ask your admin to switch on custom app uploads in the portal or execute the following script
  5. We just created files x, y and z they are doing this and that.
  6. (You get to point…)

I’m not saying I don’t like the wizard, it works perfectly, but I cannot find out what steps it’s doing and maybe if some of those steps should be executed by someone else.

As explained that toolkit does some magic steps to set up your app correctly. It needs several settings which are all stored in files in the .fx folder inside your project. We use git (version control system) for all our projects, and I’m not sure if those files are to be kept secret or may be shared publicly.

If they have to be secret, the toolkit could:

  • Show a message that those files should be kept secret
  • Add (or append to) the .gitignore file to ignore the .fx directory.

Deployment

The Toolkit has a Deploy to cloud options, which is great, it works perfectly. But we would like to have an options to Generate GitHub Action for automatic deployment. Doing the “we are deploying it from my machine” workflow is bad practice and not sustainable. We are trying to move away from that.

For now a link to some documentation that would explain all the required components and mandatory config changes would suffice in the mean time.

Series: Teams Hacktogether