[JS Bug]: JavaScript sample "02.react-video" fails in install in Teams via sideload method

[canxerian]

Please review FAQ and Known issues before filing a new item!

• [✅] I have reviewed the FAQ and known issues and did not find my topic

Describe the bug

User is unable to sideload 02.react-video sample project in to Teams and receives the error message: "There was a problem reaching this app"

To Reproduce

Run the app locally

1. cd samples\javascript\02.react-video\manifest
2. npm install
3. npm start
4. ngrok http 3000 --host-header=localhost

Create Microsoft app and modify manifest.json

1. Go to https://dev.teams.microsoft.com/apps and create a new app
2. Replace "id": "<<YOUR-MICROSOFT-APP-ID>>" in `samples\javascript\02.react-video\manifest\manifest.json with the newly created app ID
3. Replace "configurationUrl": "https://<<BASE_URI_DOMAIN>>/config?inTeams=true" with ngrok URL from step 5 above
4. Compress contents of samples\javascript\02.react-video\manifest to zip file

Sideload package

1. Follow instructions from sample Readme: https://github.com/microsoft/live-share-sdk/tree/main/samples/javascript/03.live-canvas-demo#test-it-out

Expected behavior

The app can be sideloaded in to Teams

Desktop(s) (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Add any other context about the problem here.
It appears this issue also affects 21.react-media-template, but not 01.dice-roller and 03.live-canvas-demo (I have not tested with others)

[corinagum]

Hey @canxerian thanks for filing the bug. Couple questions (starting with the frustrating basics) :

• Are you using the latest code from main branch?
• Did you run npm run build before npm start?
• Have you built the project (npm install) from the root of the project previously? (Because it's a lerna monorepo, there's a possibility they the root install and sample install butt heads)
• Are you able to run the same sample locally?
• Are you seeing any errors when you install, build, or start the server?

Meanwhile I'll try this out on a fresh clone and report back if I repro.

[corinagum]

@canxerian This looks like it's related to some code / documentation fixes I'm working on right now.

1. The README says to run ngrok http 3000, but that's assuming the client is running on that port. The vite.config file needs to be updated to include:

server: {
    port: 3000
}

to ensure it runs on the right port. (By default it runs on a different port)

2. Missing documentation regarding ngrok:

The other samples have this info, but this one does not (my apologies)

When you're trying out a sideload, you need to run npm run start:https instead of npm run start due to the extra config settings for ngrok.

Therefore, when you run npm run start:https, it uses the vite.https-config.js file, which needs to be updated to:

import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        preserveSymlinks: true
    },
    server: {
        hmr: {
            // Needed to make ngrok work with Vite
            clientPort: 443,
        },
        port: 3000,
    },
});

Please try that out and let me know how it goes. Apologies again for the documentation errors - Working to get the fixes checked in ASAP.

[canxerian]

Hi @corinagum, thanks for your speedy reply!

I ran the sample again with your suggestions but still hit the issue described above. Here's the error from the Teams DevTools console:

[corinagum]

Hmmm I'm sorry it's still not working for you. I used the 02 manifest just now and I was able to get the sample working.

1. Just to confirm: is this error after you have installed the app to the meeting, and then when adding it using the [+] button in the ubar during the meeting?
2. Does your ngrok URL include /config?inTeams=true?
3. Are there any unusual network traces in the network tab in dev-tools?
4. If you use your ngrok link in the browser (removing /config?inTeams=true), can you run the sample?

[ryanbliss]

Hey @canxerian, I was reading your post and saw this:

cd samples\javascript\02.react-video\manifest

I assume you actually did this, but want to make sure:

cd samples\javascript\02.react-video

Going to do more debugging to see if I can reproduce the issue, but in general this sort of thing will happen if:
A) the app is not actively being served (e.g., you stopped the command line process after npm run start-https to run ngrok).
B) The domain in the app manifest isn't correct. Seeing the exact URL you are using in your manifest could be helpful.

For npm run start vs. npm run start-https, it shouldn't cause this error, but rather cause the app to refresh every 5 seconds or so. With that said, @corinagum mentioned to run npm run start:https, which is a typo. The correct command to run is npm run start-https.

Again, I'll keep debugging and let you know what I find, but hopefully this helps!

[corinagum]

Closing as resolved 🙂