Bug: Visual Studio Teams Toolkit issues after TeamsFx Upgrade

[wrharper-AASP]

Describe the bug The following menu options are now broken because they all just ask for an open dialog... If you open any one of these 3, you just get an open option. Below each menu selection, I will explain what should happen:

Teams Toolkit -> Zip App Package -> (both options):
            This should be a Save Dialog, not an Open Dialog so that people can publish the zip files via admin.teams.microsoft.com.
Teams Toolkit -> Open Teams Developer Portal to Publish:
            This should take you to the https://dev.teams.microsoft.com/ link to your app. Instead, it shows an Open Dialog option.
Teams Toolkit -> Preview in Teams:
            This should open the browser and launch the local host version or go straight to the app in the browser in Teams. Instead, it shows an Open Dialog option.

To Reproduce Steps to reproduce the behavior: Upgrade an existing project to the latest TeamsFx and the App Registration secret will fail when you try to use the app.

Expected behavior For whatever reason, all of the menu options have been broken upon upgrading.

Screenshots

[microsoft-github-policy-service[bot]]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[wrharper-AASP]

It looks like Update Manifest in Teams Developer Portal is also not correct. It is also opening an Open Dialog instead of going to the dev site straight to the manifest file area for your app.

[wrharper-AASP]

Convenience info for the devs:

[wrharper-AASP]

InitiateLoginEndpoint is a required missing property in teamsapp.local.yml!

    with:
      target: ./appsettings.Development.json
      content:
        TeamsFx:
          Authentication:
            ClientId: ${{AAD_APP_CLIENT_ID}}
            ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
            InitiateLoginEndpoint: ${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/auth-start.html <--------- THIS IS ALSO MISSING in both appsettings and appsettings.dev files!
            OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}

[wrharper-AASP]

ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}} is also decrypting to an invalid secret in .env.local.user, I have had to manually create a new one to bypass this problem for the time being (unencrypted).

[Alive-Fish]

hi @wrharper-AASP, thanks for reporting. For VS 17.7 GA, our TTK has some breaking changes. You can find the new design from v5 Guides. The main point is to let users customize the action, input, output in the teamsapp.yml or teamsapp.local.yml.

According to the main point, the TTK may not know the location of the manifest.json file. So, the Zip App Package, Open Teams Developer Portal to Publish and Preview in Teams will ask you to select it. The default folder of it may be ${ProjectPath}/appPackage/.

For missing property issue and secret incorrect decrypted issue, could you tell me which version you upgraded from and which version you upgraded to? I will investigate more about them.

[wrharper-AASP]

Ha, ok, that worked. It doesn't say that in the link Visual Studio gives you for the upgrade. That should be put in the documentation. The link Visual Studio gives you is: https://github.com/OfficeDev/TeamsFx/wiki/Upgrade-project-to-use-Teams-Toolkit-5.0-features

[wrharper-AASP]

Ok, it looks like it will ask for a manifest file every single time now. Is it going to stay like this? It would be better to define it somewhere, so you don't have to keep saying where it is over and over. It is in appPackage/manifest.json The menu items appear to be hard coded somehow because I cannot find where the link for those Cmds in the screenshot I provided above anywhere. So I cannot seem to alter this to make it more user friendly.

[wrharper-AASP]

I believe the real fix here would be to update the default path for those menu items because it appears to be trying to find it somewhere else and that is why it keeps asking?

[Alive-Fish]

The menu items appear to be hard coded somehow because I cannot find where the link for those Cmds in the screenshot I provided above anywhere. So I cannot seem to alter this to make it more user friendly. I believe the real fix here would be to update the default path for those menu items because it appears to be trying to find it somewhere else and that is why it keeps asking?

As I understand, do you hope these Cmds can save the selected manifest file path and do not ask the manifest file again? Or you cannot find any doc where the links should be?

[wrharper-AASP]

It should not be asking for it and be looking where the new default path is first. Then, if it does not find it and you select one, you can define it somewhere, so it doesn't keep asking.

[wrharper-AASP]

It didn't ask in previous versions, it shouldn't need to now.

[wrharper-AASP]

