A staple of a well-organized web project is a stable, well-configured local environment. A risk-free code sandbox allows developers to build and destroy as they see fit, testing new code and methods without interfering with an environment that others are using. Third & Grove has a number of cool local tools at our disposal, like automated bash scripts to pull database changes from dev environments and drush command line tools for more control over Drupal.
The TAG team is lucky enough to develop on powerful machines like MacBook Pros and Windows Ultrabooks, but sometimes a web layout needs to be viewed on a different device to ensure total compatibility across the board. Browserstack offers a great web-based solution, but leaves a bit to be desired in its speed. Mobile emulators offer great native performance, but the lack of real touch input makes them less real-world than an actual mobile device. So what do you do when you need to test a change you’ve made on your local on a different physical device?
Recently, I have been solving this problem using a tool called Finch. Finch is a command line tool that can forward any locally-hosted environment to a temporary live URL on the web. This allows any connected device that has the URL and the proper credentials to pull up the environment. As a front end developer, this has been a boon for me to test on physical devices and get a sense of the real experience users of these platforms have. By navigating through a site on a phone using touch, I can get a better feel for potential usability hangups than if I were navigating with my mouse on Browserstack or an emulator. The same applies for browsers on different OSes, where debugging on Browserstack can be quite slow and tedious.
One well-founded concern some devs have with this system is security. How do you prevent just anyone from accessing your localhost while it’s forwarded? Luckily, Finch has some failsafes in place. The first is simply the fact that environments are rarely forwarded for more than a few minutes. When I need to check something on my physical device, I forward the local, run through my tests, then close the connection. This rarely takes more than 15 minutes.
The second failsafe is a clever URL algorithm that Finch uses. When you forward your localhost, Finch assigns it a random URL. It builds this two-word URL from a dictionary of random words, combining two of them to create a unique URL. Sometimes this nets you with funny names like “petulant-treefrog” or “pondering-kangaroo”, but by randomizing the names, you virtually eliminate the possibility that someone with malicious intent could happen upon your local environment during the short time that it’s forwarded. Finch also allows full password protection with its premium account for an added layer of security.
While some more complex local environments will not work, I’ve found that for most cases, Finch really improves my workflow when developing locally to ensure total compatibility with every device. It’s great to view a mobile change on a physical device and debug natively instead of trying to deal with mouse lag and other issues on Browserstack. This ultimately leads to more responsive, performant front ends across the board.