ngrok, error 6022, and Teams scaffoldingBug report: <short description>

[elthombre]

Description

Hi, technically, this a duplicate of the following:

https://github.com/MicrosoftDocs/msteams-docs/issues/6855

It may be easiest to start at the bottom of the above incident and read backwards. The long-and-short is that the ngrok URLs that are generated from within the VS Code project do not browse as expected / as shown in the documentation samples.

Similarly, I am having trouble reaching the app from within Teams as described here:

https://github.com/MicrosoftDocs/msteams-docs/issues/4249

and this incident is also referenced in #6855.

Steps to reproduce

also from #6855:

Try the chapter 3 source:

https://github.com/Apress/pro-microsoft-teams-dev

and when I see the following:

https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab?pivots=node-java-script

it doesn't appear to reference any installation or versioning of 3rd party tools such as node, ngrok, etc. How might this affect the scaffolding created by the Yeoman generator?

Are there versioning considerations?

Expected results

1. That the ngrok URLs offered up from VS Code browse as described in the documentation samples.

2. That the app can be reached as expected in Teams also as described in the documentation samples.

Actual results

also from my #6855:

In VS Code, the solution starts & runs. When the URL provided is browsed, it throws the ERR_NGROK_6022 exception.

Initially, I noted an ngrok.yml discrepancy in the utils.js: join(homedir(), ".ngrok2", "ngrok.yml") vs. "C:\Users[username]\AppData\Local/ngrok/ngrok.yml" - the latter being my ngrok location.

I then hardcoded the local path in the function and I've also updated ngrok, node, npm, etc. to latest stable versions. I continue to receive that exception.

In the dashboard, there was a 404 Not Found exception associated with GET /favicon.ico. I updated the index.html files as follows:

https://stackoverflow.com/questions/31075893/im-getting-favicon-ico-error/

https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests#

the ERR_NGROK_6022 exception persists. I have found the following:

https://stackoverflow.com/questions/71900716/im-getting-ngrok-error-6022-after-doing-everything-properly

It was my initial understanding that ngrok could not find the .yml file & associated authtoken.

and I can't reach the app as described here:

https://github.com/MicrosoftDocs/msteams-docs/issues/4249

Project you experience issues with

generator-teams

generator version

4.0.1

build tools version

1.8.0

nodejs version

v16.15.1

npm version

8.11.0 (npm) 1.22.15 (yarn)

Operating system (environment)

Windows

Additional Info

No response

[stephanbisser]

@elthombre you are writing the following sentence which is a bit unclear to me what you are actually doing and trying to achieve:

In VS Code, the solution starts & runs. When the URL provided is browsed, it throws the ERR_NGROK_6022 exception.

How are you executing your project? What type of solution did you scaffold using yo teams? Did you follow the prereq install guide from here?

You are referring to a lot of docs which are outside of our realm as this is the yo teams repo, so I would kindly ask you to follow the tutorial from here to see if yo teams and the prereqs for that are working accordingly on your machine:

https://pnp.github.io/generator-teams/tutorials/build-your-first-microsoft-teams-app/

[elthombre]

@stephanbisser in answer to your question, from here:

https://link.springer.com/book/10.1007/978-1-4842-6364-8

and here:

https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode&tutorial-step=2

that said, I will start anew through the link that you provided.

[elthombre]

@stephanbisser , what does the following mean:

"Now you need to enter a URL of where you will host your solution. This can be any URL, but by default the generator suggests an Azure Web Sites URL."

In other words -> Azure in relation to my organization assuming my Teams work will be done under the umbrella of my organization? Azure as in a 'free Azure account'? "any URL" -> where else would it be hosted? Localhost?

[stephanbisser]

This is the URL which is used as the public domain name of where you host your application. So your tab will need to be deployed somewhere to an Azure Website or any other website hosting platform and you can set this URL if you know it already while scaffolding but you do not need to set it while scaffolding and testing locally. This will be necessary at the point when you will deploy your solution later on

[elthombre]

