Custom teams app tab working only in browser

Question

Im currently making a custom teams app for MS Teams that fetches some data (just strings) from my localhost. However, while my app works fine in the browser version of teams, it doesnt work in the Teams application. Nothing even shows up in my custom tab:

However, in the browser version of the visual studio code debug window:

Does anyone know why its only working in the visual studio code debug window? And how do i get it to work in both the browser version and the Teams application?

The code of my app:

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount() {
    new Promise((resolve) => {
      microsoftTeams.getContext(resolve);
    })
      .then((context) => {
        this.setState({ context });
        //var inputs {}
        const queryParameters = new URLSearchParams({ function: "getDocuments", input: '"'+ context.userPrincipalName + '"',});
        console.log(`userPrincipalName is '${context.userPrincipalName}'`);
        console.log(`teamName is '${context.teamName}'`);
        console.log(`http://localhost/openims/json.php?${queryParameters}`);
        return fetch(`http://localhost/openims/json.php?${queryParameters}`);
      })
      .then((res) => res.json())
      .then((result) => this.setState({ ...result }))
      .catch((error) => this.setState({ error }))
      .finally(() => this.setState({ isLoaded: true }));
  }
  
  render() {  
    const { error, isLoaded, name, age, city } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (     
        <ul>
          <li>
            {name} {age} {city}
          </li>
        </ul>       
      );
    }
  }

}
export default Tab;

Answer 1

You mention that you're working on localhost, but Teams won't display any content coming from a local address, even if it's secured on https. This is for security reasons. It is possible to -run- the site locally, but you need to use an internet tunneling service so that the local address is exposed, during development, with a fully qualified https internet address. The most common way to do this (you'll see it frequently in docs, samples, etc.) is to use the NGrok tool, which provides a free version. See more at https://ngrok.com/