I built a "CodePen for Caddy"

Hi all,

I have built a online Caddy playground that runs the given Caddy configuration in an isolated environment and allows you to run arbitrary commands, think curl or something like that, against it.

It also support creating snippets, which allows sharing of specific config snippets in a cool “try, change & play with it” kind of way.
For example this snippet: https://next.tech-playground.com/snippet/proud-orthodox-ermine/

In the background this basically starts an isolated container, with some backends available to allow for proper testing.

Of course the app itself is hosted behind a Caddy instance, while that config is nothing special I’m still going to share it as well:

{
	email dns@my-domain.com
}

(common) {
    encode zstd gzip
    header server tech-playground
}

(static-compression) {
    precompressed gzip br
    hide staticfiles.json
}

(reverse-proxy-app) {
	reverse_proxy unix//opt/app/tech-playground.sock {
		header_down -server
	}
}


# Admin portal, only available through TailScale
thostname.my-tailnet.ts.net {
	import common

	handle_path /static/* {
		file_server {
			root "/opt/app/tech-playground/tech_playground/static"
			import static-compression
		}
	}

	handle {
		import reverse-proxy-app
	}
}

www.tech-playground.com {
	import common
	redir https://tech-playground.com{uri}
}

tech-playground.com {
	import common

	handle_path /static/* {
		file_server {
			root "/opt/app/tech-playground/tech_playground/static"
			import static-compression
		}
	}

    handle_path /admin/* {
        respond 404
    }

	handle {
		import reverse-proxy-app
	}
}
7 Likes

Wow, super cool! Thanks for sharing this, I’ll share it as well :slight_smile:

2 Likes

Awesome, thanks! Let me know if you miss any things like special backends or available CLI tools to make it work for even more scenarios.

1 Like

Oh wow that’s super cool!

2 Likes

cool! does it support JSON configs?

1 Like

I just had a quick test and unfortunately no, or better not yet :wink:

To be honest I have so far not really worked with anything besides the Caddyfile for my own use of Caddy, but I do like the idea of the playground letting you specify which config adapter should be used (only file based ones for now though).

I will have a look at adding that as an option soon, thanks for the idea @makinghappen

3 Likes

Thanks to the suggestion from @makinghappen the Caddy playground now supports it’s first “advanced option”, letting you specify the Caddy configuration format.

A snippet with JSON config for Caddy:

3 Likes