Awesome

gomponents-starter-kit

A starter kit for building a web app with gomponents, HTMX, and TailwindCSS in Go.

Made with ✨sparkles✨ by maragu.

Does your company depend on this project? Contact me at markus@maragu.dk to discuss options for a one-time or recurring invoice to ensure its continued thriving.

Getting started

The easiest way to get started is to Use this template to create a new repository. Or you could clone this repository the traditional way:

git clone git@github.com:maragudk/gomponents-starter-kit.git your-app-name

After that, you can start the app with:

make start

If you make style changes, watch the CSS with:

make watch-css

You can run tests and linting with:

make test lint

Enabling TailwindCSS auto-complete in your IDE

TailwindCSS has auto-complete of classnames (and more) through IDE plugins.

After you've installed the TailwindCSS plugin for your IDE, it needs some configuration to work with gomponents. Here's the config for VS Code and JetBrains IDEs:

Edit vscode-settings.json and add the following:

{
	"tailwindCSS.includeLanguages": {
		"go": "html",
	},
	"tailwindCSS.experimental.classRegex": [
		["Class(?:es)?[({]([^)}]*)[)}]", "[\"`]([^\"`]*)[\"`]"]
	],
}

See the official plugin page for more info

Go to Settings -> Languages & Frameworks -> Style Sheets -> Tailwind CSS and add the following (don't delete the other config):

{
	"includeLanguages": {
		"go": "html"
	},
	"experimental": {
		"classRegex": [
			["Class(?:es)?[({]([^)}]*)[)}]", "[\"`]([^\"`]*)[\"`]"]
		]
	}
}

See the official plugin page for more info

Deploying

The CD workflow automatically builds a multi-platform Docker image and pushes it to the Github container registry GHCR.io, tagged with the commit hash as well as latest.

You can try building the image locally with:

make build-docker

Note that you need the containerd image store enabled for this to work.