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

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:

1. Caddy is awesome—but a good UI makes it even better.
2. 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! 😊