ok this upgrade broke another thing too.... All tabs now revert to the 1st tab in the Teams app. No matter what Tab I click, it loads the first one now...

Every tab clicked just goes to: @page "/"

[wrharper-AASP]

I am now officially stuck with a broken version permanently and you cannot revert back because if you try to prepare dependencies it forces you to upgrade again.

"If it's not broken, don't fix it..."

[wrharper-AASP]

local env file is defined:

# This file includes environment variables that can be committed to git. It's gitignored by default because it represents your local development environment.
TEAMSFX_ENV=local
CONFIG__MANIFEST__APPNAME__SHORT=local-debug
CONFIG__MANIFEST__APPNAME__FULL=Full name for local-debug
CONFIG__MANIFEST__DESCRIPTION__SHORT=Short description of local-debug
CONFIG__MANIFEST__DESCRIPTION__FULL=Full description of local-debug
CONFIG__MANIFEST__ICONS__COLOR=resources/color.png
CONFIG__MANIFEST__ICONS__OUTLINE=resources/outline.png
STATE__SOLUTION__PROVISIONSUCCEEDED=true
STATE__SOLUTION__TEAMSAPPTENANTID=SECURITY_NOTSHOWING
TEAMS_APP_TENANT_ID=SECURITY_NOTSHOWING
TEAMS_APP_ID=SECURITY_NOTSHOWING
PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH="#"
PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT=https://localhost:44302
PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__DOMAIN=localhost:44302
AAD_APP_CLIENT_ID=SECURITY_NOTSHOWING
AAD_APP_OBJECT_ID=SECURITY_NOTSHOWING
AAD_APP_ACCESS_AS_USER_PERMISSION_ID=SECURITY_NOTSHOWING
AAD_APP_TENANT_ID=SECURITY_NOTSHOWING
AAD_APP_OAUTH_AUTHORITY_HOST=https://login.microsoftonline.com
AAD_APP_OAUTH_AUTHORITY=https://login.microsoftonline.com/SECURITY_NOTSHOWING
STATE__FX_RESOURCE_AAD_APP_FOR_TEAMS__APPLICATIONIDURIS=api://localhost:44302/SECURITY_NOTSHOWING
STATE__FX_RESOURCE_AAD_APP_FOR_TEAMS__FRONTENDENDPOINT=https://localhost

TEAMSFX_M365_USER_NAME=SECURITY_NOTSHOWING

[Alive-Fish]

It should not be asking for it and be looking where the new default path is first. Then, if it does not find it and you select one, you can define it somewhere, so it doesn't keep asking.

Thanks, for this, we have fixed it and give the default path to ${ProjectPath}/appPackage/. It will release after VS 17.8 Preview 3.

For migration issues, I involve @xzf0587 for some details.

[xzf0587]

InitiateLoginEndpoint is a required missing property in teamsapp.local.yml!

    with:
      target: ./appsettings.Development.json
      content:
        TeamsFx:
          Authentication:
            ClientId: ${{AAD_APP_CLIENT_ID}}
            ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
            InitiateLoginEndpoint: ${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/auth-start.html <--------- THIS IS ALSO MISSING in both appsettings and appsettings.dev files!
            OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}

@wrharper-AASP , the PROVISIONOUTPUTAZUREWEBAPPTABOUTPUTENDPOINT is set in env files. I see it in your reply. Which action will trigger this missing property error and is there any error message?

[xzf0587]

ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}} is also decrypting to an invalid secret in .env.local.user, I have had to manually create a new one to bypass this problem for the time being (unencrypted).

Yes, the SECRET_AAD_APP_CLIENT_SECRET is encrypted in the .env.local.user file like SECRET_AAD_APP_CLIENT_SECRET=crypto_e2f1f93268e62792638cb1db080a29f1... How did you know this password is not correct? A quick way to resolve it is to delete the entry of SECRET_AAD_APP_CLIENT_SECRET and rerun the local debug which will regenerate the secret.

[xzf0587]

ok this upgrade broke another thing too.... All tabs now revert to the 1st tab in the Teams app. No matter what Tab I click, it loads the first one now...

Every tab clicked just goes to: @page "/"

Does it happen when running local debug? Could you provide the manifest.json content in appPackage folder?

