unplugin-caddy

Caddy plugin for:

• Vite,
• Astro,
• Rspack,
• Webpack
• esbuild ^soon
• Rollup ^soon
• Rolldown ^soon
• Farm ^soon

Easiest way to get https support for your local development.

Note

This is under active development. If you have any suggestions, I'm all ears, please open an issue.

Prerequisites

• Caddy

Install on macOS:

brew install caddy

↳ Install on other platforms.

Install

unplugin-caddy

npm add unplugin-caddy

Usage

Vite

// vite.config.ts
import Caddy from 'unplugin-caddy/vite'

export default defineConfig({
  plugins: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['vite-example.localhost'],
      }
    }),
  ],
})

Example in ./example/vite.config.ts: bun --filter example dev:vite

Astro

// astro.config.ts
import Caddy from 'unplugin-caddy/astro'

export default defineConfig({
  integrations: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['astro-example.localhost'],
      }
    }),
  ],
})

Rspack

// rspack.config.mjs
import Caddy from 'unplugin-caddy/rspack'

export default {
  /* ... */
  plugins: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['rspack-example.localhost'],
      }
    })
  ]
}

Example in ./example/rspack.config.ts: bun --filter example dev:rspack

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-caddy/webpack')({
      options: {
        host: 'localhost',
        domains: ['webpack-example.localhost'],
      }
    })
  ]
}

Example in ./example/webpack.config.ts: bun --filter example dev:webpack

Rolldown

// rolldown.config.ts
import Caddy from 'unplugin-caddy/rolldown'

export default defineConfig({
  plugins: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['rolldown-example.localhost'],
      }
    }),
  ],
})

Rollup

// rollup.config.js
import Caddy from 'unplugin-caddy/rollup'

export default {
  plugins: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['rollup-example.localhost'],
      }
    }),
  ],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import Caddy from 'unplugin-caddy/esbuild'

build({
  plugins: [Caddy({
    options: {
      host: 'localhost',
      domains: ['esbuild-example.localhost'],
    }
  })]
})

Farm

// farm.config.ts
import { defineConfig } from '@farmfe/core'
import Caddy from 'unplugin-caddy/farm'

export default defineConfig({
  plugins: [
    Caddy({
      options: {
        host: 'localhost',
        domains: ['farm-example.localhost'],
      }
    })
  ]
})

Motivation

From personal experience:

tailscale funnel is great but limited to 1 service at a time, so it's not suitable for monorepos with multiple services.

ngrok used to be a good option but now requires a subscription for anything beyond the trivial use case.

Another options creating certificates using mkcert with a tool like vite-plugin-mkcert. Having tried that for a few months, I found that it's too much of an ask to expect contributors to install certificates.

Caddy seems like the perfect solution.