Microsoft Teams Action messaging extension with task module and URL not working

Question

I am trying to build an action messaging extension with a task module implementation which uses a URL attribute to load the page. Attached is the screenshot of the task module code which was generated by Yeoman Teams generator.

The popup comes up blank. So it means it's not loading the HTML file path, but if I open Chrome and try to load the URL, it works fine.

Also instead of using URL if I use an adaptive card it works fine. Only the URL part doesn't load on the popup. Attached is another screenshot of the popup inside teams:

What could be wrong with the code?

Answer 1

Every time when you compile and run the project, a new hostname is generated since ngrok free license is used in the yo teams scaffolding, which makes the app to reference to the old URL.

You need to uninstall the app from the Teams app store under your organization and upload the new app from the package folder .zip (Only after gulp ngrok-serve)

If it still does not work, check the below

1. Unzip the package file and verify the manifest whether it's pointing to the right hostname of the action html page
2. Go to http://localhost:4040 to inspect the ngrok tunnel traffic that should give more info on the routed requests.

Answer 2

The other answer is correct in that your url needs to be reflected 100% correctly in your manifest. However, there are a few things that you need to be clear on:

1. It's not per se the address of the BOT that's important, but rather the address of the web page itself that needs to be listed in your safe domains list in your manifest. In your case, they're hosted in the same endpoint, but they might not be in your final solution, depending on how you end up hosting this.
2. While you're developing locally, rather use App Studio. That way, you don't need to fiddle with the zip file every time - you can just change it in App Studio and immediately redeploy with the updated URL