[wrharper-AASP]

sure, this is what the upgrade generated after fixing the version issue:

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
    "manifestVersion": "1.14",
    "version": "1.0.4",
    "id": "${{TEAMS_APP_ID}}",
    "packageName": "com.microsoft.teams.extension",
    "name": {
        "short": "NEW TEST",
        "full": "NEW TEST"
    },
    "developer": {
        "name": "TEST",
        "websiteUrl": "https://www.test.com",
        "privacyUrl": "https://www.test.com/termofuse",
        "termsOfUseUrl": "https://www.test.com/privacy"
    },
    "icons": {
        "color": "${{CONFIG__MANIFEST__ICONS__COLOR}}",
        "outline": "${{CONFIG__MANIFEST__ICONS__OUTLINE}}"
    },
    "description": {
        "short": "TEST",
        "full": "TEST"
    },
    "accentColor": "#FFFFFF",
    "bots": [],
    "composeExtensions": [],
    "configurableTabs": [
        {
            "configurationUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/config",
            "canUpdateConfiguration": true,
            "scopes": [
                "team",
                "groupchat"
            ]
        }
    ],
    "staticTabs": [
        {
            "entityId": "index0",
            "name": "tabb1",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "index1",
            "name": "tabb2",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab2",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab2",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "index2",
            "name": "tabb3",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab3",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab3",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "index3",
            "name": "tabb4",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab4",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab4",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "index4",
            "name": "tabb5",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab5",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab5",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "index5",
            "name": "tabb6",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab6",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab6",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__DOMAIN}}"
    ],
    "webApplicationInfo": {
        "id": "${{AAD_APP_CLIENT_ID}}",
        "resource": "api://${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
    }
}

[wrharper-AASP]

yes, it only happens with local debug which is the primary way to do testing.

[xzf0587]

@wrharper-AASP It seems you use a webapp "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}}/tab" will be resolved as https://localhost:44302#/tab In the default web app project, we do not use hash code router. You may remove the ${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}} and try again. The URL looks like "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/tab"

In addition, has you customized the bicep file? Can you share the code in bicep file about the webapptab of indexpath and endpoint? They should be in the azure/provision folder, and file name likes webAppTab.bicep

[wrharper-AASP]

This issue still exists after doing that.

I thought it was the index as well and tried just making it a / and it still happened. The publishing version uses / but localhost tries to use # for some reason. Doesn't work either way though.

The only bicep files I see after this upgrade are in the Templates/azure folder and I'm not seeing any index definition.

[wrharper-AASP]

just to be clear and have proof, I did the following across all tabs:

        {
            "entityId": "index0",
            "name": "tabb1",
            "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/tab",
            "websiteUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/tab",
            "scopes": [
                "personal"
            ]
        },

[xzf0587]

@wrharper-AASP, Thanks for the information. If there is no index definition in bicep files, please help provide the bicep files content to help the investigation. Because ${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH}} is generated from bicep based on the key name pattern. And has the bicep files been modified?

This issue still exists after doing that.

I thought it was the index as well and tried just making it a / and it still happened. The publishing version uses / but localhost tries to use # for some reason. Doesn't work either way though.

The only bicep files I see after this upgrade are in the Templates/azure folder and I'm not seeing any index definition.

[wrharper-AASP]

Can you tell me the name and path of what bicep file should be doing this? I only see ones in the templates/azure folder.

[wrharper-AASP]

Templates/azure folder: config.bicep

@secure()
param provisionParameters object
param provisionOutputs object

// Get existing app settings for merge
var currentAppSettings = list('${ provisionOutputs.azureWebAppTabOutput.value.resourceId }/config/appsettings', '2021-02-01').properties

// Merge TeamsFx configurations to Bot resources
module teamsFxAzureWebAppTabConfig './teamsFx/azureWebAppTabConfig.bicep' = {
  name: 'teamsFxAzureWebAppTabConfig'
  params: {
    provisionParameters: provisionParameters
    provisionOutputs: provisionOutputs
    currentAppSettings: currentAppSettings
  }
}

main.bicep

@secure()
param provisionParameters object

