I built a "CodePen for Caddy"

Showcase
1

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
2

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

2 Likes
3

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
4

Oh wow that’s super cool!

2 Likes
5

cool! does it support JSON configs?

1 Like
6

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
7

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
8

Hi all,

once again thanks for all the awesome feedback from everyone!

To make tech-playground even more useful I’ve now create a JavaScript widget that allows anyone to embed interactive playgrounds into blog posts, docs and more.

Just load a bit of JS, wrap your existing code blocks into [1] a custom HTML element and you’re off to the races!

On top there is a bunch of customizations for the controls and output, to make things work just like you want.

Find out more in the docs.

[1]
A full example of how I do it in my own Hugo-based blog, taken from this post:

## Caddyfile

With Caddy it works exactly the same, just using a different vocabulary.

<tech-playground
    playground="caddy"
    show-file-names="false"
    show-version-selector="true"
    output-style="boxed"
    output-order="command.stdout,command.stderr">

```Caddyfile {title="Caddyfile"}
:80 {
	@maintenanceModeActive file /app/maintenance.on {
        root /
    }
	handle @maintenanceModeActive {
		respond "We are performing a maintenance, come back later" 503
	}

	reverse_proxy httpbin.org
}
```

```bash {title="test.sh"}
echo "Normal Operations"
curl http://127.0.0.1/headers

mkdir /app/ && touch /app/maintenance.on

echo "Maintenance Mode"
curl http://127.0.0.1/headers
```

</tech-playground>
2 Likes