MS Teams Tab not working after deploying but working in development mode

Question

I'm trying to create a MS Teams Tab using ASP.Net Core with React (JavaScript). I have integrated React App(created using npx create-react-app) with Asp.net core and it is working fine in development mode. But after i had deployed it on the Azure, tab has stopped working and it is not showing anything in the MS Teams Tab. Also the URL which was created by the publish wizard of Visual studio is also not working showing HTTP error 500 when i'm trying to access it in the browser.

Below is the configuration I have done in Startup.cs to integrate the React with ASP.net Core.

React Development Config

End points

Controller

Now the thing is whenever i'm running the app in dev mode then i'm able to see the react page which is on localhost:5000. Like below:-

but after publishing it on Azure I'm not able to see the React App page. However when i'm using the published URL with /pto then index.chtml comes in the browser and Teams tab as well but unable to get React page with the same URL.

Below are 2 scripts which i have added in index.html file.

In the teamsapp.js i have added the url in the setting as well but still it is not working.

    // Save configuration changes
microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
    // Let the Microsoft Teams platform know what you want to load based on
    // what the user configured on this page
    microsoftTeams.settings.setSettings({
        websiteUrl: `https://azurewebsites.net`,
        contentUrl: `https://azurewebsites.net/index.html`,
        entityId: "testTab",
        suggestedDisplayName: "Test Tab",
    });
    saveEvent.notifySuccess();
});

Is there anything which i'm missing and is needed to make the React application work in MS Teams. Please help me or show me the right direction.

Did the below response given by hilton helped you to resolve this issue? — Manish-MSFT, Dec 28 '20 at 06:45
I'm not understanding why your registerOnSaveHandler is in your main index.html file - I think you're not understanding the purpose of the "config" page for shared tabs. It's the small popup that appears to help you configure your tab - think about when you add a "SharePoint" tab in Teams - it's the small popup that let's you choose what SharePoint site, etc., you want to show in the tab. — Hilton Giesenow, Jan 03 '21 at 12:31
Separate to that, your address is still `https://azurewebsites.net` in the example above, when it should be `https://SomethingGoesHere.azurewebsites.net`, where SomethingGoesHere must match whatever you have blacked out in the screenshot above. — Hilton Giesenow, Jan 03 '21 at 12:32
My address is correct at my end here i have just added like this only because the real URL i can't post it here. The main thing is i'm not getting how to make React work after deployment it is working perfectly in DEV mode but facing problems after deployment. — Vin, Jan 04 '21 at 04:22
Have you tried giving "https://azurewebsites.net/pto" to your content url in your ms teams tab? I see you are routing by using [Route("pto")]. This will make sure there is no issue with MS teams rendering a tab, then we can focus more on server side of it. — Manish-MSFT, Jan 05 '21 at 03:49
Yes it is working with "https://xxxxxxx.azurewebsites.net/pto" and showing the content of index.chtml. — Vin, Jan 05 '21 at 05:04

score 1 · Answer 1 · answered Dec 24 '20 at 09:04

If it's giving a 500 error, that's something server side, clearly nothing to do with Teams. You should look to switch the site into Development mode (how will depend on how you're hosting it in Azure). Here's an link that might help: How to resolve error 500 on Azure web app?

I see in your tab that you're 'https://azurewebsites.net/index.html' though, which might be the issue - surely it should be https://SOMETHINGHERE.azurewebsites.net/index.html

I notice that you're referencing a much older version of the Team JS library, you should change that. Please see info here: https://www.npmjs.com/package/@microsoft/teams-js

Hi Hilton , Sorry for the late reply i have added more details if it is possible can you please help. I want my react page to come in my MS teams tab like the way it is coming in localhost/dev mode. but somehow it is not coming after publishing though i'm able to see the index.cshtml page content after deployment. — Vin, Jan 03 '21 at 08:02

MS Teams Tab not working after deploying but working in development mode

1 Answers1