gofiber-templ-htmx - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #go #android #rust #java #cli #vue #awesome-list #pytorch #ios #openai #open-source

gofiber-templ-htmx

(★ 141)

Go/Fiber🧬+</>Templ to-do list app with user login and HTMx-powered frontend.

파일 탐색기

최종 버전 다운로드 (.zip)

- - styles.css
- - gopher-svgrepo-com.svg
- screenshot-1.png
- screenshot-2.png
- screenshot-3.png
- screenshot-4.png
- screenshot-5.png
- screenshot-6.png
- auth_handlers.go
- routes.go
- todo_handlers.go
- db.go
- todo_model.go
- user_model.go
- - login.templ
  - register.templ
- - flashmessages_partial.templ
  - navbar_partial.templ
- - create.templ
  - todo.list.templ
  - update.templ
- base_layout.templ
- error_404.templ
- error_500.templ
- home.templ
.air.toml
.gitignore
go.mod
go.sum
LICENSE
main.go
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/emarifer/gofiber-templ-htmx

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd gofiber-templ-htmx

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Go

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Go Go 언어 컴파일러 및 도구 모음입니다.

$ go build -ldflags="-s -w" -o ./bin/main . # ./bin/main to run the application / Ctrl + C to stop the application

Go 프로그램을 컴파일해 실행 파일을 만듭니다.

$ go install github.com/a-h/templ/cmd/templ@latest

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 빌드가 에러 없이 끝나면 성공입니다. go run . 을 썼다면 터미널 출력을 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">

# Go/Fiber🧬+<span style="color:yellow"></></span>Templ to-do list app with user login and HTMx-powered frontend (Demo)

A full-stack application using Golang's Fiber framework with session-based authentication. Once we are authenticated we can enter a view from which we can manage a list of tasks (list, update and delete). Requests to the backend are controlled by [</>htmx](https://htmx.org/) ([hypermedia](https://hypermedia.systems/) only).

![GitHub License](https://img.shields.io/github/license/emarifer/gofiber-templ-htmx) ![Static Badge](https://img.shields.io/badge/Go-%3E=1.18-blue)

</div><br />

>[!NOTE]
>***This application is an clone of this [repository](https://github.com/emarifer/rust-axum-askama-htmx-todoapp) of mine (rust-axum-askama-htmx-todoapp), but made in `Golang`.***

<hr />

### 🤔 Explanation

The application allows us to perform a complete CRUD on the database, in this case SQLite3.

The DB stores both a table with the users and another table for each user's to-do. Both tables are related using a foreign key.

In this application we have used the Fiber framework, which, as it says in its documentation, is "an Express-inspired web framework". This makes creating web applications much easier for people coming from the world of JavaScript. Fiber is a Go web framework built on top of Fasthttp, the fastest HTTP engine for Go. It's designed to ease things up for fast development with zero memory allocation and performance in mind.

Authentication (via session) is done using built-in middleware. On the other hand, a [dependency](https://github.com/sujit-baniya/flash) is also used to handle flash messages.

Finally, using the Fiber framework also allows us centralized error handling.

<br>

>[!IMPORTANT]
>***In this application, instead of using the html/template package (gofiber/template/html, specifically), we use the [a-h/templ](https://github.com/a-h/templ) library. This amazing library implements a templating language (very similar to JSX) that compiles to Go code. Templ will allow us to write code almost identical to Go (with expressions, control flow, if/else, for loops, etc.) and have autocompletion thanks to strong typing. This means that errors appear at compile time and any calls to these templates (which are compiled as Go functions) from the handlers side will always require the correct data, minimizing errors and thus increasing the security and speed of our coding.***

The use of </>htmx allows behavior similar to that of a SPA, without page reloads when switching from one route to another or when making requests (via AJAX) to the backend.

On the other hand, the styling of the views is achieved through Tailwind CSS and DaisyUI that are obtained from their respective CDNs. Likewise, the `SweetAlert2` library is used, a substitute for javascript pop-up boxes. In the same way it is obtained from its respective CDN.

Finally, minimal use of [_hyperscript](https://hyperscript.org/) is made to achieve the action of closing alerts when they are displayed and the action of showing/hiding the password in corresponding text input fields.

>[!NOTE]
>***This application is identical, although much more improved, to that of a previous [repository](https://github.com/emarifer/gofiber-htmx-todolist) of mine, which is developed in GoFiber-template/html instead of [Templ](https://templ.guide/) templating language, as in this case.***

---

## 🖼️ Screenshots:

<div align="center">

###### Todo List Page with success alert & Sign Up Page with error alert:

<img src="doc/screenshot-1.png" width="40%" align="top">&nbsp;&nbsp;<img src="doc/screenshot-2.png" width="40%" align="top">

<br>

###### Task update page & popup alert based on SweetAlert2:

<img src="doc/screenshot-3.png" width="40%" align="top">&nbsp;&nbsp;<img src="doc/screenshot-6.png" width="40%" align="top">

<br>

###### Centralized handling of 404 & 500 errors:

<img src="doc/screenshot-4.png" width="40%" align="top">&nbsp;&nbsp;<img src="doc/screenshot-5.png" width="40%" align="top">

<br>

</div>

---

## 👨‍🚀 Setup:

Besides the obvious prerequisite of having Go! on your machine, you must have Air installed for hot reloading when editing code.

Start the app in development mode:

```
$ air # This also compiles the view templates automatically / Ctrl + C to stop the application
```

Build for production (previously it is necessary to regenerate the templates with the `templ generate` command; see explanation below):

```
$ go build -ldflags="-s -w" -o ./bin/main . # ./bin/main to run the application / Ctrl + C to stop the application
```

>[!TIP]
>***In order to have autocompletion and syntax highlighting in VS Code for the Teml templating language, you will have to install the [templ-vscode](https://marketplace.visualstudio.com/items?itemName=a-h.templ) extension (for vim/nvim install this [plugin](https://github.com/joerdav/templ.vim)). To generate the Go code corresponding to these templates you will have to install the templ CLI:***

```
$ go install github.com/a-h/templ/cmd/templ@latest
```

>[!TIP]
>***And then regenerate the templates with the command:***

```
$ templ generate # The `templ generate --watch` command will watch the project folder to regenerate them every time we make a change to its code.
```

>[!TIP]
>***Review the documentation on Templ [installation](https://templ.guide/quick-start/installation) and [support](https://templ.guide/commands-and-tools/ide-support/) for your IDE.***

---

### Happy coding 😀!!