Blazor MS-Teams Tab App Series – Part 1

Welcome to the second post of a series that will show you how you can write a Microsoft Teams Application with Blazor Webassembly.

You will find the complete source code in this github repository. I placed my changes in different branches so you can easily jump in at any time.

Today we continue with our base MS-Teams project. Since our service must run on a public available domain I recommend using NGROK (yesterday I learned it is spoken like this: [n g rock] ) which is a tunneling service that offers a public URL that will tunnel a request to your local machine.

An additional benefit is that NGROK also provides a SSL-Endpoint terminating at the tunneling site, so you can easily server HTTPS without worring about certificates.

Warning: If you use the free edition of NGROK your domain name will change every hour or so. Since we will also configure Azure Active Directory Applications in AAD this can be tedious to constantly adapt. I would recommend to buy the base version or to host the application on your domain.

Let’s start! Add a new "Blazor"-Project in Visual Studio to our existing solution:

a. Project-Name: BlazorTeamApp
b. Select "Blazor WebAssembly App"
c. Configure for HTTPS: YES
d. ASP.NET Core hosted: YES

Tab-Route

Next we reuse the Counter.razor page as our first tab page. To name it properly we rename Counter.razor to Tab.razor. Make sure that all your razor pages follow the Pascal naming convention otherwise Visual Studio will complain!

In the file BlazorTeamApp.Client/Pages/Tab.razor replace

  • @page "/counter" with @page "/tab"

Remove Sidebar

Since Teams has it’s own navigation we remove the sidebar by removing following code in the file BlazorTeamApp.Client/Shared/MainLayout.razor:

<div class="sidebar">
    <NavMenu />
</div>

Add the MS-Teams SDK Javascript Library

Right click the project "BlazorTeamApp.Client" and select "Manage Client Side Libraries". Then replace the content of the file libman.json with the following code.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "jsdelivr",
      "library": "@microsoft/teams-js@1.8.0",
      "destination": "wwwroot/scripts/teams"
    }
  ]
}

The folder BlazorTeamApp.Client/wwwroot/scripts/teams should have been created!

Lets add the MicrosoftTeams.js file to the index.html page to have it run at startup!

Edit BlazorTeamApp.Client/wwwroot/index.html

...
    
    <!--Reference to the MS Teams Script added with libman -->
    

...

Do not use IIS Express

IIS Express does not allow your site beeing called from outside. So NGROK can not tunnel to a IIS Express hosted site running on an address like "https://localhost:44383/tab&quot;.

Open the project settings of BlazorTeamApp.Server and select the settings for Debug:

  1. Change the profile to "BlazorTeamApp.Server"
  2. Set Launch Browser to: http://localhost:5000

Since we use the NGROK Https Endpoint we remove the HttpsRedirection in Startup.cs:

Comment out the HttpsRedirection in "BlazorTeamAp.Server/Startup.cs":

...
// app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
...

Once you have setup NGROK with your account open a terminal window and tunnel port 5000 to your NGROK sub domain. Adapt the region depending on your setup:

	ngrok http -region=eu -hostname=".eu.ngrok.io" 5000

Start the "BlazorTeamApp.Server" (not IIS Express!) in the debugger and validate that you can browse the following urls (replace demo.eu.ngrok.io with your ngrok domain):

Test the TAB and Web API:

That’s it for today! See you tomorrow!

AndiP

Blazor MS-Teams Tab App Series – Part 0

This is the first post of a series that will show you how you can write a Microsoft Teams Application with Blazor Webassembly. This post will guide you to get everything setup to be able to follow along the series.

You will find the complete source code in this github repository. I placed my changes in different branches so you can easily jump in at any time.

First I recommend setting up you own O365 tenant for development, as you might not have administrative priviledges on your production tenant.

  1. Setup your own Office 365 – Development Environment

  2. Navigate to Teams Admin Center, which also can be found in the M365 Admin Center under More/Admin Centers/Teams

    • Under Teams Apps / Manage Apps click on the upper right button Org-wide app settings and make sure to activate "allow interaction with custom apps
    • Unter Teams Apps / Setup policies / Global (Org-wide default) activate the option Upload custom apps and save! This can take up to 24 hours
  3. Enable the Developer Preview in Microsoft Teams Desktop Client

    All the settings in step 1 are required to be completed to be able to see those options!

    • Start TeamsApp and select your profile picture / About / Developer Preview and accept. Then log in again!
  4. Enable Developer Tools in Teams App (requires Developer Preview)

    • Close TeamsApp (Quit in Taskbar!)
    • Restart TeamsApp and Log-In again
    • Open a TAB-Application
    • Right-Click the Taskbar-Icon of Microsoft Teams App / Open Dev Tools (Context Menu)
  5. Install App Studio Teams App

    This teams application can help you craft your application manifest.

    • In Microsoft Teams App click on Apps Icon (Taskbar) then search for App Studio and install.
  6. Take the blue/red pill aka choose between .NET and React

    A MS Teams TAB application is basically a website running within an iframe in Teams. So basically you can write your application in any language and framework. To interact with teams you need to work with the JavaScript API. Microsoft offers extensions for Visual Studio Code and Visual Studio that can ease the setup of your projects. As of today Visual Studio Code creates a React-Template while Visual Studio will create an ASP.NET Core 3.1 application.

    • Visual Studio Code (only React-Template with NodeJS)

      • Add Extension Microsoft Teams Toolkit
    • Visual Studio (.NET Core 3.1)

      • Add Extension Microsoft Teams App After installing the extension you can add a new Microsoft Teams App.

If you want to follow my Step-by-Step Teams-App series please create a new Microsoft Teams App BlazorTab.

    Options:
        -  .NET Framework 4.8 (No worries it creats a .NET Core 3.1 App)
	Capabilities
		- Select TAB
		- Select Both 

    Visual Studio will create a new solution with two folders:
    - .publish
    - Tabs (.NET Core App 3.1)

That’s it for today! See you tomorrow!

AndiP