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

[elthombre]

Description

Hi, technically, this a duplicate of the following:

MicrosoftDocs/msteams-docs#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:

MicrosoftDocs/msteams-docs#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:

MicrosoftDocs/msteams-docs#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:

MicrosoftDocs/msteams-docs#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

[wictorwilen]

What does the console output of the terminal look like (where you run the gulp commands)?

[elthombre]

I get a couple of warnings regarding asset size limits in the Terminal output in Visual Studio Code but I am not seeing any failures

but, as previously stated, if I try to browse the ngrok URL that is created, I get a ERR_NGROK_6022

[wictorwilen]

but, as previously stated, if I try to browse the ngrok URL that is created, I get a ERR_NGROK_6022

Then we're back on square one. There's presumably something wrong with your terminal and you have some ngrok settings somewhere or you have misconfigured the .env file.

[elthombre]

ngrok was not setup on this machine and I've not touched the .env file.

[elthombre]

This would also imply that there's "something wrong with [the] terminal" across multiple machines and multiple OS's. I get the same results on both my Win10 and Win11 machines.

[elthombre]

I did get a Microsoft sample working but there were some surprises related to certs:

MicrosoftDocs/msteams-docs#7412 (comment)

[elthombre]

I should add that on my Win11 machine, the Generator samples takes much longer until it fails.

I also see a /favicon.ico 404 error in Terminal window output in VS Code.

[elthombre]

similar errors as Win10 machine:

Error while parsing the 'sandbox' attribute: '{{::ctrl.getSandboxAttributes()}}' is an invalid sandbox flag.

Unrecognized feature: '{{(ctrl.frame'.

Error while parsing the 'sandbox' attribute: '{{::ctrl.getSandboxAttributes()}}' is an invalid sandbox flag.

Failed to load resource: the server responded with a status of 404 (Not Found)

with the 404 coming on the config.html associated with the ngrok URL.

[elthombre]

Also on my Win11 machine... when creating the sample, I received:

error detecting the package manager. Falling back to npm.

It still built it fine and installed the packages but I figured it's worth mentioning.

[wictorwilen]

• Can you post a screenshot of your console terminal window
• Can you open a web browser and browse to the ngrok URL being automatically assigned
• If you're using gulp ngrok-serve without any ngrok config, do you upload the updated manifest to Teams everytime (since the URL changes everytime you restart the gulp command)
• error detecting the package manager. Falling back to npm. - is a standard message from yo. Just ignore it
• Error while parsing the 'sandbox' attribute: '{{::ctrl.getSandboxAttributes()}}' is an invalid sandbox flag. is just normal crap logged by Teams - ignore it
• the Generator samples takes much longer until it fails. - explain what fails

[elthombre]

• screenshot attached

• as previously mentioned, when I try to browse to the ngrok URL, I receive the ERR_NGROK_6022 (screenshot attached of that, too)

• regarding ngrok config and uploading the manifest, you had previously mentioned that you thought a global installation of ngrok was interfering. However, on both machines, the results were the same regardless of ngrok installation. I had since removed the general installation from the machine I ran this on for these screenshots.

• I followed the instructions as the documentation in the sample requested. It fails on the upload and while it shows up in the list of 'General' tab, when I try to add it as a tab, it says it can't be found. If it needs to be uploaded new every time, how does this work if the URL is generated dynamically but this URL would need to be added to the .env file and then built prior to running?

• longer to fail => longer until I receive "There was a problem reaching this app" error

[wictorwilen]

Can you post the output from the terminal?

[wictorwilen]

@elthombre - what is that? Do you really see that in your terminal window?

[elthombre]

@wictorwilen - the previous post was the output from the console in the browser. I assume, then, you mean the output from within VS Code?

[elthombre]

