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".
Open the project settings of BlazorTeamApp.Server and select the settings for Debug:
- Change the profile to "BlazorTeamApp.Server"
- 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
spectologic 