Accessing your development server on a mobile device

A common setup in a web development team is to have a shared local development box, which is usually located on a private local area network. Whilst this setup has previously worked well, with the shift of consumer activity to mobile devices well underway, a big problem with this workflow has surfaced itself: how do we develop/test on mobile devices?

If your development server is accessible through WiFi, then this shouldn’t be an issue. You’ll be able to access the server through a local IP address, or alternatively create a network DNS entry if your web app relies on a hostname to work.

If you’re in the unfortunate position that this isn’t possible, then there is an alternative. Using a tunnel service like localtunnel or PageKite, you can expose a web serving port on your local machine to the internet. However, this only serves as a solution to those developing and running a server on their local machines (localhost).

For those that work with a dedicated development server, and can’t make it publicly accessible then a workaround would be to turn your local machine into a reverse proxy. For this, I recommend installing nginx.

Configuring nginx as a reverse proxy

After installing nginx, the following configuration (nginx.conf) will turn your localhost:80 into a reverse proxy, effectively creating a tunnel to your development server; making it accessible through the internet for your mobile device. Hooray!

server {
    listen       80;
    location / {
        proxy_pass         yourdevserverhostname;
        proxy_redirect     off;
        proxy_set_header   Host             yourdevserverhostname;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

Effectively, this means that when a user visits on their mobile device, they’ll be tunneled through to your local machine’s web serving port - which then invisibly forwards the request to your development server.

Security concerns

Opening up your development server to the internet of course brings with it security concerns. I’d recommend locking down your environment with SSL, HTTP authentication and IP filtering to make sure only authorised eyes get to see your content. I’d probably only recommend this setup as a temporary solution - with the ideal goal being your mobile devices having local access to your development server.