Reference to #12548 | How to Create and configure "React, TypeScript based Teams App" using Teams Toolkit in Visual Studio

[npagare]

Describe the bug Refer to the GitHub issue #12548 Refer the Additional context. Please help me with request # 4 "I want to create Teams App using React, TypeScript, Tailwind but in Visual Studio. How do I create it?"

Adding React Asp.Net type of project adds client and server project. But when tried to debug the client fails to run unless the server has started manually first. This is per VS wizard for adding that project type.

To Reproduce Steps to reproduce the behavior: Refer to the GitHub issue #12548, then, Refer the Additional context > request # 4

Expected behavior Guidance on how to use Teams Toolkit in Visual Studio for adding React Typescript based Teams Tab project. Even the skeleton App should work. I should be able to preview it in Teams without any error (as outlined in #12548) and must be able to debug the react / TS code.

Screenshots N/A

Visual Studio Team Toolkit Extension Information (please complete the following information):

• OS: Win 11 Pro
• Version [22H2]
• Build [22621.4317]

CLI Information (please complete the following information):

• OS: [e.g. iOS8.1]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[summzhan]

@npagare currently Teams Toolkit in Visual Studio has not yet include Teams app template or samples using React/TS as frontend for tab app and together with .NET project. We can treat this as a new requirement and plan it for future improvement.

For now, maybe you can try to create an Empty Teams app first, which Teams Toolkit will generate a Teams configuration project without any source code. Then in the generated Teams Solution, right click on the solution to add a new React .Net project as the Tab app source project. Then configure your manifest to fill in the launch Url as the Tab url. So that you can use Teams Toolkit to preview your Teams tab app.

[npagare]

Hi @summzhan, thank you. It will be great if the Teams Toolkit for Visual Studio starts supporting React/TS as frontend tab app. I would also appreciate if the out of the box support for CSS framework like Tailwind is included.

I will follow your recommended steps and update you as soon as possible. In the meantime, I'm hoping to get a resolution on #12548.

Thank you

[npagare]

Hello @summzhan, I followed recommended steps; and here are few observations.

I created an empty React TS project. Created a self-signed certificate (key and crt) which is stored in a {project path}\certs folder. In {project path}\env folder I have two .env files 1) .env.http and 2) .env.https

The vite.config.ts takes a parameter - mode which accepts value http or https. If not passed the default value of the port 5173 is used.

In TeamsApp project - the manifest.json file includes following entries (in addition to other ones) "configurableTabs": [ { "configurationUrl": "https://localhost:55173/config",
"canUpdateConfiguration": true, "scopes": [ "team" ], "context": [ "channelTab" ] } ], "staticTabs": [ { "entityId": "staticTab", "name": "Static Tab", "contentUrl": "https://localhost:55173/EmptyTeamsAppReactTS", "websiteUrl": "https://localhost:55173/", "scopes": [ "personal" ] } ],

Observations - With that in place, I am successfully able to prepare Teams App Dependencies using the Teams toolkit menu. Then as suggested by @yuqizhou77 in #12548, I started debugging using F5.

1. I could add the app in Teams as a standalone app but the app was not working. The https link is not loading the app successfully. What am I missing to get this working automatically for the configured https url?_

2. I could publish the app to the dev portal and from there to the MS365 organization. But, when I looked at the Azure Application registration page, I don't see application registration entry. Is this supported by Teams Toolkit in Visual Studio? How do I fix this besides manual app registration at Azure Entra ID?

   My understanding was the Visual Studio Teams toolkit will automatically do that. This is one reason, per #12548 - I started with the Teams' dev portal first. Here I am doing from VS to dev portal - assuming Azure app registration will be handled by Teams Toolkit.

3. When I tried to add the App as a tab in a specific channel of a Team, I don't see the save button as enabled. Am I missing an configuration in the manifest.json file or somewhere else?

I would appreciate your help.

Thank you, Nilesh

[yuqizhou77]

For 1. _I could add the app in Teams as a standalone app but the app was not working. The https link is not loading the app successfully. What am I missing to get this working automatically for the configured https url?__

• Which url are you visiting? Is it "https://localhost:55173/EmptyTeamsAppReactTS"?

For 2. I could publish the app to the dev portal and from there to the MS365 organization. But, when I looked at the Azure Application registration page, I don't see application registration entry. Is this supported by Teams Toolkit in Visual Studio? How do I fix this besides manual app registration at Azure Entra ID? Publishing through dev portal won't create a Microsoft Entra app. You could refer to https://github.com/OfficeDev/teams-toolkit/wiki/How-to-enable-Single-Sign-on-in-Teams-Toolkit-for-Visual-Studio#for-teams-tab-application You may not need step 6 or change your source code based on your needs.

[yuqizhou77]

For 3. When I tried to add the App as a tab in a specific channel of a Team, I don't see the save button as enabled. Am I missing an configuration in the manifest.json file or somewhere else? __ @hund030 Do you have any advice?

[hund030]

@npagare For _3, could you open the developer tools by F12 and check the error message in console? I wonder this error is caused by teams sdk initialization.

[npagare]

I'm visiting the app website URL as https://localhost:55173

[npagare]

@npagare For _3, could you open the developer tools by F12 and check the error message in console? I wonder this error is caused by teams sdk initialization.

Hello @hund030, how are you?

I opened dev tools by F12 and shown below are messages in browser console and VS Teams Toolkit output -

### Are you open for a screen-share session via a Teams call?

[hund030]

@npagare Sure. Could you tell me your email address? Iet me send you a meeting.

[npagare]

Hello @hund030, I have sent two emails to your MS email address. Please check your inbox / spam folders.

Thank you.