ngrok – Demo your localhost

Sometimes you might have to work on an application or API in your local box and wants to demo to your friend or colleague.

And you might be looking for some hosting service or you do a video call to your friend and show.

I feel those are the fancy or expensive solutions.

Most of the time your application will present behind the Firewalls or some other network restrictions.

Why ngrok?

In that case, what’s the best solution to access/share your local resource to an external or internet world.

A most feasible solution is Tunneling

In this blog, we are going to discuss the tool which provides a better tunneling option.

ngrok

How I came across ngrok?

I was creating apps for Slack and Microsoft Teams. Most of the times I need to develop the API or WebServices from my end.

The UI will be the SDKs or Actual Slack App or Microsoft Teams App.

When the user does particular action in the legacy application, I need to capture that and debug and then prepare my data set based on that.

Its complete black box, right?

Yes – it is.

ngrok is recommended in Slack and Microsoft Bot Framework developer documentation.

ngrok can be used for any purpose other than just API or Web Service.

Tunnelling is the concept here.

Angular UI apps

Sometimes, I do develop some simple angular application and share with my friends for their quick suggestions.

During the development time, I don’t have to set up a hosting environment or anything. I simply use ngrok tool and create dynamic tunnels and share it with friends.

The good thing is the URL is dynamic and I don’t have to worry about the URL can be leaked to some other person. Once I stopped the tunnel, everything from my local box gets disconnected from the Internet world.

How to use ngrok?

Download

Download ngrok based on your machine requirement and installation.

Unzip to install

On Linux or OSX you can unzip ngrok from a terminal with the following command. On Windows, just double click ngrok.zip.

unzip /path/to/ngrok.zip

Most people like to keep ngrok in their primary user folder or set an alias for easy command-line access.

Connect your account

Running this command will add your authtoken to your ngrok.yml file. Connecting an account will list your open tunnels in the dashboard, give you longer tunnel timeouts, and more. Visit the dashboard to get your auth token.

./ngrok authtoken <YOUR_AUTH_TOKEN>

Start using!

Try it out by running it from the command line:

./ngrok help

To start a HTTP tunnel on port 80, run this next:

./ngrok http 80

Read the documentation to get more ideas on how to use ngrok.

You can check out the official documentation for more advanced commands like Rewriting the Host header, Password protecting your tunnel, Custom subdomain names, etc.

Quick demo

  • Started my angular application in my local box – it’s running on the path localhost:4200
  • Opening ngrok and Checking whether it’s accessible by running command ngrok help
  • Tunneling the localhost 4200 with the command (proper host header) ngrok http 4200 -host-header="localhost:4200"

Now my localhost application can be accessed using the above URLs.

  • Browsing tunneled application
  • The same will capture the last 10 API calls or HTTP transaction happened in the tunnel
  • ngrok also provides a detailed window to inspect all the HTTP introspection which can be accessed in the path http://localhost:4040/

Pro-Tip

When you are working with any integration related Apps or Environment like Azure, Microsoft Bot Framework, Skype Apps, Slack Bots – this tool will be very handy at the development.

Bookmark this post – and give a try.

Reference

https://ngrok.com/download

https://ngrok.com/docs

https://api.slack.com/tutorials/tunneling-with-ngrok

100 Web Project Ideas

Whenever I start learning a new Language or Framework, I used to create small apps or programs to practice.

Always, I try to build ToDo app if I learn Web Framework or random number generator if it a programming language and guess the number game.

I wish to build a list of items to help beginners to practice when they are learning something new.

So here is my contribution.

I have created a GitHub repo to list 100 Web Project Ideas

https://github.com/PandiyanCool/100-project-ideas

I wish you should help me to reach this list to more people who actually in need.

Feel free to star or fork or send PR to the repository.

And if you are using Twitter, send me hi to motivate me. I love it.

Here is a twitter thread I have created to reach more Devs.

That’s for now.

Hey @pandiyan_cool I just checked out your #100WebProjects list.

If you are reading or trying this, do let me know. I will be very happy.

Cheers, Happy Coding!

Topics

  1. Quote generator
  2. Todo app
  3. Countdown timer
  4. Stopwatch
  5. Flip a coin app
  6. World clock dashboard
  7. Good morning slack bot
  8. Daily Journal bot
  9. Mail composer UI
  10. Interactive login form
  11. Offline page in PWA
  12. Toaster message
  13. Color picker jumbtron
  14. RSS Feed viewer
  15. Json viewer
  16. Syntax highlight
  17. Json to csv
  18. Simple calculator UI
  19. Free image library
  20. Messaging to webhook
  21. Leave reason generator
  22. Visual web bookmarker
  23. Pomodoro timer
  24. Css ruler
  25. Instagram logo in css
  26. BAFFLE effect in css
  27. Motivation bot
  28. Twitter hash tag viewer
  29. Minimalist twitter profile page
  30. Minimalist github profile page
  31. Site map into flex layout
  32. Twitter bot to fav your replies
  33. Twitter bot to welcome new followers
  34. Twitter bot to send weekly report
  35. Gif search engine
  36. Good first issue hunter
  37. One download page for your fav exe
  38. Virtual site map for fav sites
  39. PWA – funny sounds directory
  40. PWA – Scolding app if late sleep
  41. PWA – Stress burster – tap me 20 times in 3 seconds
  42. PWA – Internet connection game
  43. Quotes instead of loader
  44. Comments thread UI
  45. API document with swagger json
  46. Terminal effect in css
  47. CLI for daily activities
  48. Npm library to do text operation
  49. Quiz minimalist UI
  50. Yes or No fact checking UI
  51. Render Google map for location
  52. Selfie app with frames
  53. Flames game
  54. Guess the number game
  55. Sound match game
  56. Snake game
  57. Flight time check app
  58. Weather app
  59. Time sheet app
  60. Fan simulator
  61. Css loader
  62. Minimalist resume
  63. Virtual Visiting card
  64. Custom Birthday cards
  65. Work log app (punch machine)
  66. Catch me bug game
  67. Guess the card game
  68. Clipboard history
  69. Smiley UI mock
  70. Instagram story mock
  71. Tinder suggestion mock
  72. Fake api
  73. Pinterest view for github project
  74. CheatSheet generator
  75. Social media activities dashboard
  76. Birthday reminder
  77. Reminder app if you are leaving late at work
  78. Recipe tracker
  79. Sarcasm meter
  80. Why not analog calendar?
  81. Movie rating at one place
  82. Bookshelf
  83. Energy drainer visualisation
  84. YAGNI checklist
  85. Tweet scheduler mock
  86. Image crop tool
  87. Windows blue screen error page
  88. Never seen 404 page
  89. Sarcastic 401 page
  90. Play music when page offline
  91. Render tweet into gif
  92. CSS blob maker
  93. Cute animals video search results
  94. Mock duckduckgo results page
  95. 1000 pixels custom image
  96. Swappable 5×5 grids
  97. Moments celebration timer
  98. Youtube subscribers count mock
  99. Subscribe and bell icon gif
  100. A Perfect portfolio ✌️