CloudFlare tunnels for easy demos

I wanted to get experience with the Telegram app ecosystem, so I build a very basic Flappy Bird clone (https://t.me/flappster_bot?game=flappster_classic — you can try it out here).

The prototype had to be up and running as quick as possible and I wanted to test it through Telegram which expects the game to be accessible at a public URL.

For development, I’d love to skip a deployment step and serve it right from my machine for fast iteration.

I could punch a hole through my firewall and lose the few hair I still have by messing with ports and NAT, but there is an easier way.

All you I needed is a domain, a CloudFlare account and some Docker Compose magic.

The idea is to use CloudFlare tunnel to point a DNS record to my CloudFlare tunnel docker container and expose the network it’s on.

I can tell it through a configuration file to route all traffic to a NGINX instance which acts a a web server to serve the game assets (HTML, CSS, JS) and also a reverse proxy to expose the API on the /api path.

The telegram bot is in a polling configuration, so it’s happy just to have internet access through the tunnel.

The flow is like this:

Player clicks on Play ↳ Bot gets a message, returns the URL to the game ↳ Telegram loads the URL in a webview window ↳ NGINX serves the static files ↳ The frontend renders and calls the /api endpoint to submit scores ↳ The API publishes the score back to Telegram

That way, you don’t leak your bot token.

Here is how the docker compose looks like:

I’ve since used a variation of this CloudFlare tunnel docker setup for a few other prototypes too and it’s super easy to get it up and running.

My staging setup is a simple rsync command to scoot the files over ssh from my dev machine, run the setup (that makes a staging tunnel and creates an .env file - just the first time) and run docker compose up. After that it’s just rsync & restart. It’s that easy.

Obviously, this is not meant for high-traffic production workloads, but for exposing a service to the world without punching a hole in your network it works like magic.

P.S. Let me know if you’d like a template, I can publish a cleaned up version on GitHub that you can use in your projects.

Yours,

Taj