@stephanbisser - I do not have admin privileges for Azure within my organization. Consequently, advice that I can pass along to our admin to get this setup correctly would be helpful.

Similarly, if I do not provide a URL during scaffolding, where to look for it when I later need to change it?

[stephanbisser]

@elthombre you do not need to set the URL while developing your solution, therefore you can leave that blank. But later on you can set the URL in the .env file of your project -> PUBLIC_HOSTNAME

[elthombre]

when installing 'yo', I receive a notification:

"12 vulnerabilities (5 moderate, 7 high)"

should this be a concern? no details were provided. audit fix was run.

[elthombre]

I am attaching the list of questions I received as there is discrepancy.

[stephanbisser]

@elthombre sorry but the questions you raise are somewhat not necessary directly related to the Teams generator I'm afraid like the question on vulnerabilities for yo. What do you mean by discrepancy exactly?

[elthombre]

@stephanbisser - I am going through the specified link provided:

https://pnp.github.io/generator-teams/tutorials/build-your-first-microsoft-teams-app/

not all of the screenshots match. Another example of what can be confusing - see the section in the above where it says to replace the <Flex.Item> code. OK. Are you are that, presently, the generator creates 3 <Flex.Item> sections in the return statements? See the below:

            <Flex.Item>
                <Header content="This is your tab" />
            </Flex.Item>
            <Flex.Item>
                <div>
                    <div>
                        <Text content={entityId} />
                    </div>

                    <div>
                        <Button onClick={() => alert("It worked!")}>A sample button</Button>
                    </div>
                </div>
            </Flex.Item>
            <Flex.Item styles={{
                padding: ".8rem 0 .8rem .5rem"
            }}>
                <Text size="smaller" content="(C) Copyright EB Control" />
            </Flex.Item>
            

Which to replace or all? Obviously, it's only the middle one. Not a big deal but still confusing.

Once running in the CMD, how to exit out of it or must I start a new CMD session to run the gulp ngrok-serve? I closed the first and started a new one.

What about Visual Studio Code?

Logging into your tenant is also glossed over / not mentioned. Please see the attached.

[elthombre]

@stephanbisser

When I attempt to browse the ngrok URL that is created from:

https://pnp.github.io/generator-teams/tutorials/build-your-first-microsoft-teams-app/

I receive ERR_NGROK_6022

[elthombre]

@stephanbisser , I double-checked my localhost and IIS and ngrok through localhost & got them working. I restarted my gulp serve but now receive a different error:

Failed to complete tunnel connection The connection to https://0943-2603-7080-5400-f20-5e-ddb8-1133-6140.ngrok.io/ was successfully tunneled to your ngrok client, but the client failed to establish a connection to the local address localhost:3007.

Make sure that a web service is running on localhost:3007 and that it is a valid address.

The error encountered was: dial tcp [::1]:3007: connectex: No connection could be made because the target machine actively refused it.

However, when I go to the localhost:3007, Teams displays 'Hello World'

[elthombre]

@stephanbisser just did a refresh and it is back to the ERR_NGROK_6022

[elthombre]

I am receiving:

GET /favicon.ico 404

I added a folder called "ico" and placed a favicon.ico file in it under the inetpub -> wwwroot which successfully allowed the localhost to browse to it.

Meanwhile, I have noted such a file in multiple places under the scaffolding.

[wictorwilen]

@elthombre - thanks for reaching out to us with a bunch of questions. In order for us to be able to help you I really would like you to keep one problem at a time and per issue. Mixing a lot of different issues in the same thread, just as this, is not productive for anyone and it will just make it harder for us to help you.

Here's a few comments

ERR_NGROK_6022 - which is the original issue of this thread. A quick lookup on that error code on the ngrok website it shows that you need to install your authtoken. What does your .env file ngrok configuration look like? <-- this should be the only thing this thread should be about

Documentation issues - please add them as separate issues, so we can track them and resolve them

vulnerabilities shown at install - please add them as a separate issue, so we can track it and comment on why this is shown

