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 Teams App preview [dev portal or visual studio] results in Error - "There was a problem reaching this app" #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.

[hund030]

@npagare
I would like to summary the problems we have resolved.
You got error when adding your tab app to group chat with configurable tab. This occurs because

1. You don't have a config page which is defaultly defined in manifest.json - configurableTab parameter. Actually, static tab can be extended to group chat, too. We resolve this problem by removing the configurableTab from manifest and add team to the scope of staticTabs. Reference: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab?tabs=vs&pivots=node-java-script#extend-static-tabs-to-group-chat-channels-and-meetings
2. Your self-signed certificate is not installed correctly so you will need to bypass the warning from browser every time you launch your app before opening it in teams. You can try adding the following action in your teamsapp.local.yaml file. This action installed certificate for you, and you need to update your source code to reference SSL_CRT_FILE and SSL_KEY_FILE as https://github.com/OfficeDev/teams-toolkit-samples/blob/dev/hello-world-bot-with-tab/tab/vite.config.ts.

  - uses: devTool/install
    with:
      devCert:
        trust: true
    # Write the information of installed development tool(s) into environment
    # file for the specified environment variable(s).
    writeToEnvironmentFile:
      sslCertFile: SSL_CRT_FILE
      sslKeyFile: SSL_KEY_FILE

Here is a complete sample of react teams app with vite. It works in VS Code, though.
https://github.com/OfficeDev/teams-toolkit-samples/tree/dev/hello-world-bot-with-tab

[npagare]

Hello @hund030, after updating teamsapp.local.yml using my own variables I still get the error when debugging app in the Team / Channel.

How does the Teams App resolve the value for the variables SSL_CRT_FILE and SSL_KEY_FILE at runtime? Those are the environment variables defined in the react App. In my case those variables are defined in the .env.https file which is stored inside the "env" folder.

When I run my app as a standalone and pass the mode (a parameter to the defineConfig function) as https, it works fine except in the browser it shows https as strike out because it is a self-signed certficate.

[hund030]

@npagare The errors in console usually come from teams, which is not relative to your app. We usually ignore them.