How to Publish Custom Teams App to Azure from Visual Studio 2022

user26591380
August 21, 2024
90 views
0 votes
2 Answers

I need your help I’m not expert creating Custom Teams App, this is my first App and I’m creating a Custom Teams App in Microsoft Visual Studio 2022 (Blazor), the App is ready I Already finished and every time I executed Locally the APP works fine if I execute it directly from Visual Studio 2022. I already upload the manifest.json to Teams App and the Teams Administrator already approved and now I can see the Icon in the lists of applications inside Teams but when I press to the App the first Page is empty(I suppose should be first publish the Custom Teams App to Azure according waht I read).

I’m waiting the administrators assign me the missing privileges to publish to Azure directly from Visual Studio 2022 (I received an error that I don’t have privileges).

My question is… after the App is published to Azure what should I modify in the Package to make the Custom Teams App works in Teams? There are some files that I was reading that should be modified but those files have some variables that I don’t understand what it means and where I can get the values.

For example the files manifest.json, .env.local, .env.local, launchSettings.json, etc. by default those files have some values but I don’t know what I should modify in these files to change it from Development to Production environment.

I’m attaching the images of those files and there are variables like TEAMS_APP_ID, TAB_ENDPOINT, TEAMSFX_ENV, APP_NAME_SUFFIX, TAB_DOMAIN, TEAMS_APP_TENANT_ID once the App is published to Azure what value should I change and if can I get those values from Azure?

enter image description here

How to Publish Custom Teams App to Azure from Visual Studio 2022

Answers

Chosen as BEST ANSWER
- user26591380
- August 21, 2024 at 11:28 pm
- 0 votes
0
I already did Project=>Teams Toolkit=>Provision in the cloud and the ".env.dev" was modified automatically with all the information from Azure but the webpage created specified in Azure when I click it says "The service is unavailable." I don't know why but this looks like is for Development option so I think doesn't matter if the development option it not working.

And I tried to Publish in "Azure App Service (Windows)" following the wizard in Visual Studio 2022 and the process was successfully Published from Visual Studio 2022, if I go to Azure account I can see the link created when I click on the webpage says "An error has occurred. This application may no longer respond until reloaded. Reload" and activating the Developer Tools in the web browser I see 2 Errors but when I execute the Teams APP directly in Visual Studio 2022 the application looks fine actually when I execute it in VS2022 the Team App appears in Teams and I can execute it without problem, I mean, the APP doesn't has errors.

Is there something that I missing? For example the files manifest.json, .env.local, .env.local, launchSettings.json, etc. should I need to modify something before publish it?

Why the webpage doesn't work directly from azure after published? But when I execute it from VS2022 the App works fine(When I execute it from VS2022 the link is "https://localhost:44302" because is locally and works fine... But it's not working from Azure.

Is there another configuration or values that I need to change in VS2022 before publish it in Azure?

These are the 2 errors that appears using the Web Developer Tool when I click directly the webpage created in Azure when was published:

ERROR #1: "Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. blazor.server.js:1:116297 log h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 tr h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 er h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _invokeClientMethod h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _invokeClientMethod h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _processIncomingData h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 onreceive h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _poll h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1" ERROR #2: "Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State. send h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _sendMessage h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 _sendWithProtocol h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 send h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 endInvokeJSFromDotNet h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1 beginInvokeJSFromDotNet h ttps://basicblazortabapp20240821103153.azurewebsites.net/_framework/blazor.server.js:1"

(Edit)

Before deploying the Microsoft Teams app to Azure, provision the resources in Visual studio.

Navigate to Project=>Teams Toolkit=>Provision in the cloud:

Select the Subscription, Resource group and click on Provision:

This way you can provision the resources required for the deployment:

Summary:
(√) Done: Lifecycle stage provision was executed successfully.
  (√) Done: aadApp/create was executed successfully.
    (√) Done: Created Microsoft Entra application with object id edffa21d-d79e-427d-bbee-67498a7b61c6
    (√) Done: Generated client secret for Microsoft Entra application with object id edffa21d-d79e-427d-bbee-67498a7b61c6
  (√) Done: teamsApp/create was executed successfully.
    (√) Done: Teams app 90d9ce64-f33e-4291-937f-0ee1da3a572f created successfully
  (√) Done: arm/deploy was executed successfully.
    (√) Done: ARM templates are deployed successfully. Resource group name: pravrg. Deployment name: Create-resources-for-tab
  (√) Done: aadApp/update was executed successfully.
    (√) Done: Applied manifest ./aad.manifest.json to Microsoft Entra application with object id edffa21d-d79e-427d-bbee-67498a7b61c6
  (√) Done: teamsApp/validateManifest was executed successfully.
  (√) Done: teamsApp/zipAppPackage was executed successfully.
  (√) Done: teamsApp/validateAppPackage was executed successfully.
  (√) Done: teamsApp/update was executed successfully.
    (√) Done: Teams app 90d9ce64-f33e-4291-937f-0ee1da3a572f updated successfully
  (√) Done: teamsApp/extendToM365 was executed successfully.
    (√) Done: The Microsoft 365 title has been acquired successfully (U_565d847b-cdb1-f0ac-57e0-560882d1db04).

