Clarification on flow of MS Teams application

Question

I'm brand new to developing these types of apps, so bear with me, please:) I'm having a hard time wrapping my head around what is and what is not possible with this and how to go about setting it up properly for our needs. The Microsoft docs are... I think subpar is the word, so I turn to you, great community.

My situation: We want an app with 3 tabs, Search, Recruit and Profile, along with a simple bot (for now). We are doing this in React for the tabs and node for the bot, as is usually the case according to all the tutorials / examples I've seen.

We use AWS Amplify authentication, so that wraps around our routes in the App component, as shown by the following screenshot.

This scaffolding was generated by the Microsoft Teams Toolkit VSCode extension, that is essentially App Studio, but built as an extension. I find the code structure to be very clean, and very close to a standard structure I'd get from, let's say, create-react-app projects.

These three routes, Search, Profile and Recruit, are their own tab, as demonstrated in the manifest screenshot below

Edit: Actually you can't see it on here... export default withAuthenticator(App) at the bottom of App.tsx is where this happens... My bad:)

I also setup ngrok tunnels for the tabs and bot (that you don't see here), and I am able to sideload the development.zip into Teams. All three tabs show up and point to their respective content. The authentication with Amplify is also working, so if I'm logged in, I can see the content of tabs, if I'm logged out, I get a login form displayed on the page. Basically, as I understand it, each tab points to a route which, in turn, renders the corresponding component. Given the microsoft-teams-sdk library, I can then access context between tabs, so know where I came from, where I am, etc.

However, eventhough the content shows up ok in Teams, as soon as I go to localhost:3000/search or localhost:3000/profile, etc., I do not see any content. However, running npm start for the tabs does give me this message:

And that's my localhost open: As you can see, no content. F12 to open console shows no errors either.

For obvious reasons, I want to be able to debug my app in the browser, step through code, etc. However, it appears I am not able to do it give the fact that the pages are not displayed.

Given that I was fighting a bit to try and get this to work, I've tried another generator, Yeoman for Teams.

I found the scaffolding to be very confusing, and I could not find a root component that you'd get in a "standard" React app to wrap my Amplify authentication component around. However, in the case of Yeo, each.tsx component had it's corresponding.html content page.

When running it locally with ngrok-serve (included script in their package.json), the tabs were accessible on localhost:3000/search, etc.

This is the first Teams app we are trying to put together. Naturally, you go and look at what's out there. I fire up the GitHub application, the Jira Cloud one, Quickbooks, etc. They all have multiple tabs. I'll take GitHub as an example.

Each of these tabs, to me atleast, appear to point to a route of an SPA on a signle domain Tab 1 -> github.com/teamsapp/assigned, Tab 2 -> github.com/teamsapp/created, etc.

How do they do it? Am I understanding this wrong? Does a React SPA need to be in its own single tab to work properly and that single tab displays the app while the routing itself is strictly handled by the react app?

I'm inclined to think that's not the case since many apps have multiple tabs that interact between them, like you click on a list item in Tab 1 and it populates something in Tab 2, just like the GitHub or Jira Cloud apps, for instance.

Given that it's early in the project, we are not opposed to going back to the drawing board, but I need to be able to justify foregoing the "multiple tabs" idea if an SPA must be in it's very own tab.

I know this is a long post, and I thank you for reading all of it. As always, fellow humands of this amazing community, I look forward to any and all tips or input you can provide. I will gladly provide more info if I forgot something.

Thanks!

Answer 1

This certainly is possible, in concept, to browse directly, but you need to be aware of the microsoftTeams.initialize(); line. The microsoftTeams object is only available when you're inside a Teams tab - in a standalone experience, it won't be populated, and so the .initialize() operation will fail. In fact, if you're accessing context inside there (which you probably want to do), it will fail. Try put a breakpoint on that line, and it should fail with a null reference error.

Update: looking at your code more closely, you could actually try putting microsoftTeams.initialize(); inside your if (window.parent === window.self) check, that should also help in your case.