Expose a Local Web Server to the Internet

Posted on Posted in Topics, Web

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:

ngrok-demo-project-structure
Project structure

The content of the index.html file:

Run the project in the context of an HTTP server:

ngrok-demo-http-server
Start HTTP server

While the server is running, start ngrok in a different terminal window:

ngrok-demo-ngrok-command
Ngrok command

Now you can access your local project everywhere on the internet:

ngrok-demo-forwarding
Forwarding localhost + port

Here is the result running on my mobile device on mobile data:

ngrok-demo-result
Result running on mobile

 

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:

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.

Spread the knowledge

Leave a Reply

Your email address will not be published. Required fields are marked *