mentions about IIS - please start a separate thread about this, so we can sort that out. There's nothing with yo teams that has to do with IIS, inetpub etc.

There might be more issues mentioned here, but I can't really follow that so please create separate threads

[elthombre]

@wictorwilen OK, I can add threads but please do keep in mind that this thread is really about that tutorial. If there are steps missing or the documentation images do not reflect the current installations, it should be updated.

[wictorwilen]

Thanks @elthombre

I read the initial post again. The only tutorial I could find associated to this project (generator-teams) was this https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab?pivots=node-java-script

This is a tutorial not owned by us, and you should report any feedback on that tutorial directly on that page. I notice you request that it does not specifically demonstrate how to install node.js or ngrok. It is linked to prerequisites in the tutorial where this requirement is spelled out. For ngrok and generator-teams you don't have to do anything, ngrok is being installed for you.

If that answers your original question then we could close this issue, right?

[elthombre]

@wictorwilen

In my first posting above, I provided a link to:

https://github.com/MicrosoftDocs/msteams-docs/issues/6855

wherein I specifically ask the below:

Looking a bit further, in the top-level folder, there is .env file with configuration settings:

NGROK configuration for development NGROK authentication token (leave empty for anonymous) NGROK_AUTH=

NGROK sub domain. ex "myapp" or (leave empty for random) NGROK_SUBDOMAIN=

NGROK region. (us, eu, au, ap - default is us) NGROK_REGION=

[wictorwilen]

Ok. And what is the question?

The .env file can be used if you want to customize the ngrok url using a paid subscription- not required. More details are in this tutorial: https://pnp.github.io/generator-teams/tutorials/build-a-tab-with-sso-support/#run-the-application-using-ngrok-serve

[elthombre]

@wictorwilen you brought up the .env file.

As for installing the ngrok authtoken, I went through this with ngrok support like a month or better ago and it was already installed:

ngrok config add-authtoken

ngrok runs fine and the URL it provides when it fires up displays. My localhost runs fine and displays as expected.

When I try to browse to the URL which is offered up through the tutorial, it fails.

And when we try to load the sample app in Teams, it fails.

[wictorwilen]

Ok. So you have manually installed and configured ngrok. That is a different story! How are you running the application locally?

[elthombre]

@wictorwilen I do not get your last post. I simply followed the instructions in the tutorial. It requires "prerequisites".

I am running the application (I assume you mean the sample 'Hello-World' application) from the command line. At least that is the case with this solution because the tutorial runs it from the command line.

In my original post with the other Microsoft sample app, we used Visual Studio Code. Both produced the same results.

[wictorwilen]

What exact command line are you using?

[elthombre]

@wictorwilen developer command line prompt for both.

With ngrok: ngrok http 80 with sample: gulp ngrok -serve

[wictorwilen]

That's your issue. The 'gulp ngrok-serve' automatically spins up ngrok (based on confit in .env). Since you're manually running ngrok you should use 'gulp serve' only

[elthombre]

@wictorwilen OK. So I hit Ctrl + C to quit out of both. I then restarted the sample app with 'gulp ngrok-serve'. I still receive the 404 error in relation to the /favicon.ico file on the command line and I still receive the ERR_NGROK_6022 error in the browser in association with the URL the app spins up.

[wictorwilen]

• favicon has nothing to do with this - there's just no favicon...
• you likely have som global ngrok configuration (ngrok.yaml) somewhere that messes this up

[elthombre]

@wictorwilen

There is an ngrok.yml file here:

C:\Users[username]\AppData\Local\ngrok

should I uninstall ngrok?

And assuming the above folder is removed or rendered uninvolved, where does the authtoken get installed?

[wictorwilen]

I honestly don't know - I don't think this scenario has been tested. But yes, I would remove the local ngrok and give it a shot. If you need an authtoken, please refer to the documentation I shared above.

[elthombre]

@wictorwilen OK, thanks - will give it a shot. And thanks for getting back to me on a Saturday ;-)