Tips for fast demoing with Ngrok
As a developer, I’ve found myself wanting to get some feedback about a web app, by letting others to test the work in progress being made. If the people you want to show your app to is not present (physically nor in the same local network), sharing a link to your local development server is not a trivial task and in a lot of cases It feels like overwork to deploy the web app to a server just to answer a specific doubt.
An easy alternative to solve this is offered by Ngrok.
Ngrok is a free CLI tool that let us make tunnels to localhost, allowing us to expose a local server behind a NAT or firewall to the internet.
With just 1 shell command, this tool returns a URL (accessible anywhere in Internet) that is mapped to a specific port in your own computer.
Ngrok offers a diverse menu of options and tweaks (some are free and some are paid) such as secure HTTPS and TLS tunnels and a web inspector to watch the HTTP traffic running over the tunnel (free). It doesn’t only let you expose HTTP services, being very handy in cases where you need to expose the access to ssh, a database or any other TCP application.
The instructions to download and install Ngrok can be followed here.
Once that’s done, just type the following command in a shell:
$ ngrok http 9000 ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Version 2.1.18 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://edecaf1b.ngrok.io -> localhost:9000 Forwarding https://edecaf1b.ngrok.io -> localhost:9000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00
Now you can access through
http://edecaf1b.ngrok.io to whatever is running in the 9000 port of your computer.
For example, to easily expose a build of a web app
cd the folder where the build lives and create a Python server with
python3 -m http.server 9000. As you created a tunnel to that specific port, you will be now able to access from the internet to the web app served from your computer.
Of course, you can look at Ngrok docs for other uses of this easy, awesome and powerful tool I deeply recommend.
See related posts
Applying SOLID Principles in Our Lives as React Developers
The SOLID principles are specifically applied in software development, and in this blog post we talk about using them with React.
Communicate with Data Correctly
Find out how data visualization has evolved over the years and what you can do with it in order to display and visualize data in the best possible way.