Search code examples
javascriptnode.jsngrokmicrosoft-teams

Sideloading app with ngrok not working

Repro steps...

  1. I created a Teams tab app via the teams yeoman generator (installed via npm).
  2. I followed the locally hosted option that uses ngrok.
  3. I started ngrok with ./ngrok http 3007 --host-header=localhost:3007 (still running) and copy/pasted the generated urls into my manifest.json
  4. I started another terminal session and ran gulp serve
  5. I created my package via gulp manifest
  6. I tried to sideload the generated zip and get the error messages: Error while reading manifest.json: Failed to find icon "https://xxxxxxxx.ngrok.io/assets/tab-44.png" file in the package Failed to find icon "https://xxxxxxxx.ngrok.io/assets/tab-88.png" file in the package (subdomain redacted)

This is what I've confirmed/debugged...

  1. Going to https://xxxxxxxx.ngrok.io/assets/tab-44.png and https://xxxxxxxx.ngrok.io/assets/tab-88.png works fine in the browser. I see the default smiley face icon and see the request in the ngrok terminal and web interfaces.
  2. I don't see any requests coming from Teams attempting to fetch the icons in the ngrok interfaces.
  3. I've also tested that I can reach the icons from my phone.
  4. I've unzipped the generated package and it only contains the manifest.json with the correct ngrok urls.
  5. My tenant has enabled sideloading of apps.
  6. I am an owner of the Team I'm trying to sideload this app into.

Any ideas? Thank you!

Solution

  • The outline and colour are relative file paths to PNG icons. Please put both the icons (tab-44.png & tab-88.png) as part of package along with manifest.json file.