Caddy UI

A beautiful web interface for managing Caddy web server reverse proxies with authentication. Caddy UI provides an intuitive dashboard to manage Caddy's reverse proxy configurations without editing config files manually.

Features

🔒 User authentication and authorization
- Secure login system with email/password
- Role-based permissions (admin/user)
- Session management with NextAuth.js
🌐 Manage reverse proxy configurations
- Create, edit, and delete reverse proxy entries
- Enable/disable configurations without deleting them
- Automatic updates to Caddy via Admin API
🚀 Easy-to-use interface
- Clean, modern UI built with Tailwind CSS
- Responsive design that works on all devices
- Dark/light mode support
🔄 Real-time updates to Caddy configuration
- Changes apply immediately through Caddy's Admin API
- No need to restart Caddy or edit config files
📱 Responsive design for desktop and mobile
- Beautiful on any device
- Consistent experience across all screen sizes

Screenshots

Click to expand screenshots

Dashboard

Configurations List

Add New Proxy

Dark Mode

Prerequisites

Node.js 18+ and npm
Caddy web server (v2.x) installed and running with the admin API enabled
Git for cloning the repository

Getting Started

1. Clone the repository

git clone https://github.com/yourusername/caddyui.git
cd caddyui

2. Install dependencies

npm install

3. Set up environment variables

Copy the .env file and update it with your settings:

cp .env.example .env

Make sure to set:

DATABASE_URL: Path to your SQLite database (default: file:./dev.db)
NEXTAUTH_SECRET: A random string for session encryption (generate a strong secret for production)
NEXTAUTH_URL: Your application URL (http://localhost:3000 for development)
CADDY_ADMIN_URL: URL to your Caddy admin API (default: http://localhost:2019)

4. Set up the database

# Push the schema to the database
npm run db:push

5. Start the development server

npm run dev

Open http://localhost:3000 in your browser. On first run, you'll be presented with a setup page to create your administrator account.

First-Time Setup

When you first run Caddy UI, you'll be presented with a setup page where you can create your administrator account:

Fill in your name, email address, and a secure password
Click "Complete Setup" to create your admin account
You'll be redirected to the login page where you can sign in with your new credentials

This secure setup process ensures you create your own administrator credentials instead of using default ones.

Deployment

Build for production

npm run build

Start the production server

npm start

For a production environment, consider:

Using a process manager like PM2
Setting up SSL
Using a reverse proxy for the UI itself
Securing the Caddy Admin API

Caddy Configuration

Make sure your Caddy server has the admin API enabled. You can start Caddy with:

caddy run --config Caddyfile --watch

Your Caddyfile should include:

{
  admin localhost:2019
}

⚠️ Security Notice: For production environments, you should secure the Caddy admin API by binding it to localhost and using a firewall, or by setting up authentication and TLS.

Caddy API Integration

The application interacts with Caddy's Admin API through the following endpoints:

GET /config/ - Fetch current Caddy configuration
POST /load - Replace entire configuration
PUT - Add reverse proxy configurations
DELETE - Remove configurations

For more information on Caddy's Admin API, see the official documentation.

Project Architecture

The project is built using:

Next.js: React framework for the frontend and API routes
TypeScript: For type safety
Tailwind CSS: For styling
Prisma: ORM for database operations
NextAuth.js: Authentication framework
SQLite: Database (can be changed in Prisma config)

Directory Structure

/src
  /app              # Next.js App Router pages
    /(protected)    # Protected routes requiring authentication
    /api            # API endpoints
  /components       # Reusable React components
  /contexts         # React contexts (auth, theme)
  /lib              # Utility functions and libraries
  /types            # TypeScript types
/prisma             # Prisma schema and migrations
/public             # Static assets

Troubleshooting

Common Issues

Connection Error: Ensure Caddy is running with the admin API enabled
Authentication Issues: Check your .env configuration for proper NEXTAUTH settings
Database Errors: Ensure the SQLite file is writable by the process

Contributing

Contributions are welcome! Here's how you can contribute:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Please make sure to update tests as appropriate and follow the code style guidelines.

Development Guidelines

Follow the existing code style and structure
Write clean, documented code
Add tests for new features
Keep dependencies to a minimum
Update documentation as needed

Security

If you discover a security vulnerability, please use the issue tracker. Security issues will be addressed promptly.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Caddy Server for the amazing web server
Next.js for the React framework
Tailwind CSS for the styling system
All the open source libraries used in this project