I Built a CaddyFile Generator Tool in Just 8 Hours – Here’s How It Went

Dean Ward — Wed, 08 Jan 2025 11:19:14 +0000

I've been using Caddy more and more recently for my self-hosted media server and related tools, and honestly, I’ve fallen in love with it. 🧡 Its speed, simplicity, and ease of use are amazing—everything you want from a web server.

But there was one thing I wasn’t a fan of: editing CaddyFiles. Even though they’re simpler than other config formats, I’ve never been keen on messing with config files. I wanted a UI to make generating and managing CaddyFiles easier, but after searching, I couldn’t find anything modern, maintained, or ready to use.

So, I decided to build it myself.

The Journey of Building CaddyGen

Since I didn’t want to spend weeks on this project, I decided to use bolt.new, an AI code generator I’d heard good things about. I thought, why not let AI take the wheel and see what it can do?

Right from the start, bolt amazed me. I gave it an outline of what I wanted:

A Vue-based UI to manage and generate CaddyFiles.
Features to add and remove hosts.
A config viewer to preview the CaddyFile.
Storage in-browser using localStorage (so no backend required).

Bolt started generating a Vue project right away and quickly added features as I prompted it. Over the course of 8 hours, I worked alongside the AI to add:

Host cards for managing domains.
Presets with badges and logos for popular configurations.
An import tool for existing CaddyFiles (a feature I didn’t even think of initially).
Syntax highlighting on the CaddyFile preview.

While I did have to step in occasionally to fix bugs or tweak layouts, the process was smooth and surprisingly fun. By the end, I had a working tool that did everything I wanted—and then some.

What is CaddyGen?

CaddyGen is a user-friendly web interface for generating Caddy server configurations. It simplifies the process of creating reverse proxy and file server setups, with support for SSL, compression, security headers, and more.

Features

🚀 Visual configuration builder for the Caddy server.
🔄 Reverse proxy and file server setup.
📦 Pre-configured presets for popular applications.
💾 Local storage for saving configurations.
📤 Import/Export for Caddyfiles.
🛡️ Advanced security options (CSP, rate limiting, IP filtering).
⚡ Performance optimizations (compression, caching).
🌐 CORS configuration.
📁 File server options (directory listing, PHP support).

Try it now: caddygen.site

Deployment Options

You can deploy CaddyGen using Docker with ease:

Run the Pre-Built Image

Pull the latest image from Docker Hub and run it:

docker pull wardy784/caddygen:latest
docker run -d --restart unless-stopped -p 8189:80 wardy784/caddygen:latest

Run with Docker Compose

Use the following docker-compose.yml:

version: '3.8'

services:
  app:
    image: wardy784/caddygen:latest
    ports:
      - "8189:80"
    restart: unless-stopped
    container_name: caddygen

To deploy:

docker compose up -d

Access the app at http://localhost:8189.

The Launch 🚀

Once the project was done, I deployed it to Netlify using Bolt's built-in tools, added a custom domain, and shared it with the world. The response blew me away:

Over 60 GitHub stars in less than 24 hours.
Nearly 3k users on the app at caddygen.site.
50+ Docker pulls of the tool’s image.

Lessons Learned

This project taught me two things:

Caddy is awesome—but a good UI makes it even better.
AI tools like bolt.new can speed up development and help you focus on the fun parts of coding.

What I Loved:

Fast bootstrapping: Bolt got the project up and running in minutes.
Responsive AI: It generated code quickly and adapted well to my prompts.
LocalStorage integration: Handling data in-browser was seamless.
Netlify deployment: With just a click, I deployed the app.

What Could Be Better:

UI glitches: Occasionally, the editor got stuck, leaving the code in a half-edited state that broke the build.
Layout fine-tuning: Small details like aligning buttons or tweaking forms required manual fixes.
Incomplete changes: Sometimes the AI claimed to have made edits that weren’t reflected in the code.

What’s Next?

The project is far from perfect—there are some weird choices the AI made, and plenty of TypeScript issues I need to fix. But I’m already planning new features:

Adding more presets and options.
Improving the UI to make it even more intuitive.
Expanding the tool’s functionality based on user feedback.

Try It Yourself!

Live Demo: caddygen.site
GitHub Repository: DeanWard/CaddyGen

Let me know what you think—and feel free to suggest new features or improvements! 😊

DEV Community: Dean Ward