Tutorial: Localhost Demo

Your own showoff.io or localtunnel!

Localhost Demo
Written by ianonavy
25 July 2012
You're a Web developer and want to quickly showcase something that you're working on to a friend or coworker, but you don't have the time or patience to set up a public staging site for every individual project. No, you just want something quick and dirty to get it out there right now and get immediate feedback!

Sound like you? Keep reading!

There are already plenty of solutions to this like showoff.io and localtunnel, but you want to use your OWN server. Setting it up takes 5-15 minutes in 3 easy steps, but when you're done, you'll be showcasing your local development server with one simple command.

Sound like fun? Let's get started!

Requirements

A remote server to which you have root access.
A domain name with access to the DNS records.
Basic knowledge of how to use both of the above.

Step One: Configure your DNS.

Create an A record in your DNS settings to point to your remote server's IP Address. I used the subdomain

demo

. The exact process will be different depending on your DNS provider. Mine is CloudFlare, and my record looks like this:

Posted Image

Of course, that's not my real IP address.

Step Two: Configure your Web server.

Next, you'll need to configure your Web server and set up a virtual host with a proxy pass from a local port to the web.

I use nginx because the configuration is drop-dead simple, but Apache or lighttpd will work too. You'll have to read up on your Web server's documentation.

If you're on CentOS, just add

demo.conf

to your

/etc/nginx/conf.d/

folder:

# Create an upstream server group to listen to localhost port 8000.
upstream localhost_demo {
    server 127.0.0.1:8000;
}

# Create proxy connection to the upstream from your subdomain.
server {
    listen 80;
    server_name demo.example.com;

    location / {
        proxy_set_header Host $http_host;
        proxy_pass http://localhost_demo;
    }
}

You will need to configure the configuration file to set

server_name

to your own domain name or if port 8000 is already being used. Note that these will also require the

ngx_http_upstream_module

and

ngx_http_proxy_module

modules to be enabled. They should be installed and enabled by default.

Don't forget to restart your Web service!

sudo service nginx restart

Edit: You may also want to add a robots.txt file to prevent Google from accidentally caching your development site. Rather than add this manually for every server, you can add this to your server configuration for nginx:

    location = /robots.txt {
        alias /var/www/robots/none/robots.txt;
    }

Replace my path with the path to your robots.txt file. I like to keep a global one on my VPS in that particular directory so I can create symlinks whenever I need to. The content of this file should be:

User-agent: *
Disallow: /

Step Three: Configure your local shell.

Create an alias in your local shell called

demo

. On BASH or ZSH, you can do this with one simple command:

alias demo="ssh -R 8000:localhost:8000 user@demo.example.com"

.
You may need to replace the second 8080 with the port you configured in the last step and 8000 with the port of your local development server (8000 is default for Django and 3000 is default for Rails). Of course, you will also need to replace

user@demo.example.com

with your own SSH user and domain name.

You can make this permanent every time you log in by appending it to your

.bashrc

.zshrc

file.

To sum up what's happening, when you run the command

demo

, a tunnel is created between your local dev server and the Internet. When someone access demo.example.com, nginx redirects the HTTP packet on port 80 to port 8080, which is sent via reverse SSH portforwarding to your local web server on port 8000. If you ever want to close this port off from the Internet, all you have to do is terminate the SSH session with the

exit

command!

Alternatively, you can use this neat script I wrote, which allows you to take in any port as an argument. So you can run

demo 3000

for your Rails apps and just plain old

demo

for the default port of 8000. Feel free to fork and edit the simple script as you like to change the default port.

To get this script via terminal (wget), run these commands:

cd /usr/local/bin
sudo wget -O demo http://is.gd/Nx2RUB
sudo chmod +x demo

Using the script is easy:

demo [port]

. Before you do that though, make sure to edit the configuration variables in the script with your favorite text editor.

Hope this helps make sharing your local development servers just a bit easier.

And yes, Kyek, I totally stole your tutorial style.

Not sure whether I put this in the right place since there aren't any General Programming or UNIX-Based Servers Tutorial subforums.

LaTeX Code

webdevRefinery Forum: Tutorial: Localhost Demo - webdevRefinery Forum

Welcome!

Mean coders suck. Learn from nice ones.

Pick a background

Think a topic deserves its own subforum?

Rate Topic:

ianonavy