Awesome

Perfect Lighthouse score.

Demo: Islands 🏝️

This tech-demo demonstrates a web frontend application written in Go and TypeScript following the Islands of Interactivity architectural approach to building highly maintainable modern web applications using a cutting-edge tech stack:

• Templating
  • Templ for fast and convenient server-side templating in Go. 🖨️
• Dev Tools
  • Templiér for hot-reloads in dev mode. ♻️
  • Bun for TypeScript bundling and JS package management. 🍞
  • ESLint for JavaScript/TypeScript linting. 🔎
• Frontend
  • TailwindCSS for easy styling. 💅
  • Shoelace for reusable and extensible web components. 👟
  • Lit for building maintainable and fast web components. 🔥
• Scripting
  • Alpine.js for client-side scripting. ⛰️
• CI/CD
  • GitHub Actions for CI/CD.

Prerequisits

• Go 1.23
• Bun
• mkcert (only when HTTPS is required)

How To

Development

Run Témplier to enable automatic hot-reload on source changes:

./dev.sh

Then navigate to http://127.0.0.1:7331.

ℹ️ Use http://127.0.0.1:8080/ to access the actual application server without the Templiér proxy (this won't auto-reload on changes).

HTTPS

If you want to test the server with TLS enabled, first add the domain to your /etc/hosts file:

127.0.0.1 islands.demo

Then install mkcert and run:

mkcert -install

Once the CA certificates are installed, create the certificate and key files:

mkcert islands.demo

Finally, run the server:

TLS_CERT="islands.demo.pem" TLS_KEY="islands.demo-key.pem" go run ./cmd/server -host islands.demo:8080

Production mode

# First, build all generated files.
./buildall.sh

# Build server
go build -o server ./cmd/server

# Run server
TLS_CERT="path/to/cert.pem" TLS_KEY="path/to/key.pem" ./server -compress -host hostaddr

Downloading an Icon

This repository uses a subset of bootstrap-icons. To copy an icon from the CDN and make it available in the public bundle, use:

# This will download the person.svg bootstrap icon.
ICON=person bun run download:icon