WIP: Caddy Esbuild Plugin

Plugins
1

Hi everyon!

I’m working on esbuild integration in Caddy, and it my proof of concept works nicely, and its insanely fast :slight_smile:

But I would love someone to join on the project, I’m struggling with handling configuration/Caddyfile stuff, and still have some esbuild properties to figure out…

Namely loaders, the fileLoader outputs the wrong directory, so it fails, so I jsut use dataURL loader, but thats not very scalable, and would love to have some good defaults, but options to override it in Caddyfile/json.

What I have made, and works:

  • “create-react-app” runs with some modifications to index.html to load the correct assets
  • specify source/target file in Caddyfile
  • In memory compiling the assets, and recompiles it when they change
  • ETag to cache assets

If anyone wants to join in, the repo is currently here GitHub - Richard87/caddy-esbuild-plugin: A Caddy plugin that bundles esbuild and libsass, transparantly compile css,sass and scss files, as well as javascript, es6/7/+, and JSX/React applications and the Caddyfile looks like this:

{
	order esbuild first
	debug
}

localhost:8080 {
  file_server  {
    root example/public
  }
  esbuild ./example/src/index.js /build/index.js
}
2 Likes
2

The project is progressing nicely!

  • Initial support for SASS is included when building with CGO (based ontop of go-libsass)
  • Live reload
  • Nicer configuration
  esbuild ./example/src/index.js {
    auto_reload
    target /_build
    sass
  }

I would love some help testing it out and reporting on bugs!

CGO_ENABLED=1 xcaddy build --with github.com/richard87/caddy-esbuild-plugin@v0.2.0
2 Likes
3

This looks very cool. Keep up the good work!

1 Like
4

Thanks @matt! Love working on Caddy, way easier than I thought and expected to make it work!

1 Like
5

It finally has all the futures we need:

  • Live reload (v0.1.0)
  • SASS (v0.2.2)
  • Manifest.json (v0.3.0) /<target>/manifest.json, defaults to /_build/manifest.json
  • Env support (v0.4.0)
  • Multiple entrypoint (v0.5.0) (filename must be different)
  • Custom loader configuration (v0.6.0)
  • Enable hashed files with file_hash property (v0.7.0)

And can be used either like this:

esbuild ./example/src/index.js live_reload sass env ./example/src/index2.js

Or like this:

  esbuild {
    env
    sass
    live_reload
    target /_build
    source ./example/src/index.js
    source ./example/src/index2.js
    loader .png dataurl
    loader .svg file
    loader .json json
    loader .js jsx
  }

By default I use ETag and return “304 Not modified”, but if you want, you can use the directive “file_hash” instead, and I set 1 year cache timeout on the files as well (very usefull if you have cloudflare or other edge-side caches in front of the user!

1 Like
6

Alright, the plugin is feature complete, going to try to add tests before releasing v1 :fireworks:

  • v0.1.0: Live reload
  • v0.2.2: SASS
  • v0.3.0: Manifest.json /<target>/manifest.json, defaults to /_build/manifest.json
  • v0.4.0: Env support
  • v0.5.0: Multiple entrypoint (filename must be different)
  • v0.6.0: Custom loader configuration
  • v0.7.0: Enable hashed files with file_hash property
  • v0.8.0: Enable defines
  • v0.9.0: Ouptut alias
  • v.0.10.0: Transparent compilation, NodePath configuration, rename sass to scss
1 Like
7

This topic was automatically closed after 30 days. New replies are no longer allowed.