gulp serve
[23:30:43] Found additional Yo Teams plugin: yoteams-deploy
[23:30:43] Using gulpfile C:\00-Vengar\generator-teams\Hello-World\gulpfile.js
[23:30:43] Starting 'serve'...
[23:30:43] Starting 'nuke'...
[23:30:43] Finished 'nuke' after 46 ms
[23:30:43] Starting 'manifest'...
[23:30:43] Starting 'validate-manifest'...
[23:30:43] Starting 'generateManifests'...
[23:30:43] Finished 'generateManifests' after 34 ms
[23:30:43] Starting 'validateSchemas'...
[23:30:43] manifest.json is using manifest schema m365DevPreview
[23:30:43] Finished 'validateSchemas' after 360 ms
[23:30:43] Finished 'validate-manifest' after 396 ms
[23:30:43] Starting 'zipTask'...
[23:30:43] Creating package helloworld.zip
[23:30:43] Finished 'zipTask' after 42 ms
[23:30:43] Finished 'manifest' after 441 ms
[23:30:43] Starting 'build'...
[23:30:43] Starting 'webpack'...
[23:30:43] Starting 'webpack:client'...
[23:30:43] Starting 'webpack:server'...
[23:30:53] Finished 'webpack:server' after 10 s
[23:31:07] asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
client.js (637 KiB)
[23:31:07] entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
client (637 KiB)
client.js

[23:31:07] webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
[23:31:07] Finished 'webpack:client' after 24 s
[23:31:07] Finished 'webpack' after 24 s
[23:31:07] Starting 'styles'...
[23:31:07] Finished 'styles' after 143 ms
[23:31:07] Starting 'static:copy'...
[23:31:07] Finished 'static:copy' after 19 ms
[23:31:07] Starting 'static:inject'...
[23:31:07] gulp-inject 1 file into index.html.
[23:31:07] gulp-inject 1 file into privacy.html.
[23:31:07] gulp-inject 1 file into tou.html.
[23:31:07] gulp-inject 2 files into helloWorldTab\config.html.
[23:31:07] gulp-inject 2 files into helloWorldTab\index.html.
[23:31:07] gulp-inject 2 files into helloWorldTab\remove.html.
[23:31:07] Finished 'static:inject' after 43 ms
[23:31:07] Finished 'build' after 24 s
[23:31:07] Starting 'nodemon'...
[23:31:08] Finished 'nodemon' after 42 ms
[23:31:08] Starting 'watch'...
[23:31:08] PUBLIC_HOSTNAME: helloworld.azurewebsites.net
[23:31:08] Watching .env
msteams Initializing Microsoft Teams Express hosted App... +0ms
msteams Adding CSP policy for /helloWorldTab/remove.html +0ms
msteams Adding CSP policy for /helloWorldTab/config.html +1ms
msteams Adding CSP policy for /helloWorldTab/index.html +0ms
msteams Server running on 3007 +19ms

[elthombre]

@wictorwilen I posted the VS Code output a few days ago

[wictorwilen]

Thanks

1. You're using gulp serve - which means that you have configured ngrok on your own (in a separate terminal)
2. This also means that the manifest for your Teams app will use the PUBLIC_HOSTNAME in the .env file (helloworld.azurewebsites.net according to the output). Is this really what you want/use?

[elthombre]

@wictorwilen @stephanbisser , it was recommended that I use the following tutorial:

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

it says to use gulp serve

I do not know what I really want to use... I'm just trying to get things up and running but encountering these issues...

[wictorwilen]

it says to use gulp serve

Yes, it says so, to verify that your app is running on localhost.

Continue reading the article and check the "Run your app in Microsoft Teams" section. That section should explain it all to you.

[elthombre]

@wictorwilen - If you are referencing the gulp ngrok-serve command later in the document, please see our earlier comments from Oct. 28 and let me know what you think.

[wictorwilen]

@elthombre - so, what's the terminal output when using that command?

[elthombre]

