Ref #12549 | ASP.Net Server has dependency on React Client App when creating Tab App using Adding React + ASP.Net (Full stack application) in an Empty TeamsAPP soln

[npagare]

Describe the bug
Refer to the GitHub issue #12549
Per suggestion in the GitHub issue #12549, I added a new full stack React ASP.Net application in the solution that was created after creating an empty TeamsApp project.

When running the application, I find that the project dependencies for ASP.Net Core project is set on the client (React TS) project instead of other way around.

To Reproduce
Steps to reproduce the behavior:

1. In Visual Studio create an empty TeamsApp project.
2. Then add a full stack React TS ASP.Net Core based application
3. To run the application, you need to run the server first which in turns start the client application
4. See the project dependencies created by the project creation wizard
5. The server project has (un-editable) build dependency on client project.

Expected behavior
Unlike the current unremovable dependency on Client project set in the Server; the Client project should have build dependency on Server (which should be editable (remove / add).
I should be ablet to run both projects independently. Once the client App is configured as a StaticTab app in the TeamsApp, I should be able to debug Teams Tab app independently.

Screenshots

VS Code 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
Refer to the github repo - https://github.com/garrytrinder/TabReactTSDotNet
Thanks to @garrytrinder ([email protected]) for creating this sample.

Tagging @yuqizhou77, @hund030

[hund030]

You can update the project dependencies by following steps:

1. Right click the Dependencies in TabReactTSDotNet.Server and select Add Project Reference to open the Reference Manager.
2. Unmark the tabreacttsdotnet.client from the table. Then you will find the dependencies is removed.
3. Now you can create a dependency on the server for your client.
   
   
   
   

But note that you may need to update the launchSettings or proj files to make the dependencies work.

In my side, the sample app you provided works fine, without any change.

1. Right click the TeamsApp project and click Teams Toolkit -> Prepare Teams App dependencies, which executes the actions defined in teamsapp.local.yml
2. F5 to start debugging. There is an error message saying it failed to launch the previously selected debugger but actually, everything works fine. Let's ignore it : )

The sample also use SSL. Otherwise, the app cannot be embedded in teams at all. You can find the code in https://github.com/garrytrinder/TabReactTSDotNet/blob/main/tabreacttsdotnet.client/vite.config.ts#L19
It generate the certificate with dotnet dev-certs command, which is different from what I suggest you in #12549 (comment). You can refer to this sample's solution if you feel like it's much easier to understand.

[summzhan]

Hi @npagare , with regarding to the question #12549 together with a set of related questions you have raised. I'd like to set some context here for you to better understanding. I'm sorry that we may not have a good doc for below content yet, but we will add more docs later.

To create a Teams app, you typically have three approaches:
1. Create app in Teams Developer Portal/TDP and then open it in Teams Toolkit/TTK:
By this way, Teams Toolkit will automatically choose a proper template based on the Teams capabilities that you defined in your manifest. The template itself contains source code, which you can edit in TTK.

In your case, you want a React app which is not yet provided in our templates so that is causing a difficulty from your first try.

- To address this, we have internally discussed to the potential solutions could be:
No.1 is to add a new template for React + .NET Teams app.
No.2 is to support users to select any existing project when they open Teams app in TTK from TDP. Not only matching available templates in TTK, but also enable users to import their own projects, which means open in TTK will auto add an empty Teams app in their existing React+.NET solution or Blazor solution or whatever they have.

2. Add an Empty Teams app to your existing .NET solution:
By this way, currently without the ability to sync manifest from TDP, users will need to do manual configurations to make project running, mainly include:

• Config capability.
• Config SSO.
• Resolve certificate issue.

I think you don't have any issues to config capabilities in manifest.
For SSO and certificate, unfortunately, these are quite hard to automatically handled by TTK since it is easy to cause conflicts or undesired results if TTK being too ambitious to directly make edits in users' source code. Adding Azure AD SSO to your app requires not only generating new files to your project but also making edits to config files like manifest.

Additionally, Teams Toolkit has a feature to add authentication for your Teams App which worth a try: after add empty Teams app to your React project. Right click on the Teams app you just added, select Teams Toolkit -> Add Authentication Code:

Then TTK will generate the SSO files like Entra ID manifest, at the same time you will be prompted with this guide to manually config your Entra ID to your Teams app.

- To address this, we have internally discussed to the potential solutions could be:
No.1 providing more samples and docs to guide users to do it manually.
No.2 As a next step we will enable to sync manifest from TDP. Then user can sync manifest from TDP after they added an empty project without manually editing manifest.

3. Start with templates provided in TTK
This is a starting point provided to those who doesn't have any project yet. Not for those who want to integrate their apps to Teams platform. Now we missed React + .NET template which we have already included in our backlog.

There are several new features requested to be added in TTK to resolve issues you raised. I have raised the proposal to include all these in our roadmap for FY2025. I will keep you updated and may invite you to try out beta version when we have. We are now in internal planning phase for FY2025 features, stay tuned and I will let you know when we have more concrete timeline.

[npagare]

Hello @summzhan and @hund030, thank you for your guidance. I will apply your thoughts on my end and get back to you.

@summzhan, configuration of the SSO and SSL Certs capability during non-prod and prod (per target M365 tenants) is a very vital requirement.

I appreciate your leadership in considering my issues in the TTK roadmap.
It will be my privilege to be the beta customer as those features are available to work with.

Good day!