Basically, ngrok allows you to take any project live without actually deploying it.
It is a simple concept and maybe that is not the best explanation, but here is what they say on their site.
What is ngrok?
“ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.”
How it works
“You download and run a program on your machine and provide it the port of a network service, usually a web server.
It connects to the ngrok cloud service which accepts traffic on a public address and relays that traffic through to the ngrok process running on your machine and then on to the local address you specified.”
I have been working part-time for an early stages startup in my first developer job. We are currently closing in on an MVP. I was on a call with our CTO last week and he introduced me to ngrok. I had never heard of it, but even using it minimally for the last week I can see SO many use cases for it.
I am sure there are other services just like it and maybe ones that you prefer over ngrok. I would love to hear about them if you want to leave a comment ☺.
For those of you who are unaware of what ngrok is and why you would need it, I will leave you a few use cases and do my best to give you a quick-start tutorial.
I would highly encourage you to go check out their site and play around with it a little bit here. Getting started is super straight forward using the command line tool, but I did run into one small issue when getting the server going which I will try to show below.
Use Cases
- Demoing web sites without deploying
- Building webhook consumers on your dev machine
- Testing mobile apps connected to your locally running backend
- Stable addresses for your connected devices that are deployed in the field
- Running personal cloud services from your home
- Easily check responsive design on your mobile device
- [insert yours here]
Notable Features
- Inspecting traffic on your site
- Replaying site requests
Once you have ngrok installed and set up (to do this: create your account and immediately follow CLI instructions), here is a quick video rundown of how to get it going.
Excuse how choppy I am… it’s only my second tutorial video ever!!! But, I really felt that this was one of those things that can be better understood by actually getting to see it work. Hopefully, this gives you guys a good idea of how to get up and started with ngrok.
Enjoy!
I would love to hear any feedback you guys have on my video and blog! I know my terminal may have been a bit small and difficult to see. So, here is the command I used to get around the host header bug. Also, notice I am in the “~” directory.
./ngrok http 3000 -host-header="localhost:3000"
Conclusion
While I am just getting started with this tool, I can already see so many uses for it. I wanted to put this blog out there because ngrok was something I was completely unaware of. Even if it helps to make one person’s life a liiiiittle bit easier I have done my job. Thank you ☺
Top comments (1)
Great writeup! ngrok and the likes are really powerful tools any webdev should have in their belt.
I was recently introduced to serveo.net, a free alternative, that I think is better than ngrok because:
ssh -R 80:localhost:3000 serveo.net(replace 3000 with whatever port you want to "open")I'm not an export in network security, so ngrok might be a more secure choice, i don't know.