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

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s