Microsoft Teams is the go-to communication platform for many businesses. One of its great advantages is the degree of extensibility and customizability it provides. And now thanks to Uno Platform and WebAssembly, we will be able to build apps for Microsoft Teams in our favorite programming languages - C# and XAML. Let's see how we can do that!
Limitations
While testing this I unfortunately found out that the current version of Microsoft Teams Electron client on desktop is unable to host WebAssembly apps, which means the apps built using this approach will properly load only in the web version of Microsoft Teams. Hopefully this capability will be enabled in an update soon. I have submitted a feedback for this, please upvote it so it gets prioritized sooner.
Prerequisites
Microsoft Teams Development Tools
Visual Studio 2022 includes built-in support for Microsoft Teams and provides useful starter templates, but they are not installed by default with any workloads. Instead, we need to manually select them in the Visual Studio Installer. Open the Visual Studio Installer and click Modify on your favorite Visual Studio 2022 instance. Select the ASP.NET and web development workload and then find and check the Microsoft Teams development tools option in the Installation details pane.
Click Modify and let the installer do its magic. In a few moments you will have the tools installed.
Microsoft 365 Developer Program Account
While you can technically test your Microsoft Teams on your production tenant, it is preferable to create a developer account in the Microsoft 365 Developer Program. Go to the official website here and click Join. Log in using your Microsoft or company account and fill out the requested information. When successfully logged in, click the Set up E5 subscription button. This will provision a free sandbox where you can test and verify your apps.
Note: This seems to be quite unstable at the time of writing - I had to log in and log out several times (in incognito/InPrivate browser) to get the link to allow me to create the subscription. If you fail to create the subscription, try contacting the support, hopefully they will fix it soon. You can also check this related thread on Microsoft support pages. Alternatively fall back to using your production tenant - it is not ideal, but better than nothing I guess ? .
Latest Uno Platform templates
To achieve our goal, we need to host the Uno Platform under ASP.NET app host. This capability was added in the latest pre-release versions (4.6 and newer) of Uno Platform templates, which you can install via the command-line:
dotnet new install Uno.ProjectTemplates.Dotnet::4.6.19
Creating the Microsoft Teams app project
Open Visual Studio and create a new project. In the second (platform) drop down, choose Microsoft Teams. You should see a single template:
Double-click the template, give the project a name and click Create. In the next dialog we can select a type of Teams project we want to create. In our case we want to build an app with a user interface, so we select Tab and again Create.
Now that our Teams project is created, we will also add an Uno Platform app into the solution. Right-click the solution in Solution Explorer and select Add - New Project. In the dialog switch the second drop-down to All platforms and the third drop-down to Uno Platform and double-click the Uno Platform App project.
Name your Uno Platform app and click Create. In the dialog that displays we will keep on WinUI and WebAssembly options for simplicity. Click Create once more and your solution should now be all set up!
Referencing Uno App from Teams App
Currently our solution contains two completely separate projects - the Uno Platform app (consisting of a Shared project, a WebAssembly project and a WinUI project) and Microsoft Teams Host app. We now need to reference the Uno Platform WebAssembly app from the Teams app so it is then served by this ASP.NET host. First right-click the Teams project and select Add - Project Reference. In the dialog check the YourAppName.Wasm project and click OK. Now right-click the Teams project again and choose Manage NuGet Packages..., search for the Uno.Wasm.Bootstrap.Server package and install it.
This package is capable of serving Uno Platform WebAssembly app from ASP.NET host. Open the Program.cs file and adjust it as follows:
We have added UseUnoFrameworkFiles and MapToFallbackFile middleware and commented out the Blazor-related endpoints which we don't currently need.
First launch
Let's finally see the app in action! Right-click the Teams project in Solution Explorer and select Teams Toolkit - Prepare Teams App Dependencies. In the dialog, log in using your Microsoft 365 Developer Program account and confirm. This will set up all the required manifest values for your app and register it against the Microsoft 365 tenant. All set! Set the Teams project as startup project and press F5 or click the green arrow to start the app! This will launch the browser, where you can log in to the Microsoft 365 tenant and you will be presented with a pop up to install your new app.
After we click Add the app will load right away:
Sample code
Sample code for this post is available on my GitHub.
Going further
Clearly the biggest limitation of the current state is that the app does not run under the Microsoft Teams Electron client. If this can be resolved, it will make building fully capable Teams applications in C# and XAML a reality. If you want this to happen, please upvote the feedback here. The app we have created is of course very simple and does not utilize any of the specific Microsoft Teams features. The best next step will be to allow the user to authenticate via MSAL. This will allow your app to use Microsoft Graph and work directly with the user data. It is also possible to utilize the credentials of the currently logged-in user. This can be done by directly communicating with the underlying JavaScript Teams API via WebAssemblyRuntime class. To make this more convenient, I am planning to port the Microsoft Teams .NET SDK to Uno Platform, which will make it much easier to access all the user capabilities directly, without having to implement this bridge manually. Stay tuned for this coming soon!