9/9 actions in provision stage executed successfully.

The values for the settings you mentioned will be added automatically in .env.dev:

My .env.dev:

# Generated values during provision, you can define your own variables.

TEAMS_APP_ID=90d9ce64-fXXXX572f
AAD_APP_CLIENT_ID=9ac29557-c4XXXXX80a43
AAD_APP_OBJECT_ID=edffa21XXXXXa7b61c6
AAD_APP_ACCESS_AS_USER_PERMISSION_ID=bb5e02bXXXXXca4359a
AAD_APP_TENANT_ID=72f98XXXXXX011db47
AAD_APP_OAUTH_AUTHORITY_HOST=https://login.microsoftonline.com
AAD_APP_OAUTH_AUTHORITY=https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47
TAB_AZURE_APP_SERVICE_RESOURCE_ID=/subscriptions/d9XXXXX-4732-XX589e52bc/resourceGroups/pravrg/providers/Microsoft.Web/sites/ssotabea8c47
TAB_ENDPOINT=https://ssoXXXXea8c47.azurewebsites.net

TEAMS_APP_TENANT_ID=72f98XXXXXX-2d7cd011db47
TAB_DOMAIN=ssotXXXXXXa8c47.azurewebsites.net
TAB_HOSTNAME=ssoXXXXXX8c47.azurewebsites.net
M365_TITLE_ID=U_565d847XXXXXX60882d1db04
M365_APP_ID=d55c7c98-d88XXXXXXa874ea8a

Deploy the app using Visual studio:

Navigate to Project=>Teams Toolkit=>Deploy to the cloud:

Executing deploy
    // Removed few logs
Executing lifecycle deploy
Executing action cli/runDotnetCommand in lifecycle deploy
Start to run command: "%ComSpec% /D /E:ON /V:OFF /S /C "CALL dotnet publish --configuration Release MyTeamsApp6.csproj"" with args: 
    // Removed few logs
Action cli/runDotnetCommand in lifecycle deploy succeeded with output {}
Executing action azureAppService/zipDeploy in lifecycle deploy
Get Microsoft Entra token successfully. Upload zip package through AAD Auth mode.
Start to upload zip file to https://ssotabea8c47.scm.azurewebsites.net/api/zipdeploy?isAsync=true
Upload zip file to https://ssotabea8c47.scm.azurewebsites.net/api/zipdeploy?isAsync=true complete, response: {"status":202,"statusText":"Accepted","headers":{},"config":{"headers":{},"data":{}},"request":{},"data":""}.
Check deploy status with location: https://ssotabea8c47.scm.azurewebsites.net/api/deployments/latest?deployer=ZipDeploy&time=2024-08-01_10-14-00Z
Check deploy status response: {"status":200,"statusText":"OK","headers":{},"config":{"headers":{}},"request":{},"data":{"status":4}}
Start send telemetry data {"time_cost":"18406","status":"4","message":"Created via a push deployment","received_time":"2024-08-01T10:14:00.5509503Z","started_time":"2024-08-01T10:14:00.6603294Z","end_time":"2024-08-01T10:14:00.8947021Z","last_success_end_time":"2024-08-01T10:14:00.8947021Z","complete":"true","active":"true","is_readonly":"true","site_name_hash":"660f089e06f8c633dedcb6c2014c8ad9f88a7dc5dd269affdc224bdce8534594"}
Action azureAppService/zipDeploy in lifecycle deploy succeeded with output {}
Finished Executing lifecycle deploy. Result: {}
Execution summary:

Summary:
(√) Done: Lifecycle stage deploy was executed successfully.
  (√) Done: cli/runDotnetCommand was executed successfully.
    (√) Done: Successful execution of the `dotnet publish --configuration Release MyTeamsApp6.csproj` command at `C:UsersunameSourceReposMyTeamsAppMyTeamsApp`.
  (√) Done: azureAppService/zipDeploy was executed successfully.
    (√) Done: Successfully deployed `C:UsersunameSourceReposMyTeamsAppMyTeamsAppbinReleasenet8.0publish` to Azure App Service.

Deployed the app to Azure:

Portal:

Please signup or login to give your own answer.

Click here to cancel reply.