97 lines
3.1 KiB
Markdown
97 lines
3.1 KiB
Markdown
# gomponents-starter-kit
|
|
|
|
<img src="logo.png" alt="Logo" width="300" align="right">
|
|
|
|
[](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 markus@maragu.dk](mailto:markus@maragu.dk?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 git@github.com: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:
|
|
|
|
<details>
|
|
<summary>VSCode</summary>
|
|
|
|
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)
|
|
</details>
|
|
|
|
<details>
|
|
<summary>JetBrains/GoLand</summary>
|
|
|
|
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)
|
|
</details>
|
|
|
|
## 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.
|