At first, I was like wow!
I have wanted to do this like forever, but there were issues upon issues, so eventually I gave up in frustration.
Until one day I came across ngrok and its node package manager installation option.
The problem
Let say you develop a web application or a web site or even a virtual reality application on your local development environment, and now you want to expose your work, for whatever reason, to the internet.
Take for example a virtual reality application created with a framework like a-frame, how about creating your application locally and then testing it in real time on your mobile device together with a cardboard or daydream headset?
Well, you can do just that!
The solution
Enter ngrok, a wonderful service that enables secure tunnels to localhost.
It is a paid service and provides a whole bunch of useful features.
However, you can also use it for free to expose your work to the internet. There are of course some limitation, but even the free version is cool.
So how to work with it?
Let’s assume you have a local project, a very simple project consisting only of an index.html file. To run the project locally you need an HTTP server. For more information about how to install and run such a server, and also the reason behind using an HTTP server to run local files, see Setup a Simple HTTP Server with Node.js.
Let’s create a simple project containing just one HTML file:
The content of the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color: cadetblue; font-size: 3em">
Hello world!
</body>
</html>
Run the project in the context of an HTTP server:
While the server is running, start ngrok in a different terminal window:
Now you can access your local project everywhere on the internet:
Here is the result running on my mobile device on mobile data:
Lessons learned
To use ngrok you have to start your project in the context of an HTTP server, more about the reason requiring an HTTP server here.
You can install ngrok, also as an NPM package, which is my favorite approach:
npm install ngrok -g
More info about the ngrok NPM package here.
Web development is awesome! There are tons of great tools for every problem you might have, you just have to ask the right questions, put in some effort to find a solution and you will eventually find something that works for you, and do not forget to clearly define the question before you start asking questions.