module provision './provision.bicep' = {
  name: 'provisionResources'
  params: {
    provisionParameters: provisionParameters
  }
}
output provisionOutput object = provision
module config './config.bicep' = {
  name: 'configureResources'
  params: {
    provisionParameters: provisionParameters
    provisionOutputs: provision
  }
}
output configOutput object = contains(reference(resourceId('Microsoft.Resources/deployments', config.name), '2020-06-01'), 'outputs') ? config : {}

provision.bicep

@secure()
param provisionParameters object

// Resources web app
module azureWebAppTabProvision './provision/azureWebAppTab.bicep' = {
  name: 'azureWebAppTabProvision'
  params: {
    provisionParameters: provisionParameters
    userAssignedIdentityId: userAssignedIdentityProvision.outputs.identityResourceId
  }
}

output azureWebAppTabOutput object = {
  teamsFxPluginId: 'teams-tab'
  skuName: azureWebAppTabProvision.outputs.skuName
  siteName: azureWebAppTabProvision.outputs.siteName
  domain: azureWebAppTabProvision.outputs.domain
  appServicePlanName: azureWebAppTabProvision.outputs.appServicePlanName
  resourceId: azureWebAppTabProvision.outputs.resourceId
  siteEndpoint: azureWebAppTabProvision.outputs.siteEndpoint
  endpoint: azureWebAppTabProvision.outputs.siteEndpoint
}

output TabOutput object = {
  domain: azureWebAppTabProvision.outputs.domain
  endpoint: azureWebAppTabProvision.outputs.siteEndpoint
}

// Resources for identity
module userAssignedIdentityProvision './provision/identity.bicep' = {
  name: 'userAssignedIdentityProvision'
  params: {
    provisionParameters: provisionParameters
  }
}

output identityOutput object = {
  teamsFxPluginId: 'identity'
  identityName: userAssignedIdentityProvision.outputs.identityName
  identityResourceId: userAssignedIdentityProvision.outputs.identityResourceId
  identityClientId: userAssignedIdentityProvision.outputs.identityClientId
}

[wrharper-AASP]

Templates/azure/teamsFx/azureWebAppTabConfig.bicep

// Auto generated content, please customize files under provision folder

@secure()
param provisionParameters object
param provisionOutputs object
@secure()
param currentAppSettings object

var webAppName = split(provisionOutputs.azureWebAppTabOutput.value.resourceId, '/')[8]
var webappEndpoint = provisionOutputs.azureWebAppTabOutput.value.siteEndpoint
var m365ClientId = provisionParameters['m365ClientId']
var m365ClientSecret = provisionParameters['m365ClientSecret']
var m365TenantId = provisionParameters['m365TenantId']
var m365OauthAuthorityHost = provisionParameters['m365OauthAuthorityHost']
var m365ApplicationIdUri = 'api://${ provisionOutputs.TabOutput.value.domain }/${m365ClientId}'
var vault = ''

resource webAppSettings 'Microsoft.Web/sites/config@2021-02-01' = {
  name: '${webAppName}/appsettings'
  properties: union({
    TeamsFx__Authentication__ClientId: m365ClientId // Client id of AAD application
    TeamsFx__Authentication__ClientSecret: m365ClientSecret // Client secret of AAD application
    TeamsFx__Authentication__InitiateLoginEndpoint: '${webappEndpoint}/auth-start.html'
    TeamsFx__Authentication__OAuthAuthority: uri(m365OauthAuthorityHost, m365TenantId) // AAD authority host
    TAB_APP_ENDPOINT: webappEndpoint
    IDENTITY_ID: provisionOutputs.identityOutput.value.identityClientId // User assigned identity id, the identity is used to access other Azure resources
    vaultname: vault
  }, currentAppSettings)
}

Templates/azure/provision: azureWebAppTab.bicep:

@secure()
param provisionParameters object
param userAssignedIdentityId string

