Cross-Device Testing Made Easy With Ngrok

Speaking from experience, web developers tend to spend a large portion of their time testing out their latest apps or websites across a plethora of different web browsers, tablets and smartphones. This thorough trialling is to not only ensure that the product looks great across all platforms and devices, but that it also feels great, and that all end-users receive a robust and responsive experience – from a desktop user on ie8, all the way up to the user’s with the latest tech releases.

The Problem

Although there are numerous emulators out there to help with cross-device and cross-browser testing, where possible it is always recommended that you test on the actual device itself as this is the only way to test with complete accuracy. The biggest hurdle with this, however, is time.

For each new change developers make, there is the development process to follow: pushing up the code to the repository, deploying the code to the development server and then testing the site on the device, only for you to find either the problem remains, or, it has been fixed but another two issues have arisen. So we repeat the process. Develop, push, deploy, test. Repeat. Develop, push, deploy, test. Repeat. And on… and on. This can become a very cumbersome task, and for all the time you might have saved using the latest cutting edge framework during development, this time is quickly eaten up during testing and you find your deadline drawing closer.

The Solution

Using Ngrok

Ngrok is simple to install, with set up taking just a few seconds. Simply download the archive file from the Ngrok website here, extract, and then move the executable to any folder in your $PATH to allow you to access it from anywhere on the command line. Alternatively, just run the executable to launch Ngrok’s own console window.

From there, exposing your local web server is simple. If your website/app is running on localhost on port 3333, just run the following command:

ngrok http 3333

Ngrok will then start listening on port 3333, providing you with two publicly accessible URLs from which you can now access your local web server via the secure tunnel. These URL’s are unique to each instance instance of Ngrok and so are useful for one-time only testing sessions or external access.

Alternatively, if the site you want to expose has a custom hostname, you can set up a tunnel using host:port in the command:

ngrok http speedydevelopment.dev:3333

No longer do you have to develop, push, deploy and test each time. Make your changes, pick up the device next to you, and there you have your local web server via Ngrok’s public URL, no strings attached. Simple.

But what if I don’t want my local server to be publicly available?

It might be the case that for whatever reason you don’t want to open up your local server for the world to see. Luckily for us developers, Ngrok comes built in with http auth to allow us to protect our tunnels and those we share it with. When setting up your tunnel run the following command:

ngrok http -auth “user:password” 3333

Other useful Ngrok features to aid development

As well as setting up secure tunnels, Ngrok also comes with an informative UI where you can monitor http requests made via your tunnels. This provides extremely useful information of the requests such as time, duration, headers, and query parameters which can help when testing website load times across different devices. There is also the option to replay previous requests should you wish to.

To access the Ngrok UI just visit http://localhost:4040 in a browser window.

Other useful features include:

Request body validation – XML/JSON request or response data is pretty-printed and checked for syntax errors when viewed in the Ngrok UI

Custom ngrok.io sub-domains for public URL – available on a paid plan, ie. speedydevelopment.ngrok.io. Useful if sharing with a client or 3rd party

Run ngrok tunnels over privately owned domains – if you’re not happy with ngrok’s auto-generated URL’s you can tunnel via your privately owned domain, dev.speedydevelopment.co.uk

TLS tunnels – provides the option to encrypt tunnelled traffic with your own TLS key and certificate

TCP tunnels – allows you to expose any service hosted over TCP such as database, game servers etc.

For further information, view the official Ngrok documentation here.

Summary

To summarise, Ngrok is a free-to-use, secure tunneling solution that can aid developers when cross-device testing their latest app or website. It allows a user to expose their local web server to the internet via a publicly available URL, reducing the need for continuous code deployment during the testing phase. Ngrok setup is simple, up and running within a few seconds via a command line. It also comes with a UI packed full of features, these include web traffic inspection, request replay capabilities, speed analysis tools, and request body validation.

We hope you have found this article useful and that Ngrok can be added to your development tool arsenal and further improve your development life cycle.

How do you manage your cross-device testing? Let our developers know over Twitter @FastWebMedia

We hope you enjoyed that

Related Articles