Introduction
While developing the apps for teams, ngrok comes in handy. Teams app doesn’t run inside the teams, but rather runs outside of it. Let’s try to understand what is ngrok. It provides a tunneling service for the incoming requests from the internet (for example, requests from bot service, graph change notifications, etc) to your local server so that you can test the apps locally.
As a pre-requisite, you need to have VS code installed on your machine. The steps are targeted to Win 10 OS with VS code installed. You can check the references section to install VS Code and setting up ngrok If not done.
Developing Teams Tab, and configuration page
In this scenario, there is no tunneling required. all these requests are outgoing requests. In the case of tabs, configuration page development only, a local loopback connection is needed.
Developing webhooks, message extensions, bots
If there is a team’s app for bot channel conversation or post conversation, we need to have responses coming from the Bot services to your team’s app to test locally. Usually, the incoming requests from internet services are blocked by a network firewall. At this point, it is hard to test services locally and see how it works before rolling it over to real users. This is where ngrok service becoming handy. In the below diagram we could see how the ngrok allows the incoming requests from the BOT service to your local server.
To demo this let’s open VS code and then create a simple web application with a hello world file. Let’s serve the web application using a local web server using an HTTP server in the node and then test the responses from this application.
Steps
Step 1
Go to command prompt and create a Directory called ‘ngrokdemo’ and then open it in visual studio code by inputting the below command,
code .
Step 2
It should open a VS code. here create a new file called ‘index.html’ by clicking on the new file button as shown in the below screen capture.
You should see the resulting structure like below,
Step 3
Now in the index.html just have the following simple HTML code. It basically displays ‘Hello World” on the resulting page.
<html>
<body>
Hello, World
</body>
</html>
MarkupCopy
You should see the overall code like below,
Step 4
It’s time to use the ngrok service. Now let us serve this simple application using an HTTP server in node. In the command terminal in VS code run the following command to serve the application,
npx http-server
it might take a couple of minutes and you should see some messages like below. It displays the IP address where you can access it from your browser.
Step 5
Step 6
Now let’s open this application to the internet by entering the below command in a command prompt window.
ngrok http 8080
It should display the below message, where it says it is forwarding the requests from the HTTP and HTTPS URLs to your localhost.
Step 7
Now let’s grab the HTTPS URL and try opening in a new tab and see what happens. It opens up the same ‘Hello World’ application and also it displays the trace of the request in the cmd prompt where you are running ngrok.
Even I can open it on my mobile. This is a huge advantage for testing mobile applications.
Step 8
Now let’s try using Web Interface URL. This URL display all the trace in ngrok web, which comes real handy in debugging.
Since I am using the free version of ngrok, my trace is active for the next one hr and after that, it gets cleaned up.
Points To Note
- You may get a question, we could test using the Bot Framework emulator locally, but it will not support some of the features like Messaging Extension, Webhook, and User Authentication.
- We still need ngrok. Also, most of the modern corporate network implemented zero trusts won’t allow ngrok URLs and you need to test the team’s applications outside your corporate perimeter network.
Conclusion
In a nutshell, we have developed a simple hello world web application and served on the local node and exposed to the internet using ngrok and tested the traces using ngrok response and web interface UI which are useful in Teams Application development.
References
- https://code.visualstudio.com/docs/setup/windows
- https://www.c-sharpcorner.com/article/installing-ngrok/
- https://www.youtube.com/watch?v=A5U-3o-mHD0
- https://www.twilio.com/docs/usage/tutorials/how-use-ngrok-windows-and-visual-studio-test-webhooks
- https://superuser.com/questions/284342/what-are-path-and-other-environment-variables-and-how-can-i-set-or-use-them
- ngrok – secure introspectable tunnels to localhost
This blog post is part of Microsoft Teams Week. Find more great blogs here.
Reference:
Ayinapurapu, A. (2021). Teams Application Testing With Ngrok. Availabe at: https://www.c-sharpcorner.com/article/teams-application-testing-with-ngrok/ [Accessed: 1st December 2021].