var resourceBaseName = provisionParameters.resourceBaseName
var serverfarmsName = contains(provisionParameters, 'webAppServerfarmsName') ? provisionParameters['webAppServerfarmsName'] : '${resourceBaseName}tab' // Try to read name for App Service Plan from parameters
var webAppSKU = contains(provisionParameters, 'webAppSKU') ? provisionParameters['webAppSKU'] : 'F1' // Try to read SKU for Azure Web App from parameters
var webAppName = contains(provisionParameters, 'webAppSitesName') ? provisionParameters['webAppSitesName'] : '${resourceBaseName}tab' // Try to read name for Azure Web App from parameters

// Compute resources for your Web App
resource serverfarm 'Microsoft.Web/serverfarms@2021-02-01' = {
  kind: 'app'
  location: resourceGroup().location
  name: serverfarmsName
  sku: {
    name: webAppSKU
  }
  properties: {}
}

// Web App that hosts your app
resource webApp 'Microsoft.Web/sites@2021-02-01' = {
  kind: 'app'
  location: resourceGroup().location
  name: webAppName
  properties: {
    serverFarmId: serverfarm.id
    keyVaultReferenceIdentity: userAssignedIdentityId // Use given user assigned identity to access Key Vault
    httpsOnly: true
    siteConfig: {
      appSettings: [
        {
          name: 'WEBSITE_RUN_FROM_PACKAGE'
          value: '1'
        }
      ]
    }
  }
  identity: {
    type: 'UserAssigned'
    userAssignedIdentities: {
      '${userAssignedIdentityId}': {} // The identity is used to access other Azure resources
    }
  }
}

output skuName string = webAppSKU
output siteName string = webAppName
output domain string = webApp.properties.defaultHostName
output appServicePlanName string = serverfarmsName
output resourceId string = webApp.id
output siteEndpoint string = 'https://${webApp.properties.defaultHostName}'

identity.bicep:

@secure()
param provisionParameters object
var resourceBaseName = provisionParameters.resourceBaseName
var identityName = contains(provisionParameters, 'userAssignedIdentityName') ? provisionParameters['userAssignedIdentityName'] : '${resourceBaseName}' // Try to read name for user assigned identity from parameters

// user assigned identity will be used to access other Azure resources
resource managedIdentity 'Microsoft.ManagedIdentity/userAssignedIdentities@2018-11-30' = {
  name: identityName
  location: resourceGroup().location
}

output identityName string = identityName
output identityClientId string = managedIdentity.properties.clientId
output identityResourceId string = managedIdentity.id
output identityPrincipalId string = managedIdentity.properties.principalId

[wrharper-AASP]

MSGraph / MSAL is essentially what required the new auth-start.html & auth-end.html. Since it worked from the old version, and I have changed nothing since the upgrade. I'm not seeing how any of this would be the cause unless the upgrade failed at doing something automatically.

[xzf0587]

@wrharper-AASP, Thanks for your reply. The upgrade will update the env file and manifest.json by key name conversion and the bicep and source code of tab will keep the same. Currently, you can launch the local debug successfully, but it will go to the home page when you try to access any tab?

[wrharper-AASP]

correct

[wrharper-AASP]

It goes to whatever has @page "/" and if I just remove it, nothing happens. In the old version, you would have @page "/" on the same one as @page "/tab1" and it would automatically take care of itself. For whatever reason, it does not do that now.

the strangest part is the fact that it does work right on the published version and it's just local host doing this...

[xzf0587]

Yes, it looks somewhat extraordinary. As you can launch the local debug, could you help click F12 in the launched browser to open dev tool and watch the network activity when trying to access like @page "/tab1" page?

[wrharper-AASP]

I did

@page "/"
@page "/tab" //technically /tab not /tab1 but same thing in the end :)

on an empty page

this is how it worked correctly in the old version and still works on the published version this way.

[wrharper-AASP]

if i click on @page "/tab2" it stays blank and doesn't load tab2

[xzf0587]

what the request url in the localhost request are for these 2 click?

[wrharper-AASP]

it just stays https://localhost:44302/

[xzf0587]

Thanks for helping our investigation. It seems the url is resolved like 'https://localhost:44302#/tab2', so the 'tab2' behind the '#' is not sent to server. We are using "contentUrl": "${{PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT}}/tab2"? Is there a manifest.local.json in the manifest.json folder?

[wrharper-AASP]

