Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maragudk/gomponents-starter-kit
A starter kit for building a web app with gomponents, HTMX, and TailwindCSS in Go.
https://github.com/maragudk/gomponents-starter-kit
go golang gomponents html htmx tailwindcss
Last synced: about 1 month ago
JSON representation
A starter kit for building a web app with gomponents, HTMX, and TailwindCSS in Go.
- Host: GitHub
- URL: https://github.com/maragudk/gomponents-starter-kit
- Owner: maragudk
- License: mit
- Created: 2024-10-14T14:58:58.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-12-16T22:04:58.000Z (about 1 month ago)
- Last Synced: 2024-12-17T01:16:24.835Z (about 1 month ago)
- Topics: go, golang, gomponents, html, htmx, tailwindcss
- Language: Go
- Homepage: https://www.gomponents.com
- Size: 267 KB
- Stars: 54
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gomponents-starter-kit
[](https://pkg.go.dev/github.com/maragudk/gomponents-starter-kit)
[](https://github.com/maragudk/gomponents-starter-kit/actions/workflows/ci.yml)
[](https://github.com/maragudk/gomponents-starter-kit/actions/workflows/cd.yml)
A starter kit for building a web app with gomponents, HTMX, and TailwindCSS in Go.
Made with ✨sparkles✨ by [maragu](https://www.maragu.dev/).
Does your company depend on this project? [Contact me at [email protected]](mailto:[email protected]?Subject=Supporting%20your%20project) 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](https://github.com/new?template_name=gomponents-starter-kit&template_owner=maragudk) to create a new repository. Or you could clone this repository the traditional way:
```shell
git clone [email protected]:maragudk/gomponents-starter-kit.git your-app-name
```
After that, you can start the app with:
```shell
make start
```
If you make style changes, watch the CSS with:
```shell
make watch-css
```
You can run tests and linting with:
```shell
make test lint
```
### Enabling TailwindCSS auto-complete in your IDE
[TailwindCSS has auto-complete of classnames (and more) through IDE plugins](https://tailwindcss.com/docs/editor-setup).
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:
VSCode
Edit `vscode-settings.json` and add the following:
```json
{
"tailwindCSS.includeLanguages": {
"go": "html",
},
"tailwindCSS.experimental.classRegex": [
["Class(?:es)?[({]([^)}]*)[)}]", "[\"`]([^\"`]*)[\"`]"]
],
}
```
[See the official plugin page for more info](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
JetBrains/GoLand
Go to `Settings` -> `Languages & Frameworks` -> `Style Sheets` -> `Tailwind CSS` and add the following (don't delete the other config):
```json
{
"includeLanguages": {
"go": "html"
},
"experimental": {
"classRegex": [
["Class(?:es)?[({]([^)}]*)[)}]", "[\"`]([^\"`]*)[\"`]"]
]
}
}
```
[See the official plugin page for more info](https://plugins.jetbrains.com/plugin/15321-tailwind-css)
## Deploying
The [CD workflow](.github/workflows/cd.yml) 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:
```shell
make build-docker
```
Note that [you need the containerd image store enabled](https://docs.docker.com/desktop/containerd/#enable-the-containerd-image-store) for this to work.