reactjs - 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.

Answer 1

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