Share localhost in seconds with Finch

As we hyper-speed our way through the digital age we designers and developers find ourselves increasingly surrounded by new tools, new technologies and new methodologies, causing us to forever rearrange our design and development process.

One of the things that made a huge curve-ball in my development process this year was the ability to rapidly generate custom URLs accessible worldwide. These URLs allow my team or my client to view my local website development project in progress — updated instantly and automatically. Thanks, Finch.

Somewhere recently on the world-wide web I read that “Gear is the biggest form of procrastination”. This is something that’s stuck with me, as I commonly find myself spending hours week after week testing new things that I expect would somehow speed up my workflow.

In most cases it’s time not very well spent, so I find myself wishing I hadn’t wasted my time and enthusiasm on yet another somewhat useless tool — for me at least.

“Gear is the biggest form of procrastination”…

Like anybody I use my applications dock on my Mac for my favourite and most commonly used tools. As a designer and front-end developer, my dock currently consists of…

Chrome, Firefox, Sketch, Sublime Text, MAMP, CodeKit, Finch, Transmit, Terminal, Slack, Spotify… and a few folder shortcuts.

Although this changes every few weeks or so — depending on how much procrastinating I do — you may notice there’s an order here. My tools identify the primary tools I personally use in a typical project in it’s entirety, from wire-framing, UX and prototyping, design, development through to publishing a site with all the other crucial bits in-between, like Terminal for Git, MAMP for creating PHP environments, Slack for team communication etc. And of course Spotify ????.

One of those nifty little tools sat on my dock that you’ve not heard of until now, is Finch (Go to meetfinch.com). Finch is a sleek app that I was fortunate enough to be introduced to by the founder himself. In brief Finch allows you to share multiple websites that you’re working on locally with the rest of the world, your team, your clients or your boss. These snazzy app generates live URLs that update automatically every time you hit save… ⌘+S!

At first I shrugged it off. I didn’t see how Finch was going to benefit me as I was perfectly happy uploading all my files to a server, using Aerobatic (add-on for Bitbucket) or having my Git repo sync with a server depending on the size and scalability of a project. I would show my clients on a URL either way, but damn. Every time I wanted to change a tiny detail I’d either have to manually upload all my files, wait for my FTP, or do another git push command in Terminal. This was a counter-intuitive way of doing things.

So while I was working on one of the biggest projects I’ve done in a long time — I thought I’d try out Finch. And hell, was I impressed!

A bit about my development environment

The project I was working on at the time was a small but complex site sat on-top of WordPress which required some hefty PHP, Sass/CSS and Javascript a long with a huge database for all the content, images and custom data. All of this was running through my localhost environment, thanks to MAMP Pro. This also included a local database running in phpMyAdmin.

Once I create this environment for every project, I then plug CodeKit in for Sass processing, CSS and Javascript minifying and live browser refreshing. CodeKit is a great alternative to Gulp or Grunt with a nice GUI). This leaves me with a pretty solid development environment for the type of sites I commonly work on. These generally require a CMS, like WordPress, Perch, Shopify or similar ones like Craft, Pulse, Siteleaf (the list goes on) etc...

I would not recommend having an environment like mine for anything larger such as Magento or Drupal powered sites, but I’m sure if you’re already tackling these then you have your own set-up. Finch is adaptable, so don’t fret.

Where does Finch come in?

Once I’m ready to show my client (or whoever else) my progress, I would upload all my files and the database to a server through old-fashioned or long-winded methods like FTP or set-up Git to automate an upload every time I git push (which I need a back-end developer to help set-up in the first place). While using Git is great for managing what my client sees, I want something more automated that doesn’t require any terminal commands or any effort on my behalf so I can focus on getting more done. Welcome, Finch.

Above is a screenshot of the tiny application once you’ve created an account and logged in. On this you’ll see all the project I’m working on — here are two demos for purposes of this article.

Using the circular icons on the left side of each site I can quickly enable access to a Finch URL, or otherwise disable access. Green is active, grey is inactive and yellow is an error (or red? I never have errors so I don’t really know…). These unique SSL encrypted URLs are generated by Finch using either randomly generated words or allow customisation with a Pro plan, giving you the ability to use a custom URL like custom-url.usefinch.eu or your very own domain — if you’re more organised.

With one click (on an existing site in the list or by clicking “New site”), you get additional options like replace local site links, restrict path access (useful if your project folder is sat inside a parent folder) or with a Pro account you can set authentication for restricting access to a URL with a password.

Don’t let me scare you off when I say “Pro Plan” as there is a free tier.

While it’s appearance seems very limited in functionality, Finch boasts some other useful features like geo-located server clusters meaning wherever you are in the world you’ll get the fastest service — with clusters in the US, Europe and Singapore. It provides in-depth live statistics about who’s viewing the URL, has WebSocket support, and with seamless automation it integrates harmoniously with your build platform so it shares your latest saved copy instantaneously.

Everything is as it should be

Sharing a local site with the world so easily sounds ridiculous and that’s why I praise Finch for doing such a good job. Viewing a site through Finch is just like viewing it on a live server, in-fact your client won’t be able to tell the difference. Everything including the database, is there. Easy.

Great for device testing

Since using Finch I’ve found sharing my local development with clients much easier on desktops, tablets and mobile devices. One awesome feature that CodeKit offers is the ability to share the local development through LAN so anybody on any device on the same network can view my development quickly, but it does have a few bugs. So if I don’t want to use CodeKit, Finch offers the perfect solution for mobile testing — and it doesn’t restrict me to local WiFi.

Built in support for WordPress or static content

For me Finch has worked perfectly with any CMS I’ve thrown at it, but it really works it’s magic on WordPress sites with built in support right out of the box. No having to go into WordPress settings and change the site URL because Finch does it for you!

Thanks for reading!