There is only manifest.json and it is "contentUrl": "${{PROVISIONOUTPUTAZUREWEBAPPTABOUTPUTENDPOINT}}/tab2",

[wrharper-AASP]

teamsapp.local.yml:

  - uses: script # Set env for local launch
    with:
      run:
        echo "::set-teamsfx-env PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__DOMAIN=localhost:44302";
        echo "::set-teamsfx-env PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT=https://localhost:44302";
        echo "::set-teamsfx-env PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH=#";

.env.local:

PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH="#"
PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__ENDPOINT=https://localhost:44302
PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__DOMAIN=localhost:44302

[xzf0587]

The env setting is expected. @hund030 could you help investigate this issue?

[wrharper-AASP]

that kind of makes sense since we removed it? "contentUrl": "${{PROVISIONOUTPUTAZUREWEBAPPTABOUTPUTENDPOINT}}${{PROVISIONOUTPUTAZUREWEBAPPTABOUTPUTINDEXPATH}}/tab2",

[wrharper-AASP]

However, even if I put this back, it doesn't add the # for some reason but it does add the extra / in publish.

[wrharper-AASP]

It looks like the local version of the manifest isn't updating and that is the root cause of this issue?

[xzf0587]

Both local and remote use the same manifest template which has some ${{KEY}} placeholders will be resolved by the .env.local/.env.dev. The build manifest path is specified by teamsApp/zipAppPackage outputJsonPath in your teamsapp.local.yml. Please check this value in the build manifest

[wrharper-AASP]

  - uses: aadApp/update # Apply the AAD manifest to an existing AAD app. Will use the object id in manifest file to determine which AAD app to update.
    with:
      manifestPath: ./aad.manifest.json # Relative path to this file. Environment variables in manifest will be replaced before apply to AAD app
      outputFilePath : ./build/aad.manifest.${{TEAMSFX_ENV}}.json
  - uses: teamsApp/validateManifest # Validate using manifest schema
    with:
      manifestPath: ./appPackage/manifest.json # Path to manifest template
  - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value
    with:
      manifestPath: ./appPackage/manifest.json # Path to manifest template
      outputZipPath: ./build/appPackage/appPackage.${{TEAMSFX_ENV}}.zip
      outputJsonPath: ./build/appPackage/manifest.${{TEAMSFX_ENV}}.json
  - uses: teamsApp/update # Apply the Teams app manifest to an existing Teams app in Teams Developer Portal. Will use the app id in manifest file to determine which Teams app to update.
    with:
      appPackagePath: ./build/appPackage/appPackage.${{TEAMSFX_ENV}}.zip # Relative path to this file. This is the path for built zip file.

[wrharper-AASP]

does this maybe have to do with the projectid tied to local projects in dev.teams.microsoft.com? Actually, looking at the manifest in that site it shows:

      "contentUrl": "https://localhost:44302#/tab2",
      "websiteUrl": "https://localhost:44302#/tab2",

so, the only problem is the site will not redirect for some reason.

[xzf0587]

does this maybe have to do with the projectid tied to local projects in dev.teams.microsoft.com? Actually, looking at the manifest in that site it shows:

      "contentUrl": "https://localhost:44302#/tab2",
      "websiteUrl": "https://localhost:44302#/tab2",

so, the only problem is the site will not redirect for some reason.

Yes. The uses: teamsApp/update action will use this zipPackage of manifest to update the teams app in Teams Developer Portal.

As the contentUrl is "contentUrl": "https://localhost:44302#/tab2", it should be "contentUrl": "https://localhost:44302/tab2" The extra # should be removed. Please set PROVISIONOUTPUT__AZUREWEBAPPTABOUTPUT__INDEXPATH to empty string '' in .env.local.(according to the bicep, this value is not be overwrite by bicep output, the manual set is the final value. whatever, make sure it empty string) And retry to debug it.

[wrharper-AASP]

I just deleted PROVISIONOUTPUTAZUREWEBAPPTABOUTPUTINDEXPATH everywhere and it still happens.

[wrharper-AASP]

dev.teams.microsoft.com now shows "contentUrl": "https://localhost:44302/tab2" and it still happens.