gulp ngrok-serve
[02:40:35] Found additional Yo Teams plugin: yoteams-deploy
[02:40:35] Using gulpfile C:\00-Vengar\generator-teams\Hello-World\gulpfile.js
[02:40:35] Starting 'ngrok-serve'...
[02:40:35] Starting 'start-ngrok'...
[02:40:35] [NGROK] starting ngrok...
[02:40:36] [NGROK] Url: https://28ca-2603-7080-5400-f20-e277-cead-ffa4-b73.ngrok.io
[02:40:36] [NGROK] You have been assigned a random ngrok URL that will only be available for this session. You will need to re-upload the Teams manifest next time you run this command.
[02:40:36] [NGROK] PUBLIC_HOSTNAME set to: 28ca-2603-7080-5400-f20-e277-cead-ffa4-b73.ngrok.io
[02:40:36] [NGROK] Inspect Url: http://127.0.0.1:4040
[02:40:36] Finished 'start-ngrok' after 656 ms
[02:40:36] Starting 'serve'...
[02:40:36] Starting 'nuke'...
[02:40:36] Finished 'nuke' after 28 ms
[02:40:36] Starting 'manifest'...
[02:40:36] Starting 'validate-manifest'...
[02:40:36] Starting 'generateManifests'...
[02:40:36] Finished 'generateManifests' after 41 ms
[02:40:36] Starting 'validateSchemas'...
[02:40:36] manifest.json is using manifest schema m365DevPreview
[02:40:36] Finished 'validateSchemas' after 415 ms
[02:40:36] Finished 'validate-manifest' after 459 ms
[02:40:36] Starting 'zipTask'...
[02:40:36] Creating package helloworld.zip
[02:40:36] Finished 'zipTask' after 36 ms
[02:40:36] Finished 'manifest' after 497 ms
[02:40:36] Starting 'build'...
[02:40:36] Starting 'webpack'...
[02:40:36] Starting 'webpack:client'...
[02:40:36] Starting 'webpack:server'...
[02:40:49] Finished 'webpack:server' after 13 s
[02:41:06] asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
client.js (637 KiB)
[02:41:06] entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
client (637 KiB)
client.js

[02:41:06] webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
[02:41:06] Finished 'webpack:client' after 29 s
[02:41:06] Finished 'webpack' after 29 s
[02:41:06] Starting 'styles'...
[02:41:06] Finished 'styles' after 245 ms
[02:41:06] Starting 'static:copy'...
[02:41:06] Finished 'static:copy' after 23 ms
[02:41:06] Starting 'static:inject'...
[02:41:06] gulp-inject 1 file into index.html.
[02:41:06] gulp-inject 1 file into privacy.html.
[02:41:06] gulp-inject 1 file into tou.html.
[02:41:06] gulp-inject 2 files into helloWorldTab\config.html.
[02:41:06] gulp-inject 2 files into helloWorldTab\index.html.
[02:41:06] gulp-inject 2 files into helloWorldTab\remove.html.
[02:41:06] Finished 'static:inject' after 146 ms
[02:41:06] Finished 'build' after 29 s
[02:41:06] Starting 'nodemon'...
[02:41:06] Finished 'nodemon' after 66 ms
[02:41:06] Starting 'watch'...
[02:41:06] PUBLIC_HOSTNAME: 28ca-2603-7080-5400-f20-e277-cead-ffa4-b73.ngrok.io
[02:41:06] Watching .env
msteams Initializing Microsoft Teams Express hosted App... +0ms
msteams Adding CSP policy for /helloWorldTab/remove.html +0ms
msteams Adding CSP policy for /helloWorldTab/config.html +3ms
msteams Adding CSP policy for /helloWorldTab/index.html +1ms
msteams Server running on 3007 +33ms

[wictorwilen]

@elthombre - looks good. What happens if you open up a web browser with the ngrok URL listed ([02:41:06] PUBLIC_HOSTNAME: 28ca-2603-7080-5400-f20-e277-cead-ffa4-b73.ngrok.io)?

[elthombre]

@wictorwilen should the https be left off https://28ca-2603-7080-5400-f20-e277-cead-ffa4-b73.ngrok.io

I used the full URL created and received the 6022

[wictorwilen]

@elthombre - thanks. So there's something funky going on with your ngrok. This all works fine for me, tested with the exact versions you mentioned initially. One main difference is that I get a shorter ngrok URL (https://a039ec766213.ngrok.io) compared to yours. Can you try these two commands and share output:

ngrok --version
./node_modules/.bin/ngrok --version

(Adapt for whatever shell you're using)

[elthombre]

@wictorwilen

with the first command, as ngrok is not installed globally per your recommendation, I receive nothing.

with the second command, I receive:

ngrok version 2.3.40

[wictorwilen]

@elthombre - thanks. I tried it on a new machine and seems like ngrok has changed so that you need to have an authtoken.

What if you sign up for a free ngrok.io account, and then use the following to configure your authtoken:

./node_modules/.bin/ngrok authtoken 1cYD7J3...XbpC54S

[elthombre]

@wictorwilen - some good news. I can now browse the ngrok URL in the browser and the app loads in Teams for the browser.

Thanks for the help!

Unfortunately, I still receive the same error when trying to load for Teams on the desktop. Any ideas?