Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emarifer/rust-axum-askama-htmx-todoapp
Full stack application using Rust's Axum framework & Askama templating language with user auth management (JWT) + CRUD to a SQLite database (To Do List) and HTMX in the frontend.
https://github.com/emarifer/rust-axum-askama-htmx-todoapp
askama auth-middleware authentication-middleware axum axum-middleware error-handling flash-messages htmx hypermedia hyperscript jwt-authentication rust server-side-rendering session-middleware sqlite3 sweetalert2 tailwindcss timezone-conversion todo-app
Last synced: about 1 month ago
JSON representation
Full stack application using Rust's Axum framework & Askama templating language with user auth management (JWT) + CRUD to a SQLite database (To Do List) and HTMX in the frontend.
- Host: GitHub
- URL: https://github.com/emarifer/rust-axum-askama-htmx-todoapp
- Owner: emarifer
- License: gpl-3.0
- Created: 2024-05-20T12:08:09.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-22T09:27:38.000Z (7 months ago)
- Last Synced: 2024-05-22T10:33:08.399Z (7 months ago)
- Topics: askama, auth-middleware, authentication-middleware, axum, axum-middleware, error-handling, flash-messages, htmx, hypermedia, hyperscript, jwt-authentication, rust, server-side-rendering, session-middleware, sqlite3, sweetalert2, tailwindcss, timezone-conversion, todo-app
- Language: Rust
- Homepage:
- Size: 744 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
rust-axum-askama-htmx-todoapp
Full stack application using Rust's Axum framework & Askama templating language with user auth management (JWT) + CRUD to a SQLite database (To Do List) and HTMX in the frontend.
  
>🤦 Yes, just another to-do application, but to try something new you have to start somewhere ¯\\\_(ツ)\_/¯.
>[!NOTE]
>***This application is an improved clone of this [repository](https://github.com/emarifer/go-echo-templ-htmx) of mine (go-echo-templ-htmx), but made in `Rust`.***
## 🤔 What Stack have we used?
In the implementation of this application we have used the following technologies:
- ✅ **Bootstrapping**: [Rust programming language (v1.77.0)](https://www.rust-lang.org/)
- ✅ **Backend Framework**: [Axum v0.7.5 ](https://docs.rs/axum/latest/axum/)
- ✅ **Database**: [Sqlite](https://www.sqlite.org/)
- ✅ **Templating Language**: [Askama v0.12.1](https://docs.rs/askama/latest/askama/)
- ✅ **Styling**: [TailwindCSS + DaisyUI](https://tailwindcss.com)
- ✅ **Frontend interactivity**: [>Htmx + _Hyperscript](https://htmx.org/)
>[!NOTE]
>***The use of [>htmx](https://htmx.org/) 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. Likewise, the [_hyperscript](https://hyperscript.org/) library allows you to add some dynamic features to the frontend in a very easy way.***
---
## 🖼️ Screenshots:
###### Register and Todo List pages with error & success alerts, respectively, and task creation modal dialog:
###### Modal Task Update Dialog, Confirm Dialog (with con `SweetAlert2`), and unknown path or resource not found page (Error 404):
###### Error page 401 (Status Unauthorized), task update modal dialog showing that the resource is no longer in the DB and Error page 400 (Bad Request) which indicates that the creation/update of the task needs at least the title:
---
## 👨🚀 Getting Started
#### How to build for production
Besides the obvious prerequisite of having Rust on your machine, you must have `cargo watch` installed for hot reloading when editing code.
On the other hand, since we use a SQL database (`Sqlite3`), you must have `SQLX-CLI` installed which will allow you to build the database and perform migrations. You can install it (with the necessary `feature` for `Sqlite`) with the command:
```
$ cargo install sqlx-cli -F sqlite
```
Next, you can build the database and perform the migrations that generate the `users` and `todos` tables. Make sure that the `migrations` folder is present (which contains the necessary migrations) and the `.env` file that explains the `DATABASE_URL` environment variable. To do this, you must execute these commands:
```
$ sqlx database create # generates the DB
$ sqlx migrate run # generates migrations. (`sqlx migrate revert` to reverse migrations)
```
Before compiling the binary, you will need to regenerate the CSS. First, you have to install the dependencies required by `Tailwind CSS` and `daisyUI` (you have to have `Node.js` installed on your system) and then run the regeneration of the `main.css` file. To do this, apply the following commands:
```
$ cd tailwind && npm i
$ npm run build-css-prod
```
Build the binary file and run it with the command (in proyect root):
```
$ cargo build --release && ./target/release/rust-axum-askama-htmx # Ctrl + C to stop the application
```
#### Build for development
If what you want is to edit the code, it will be more convenient to activate hot reload:
```
$ cargo watch -x run # files/folders contained in .gitignore will be ignored
```
>[!NOTE]
>***If you are editing the code and you are logged into the application in the browser, when the hot reload occurs when saving, since some global flags (such as `from_protected` and `time_zone`) are stored in a session (in memory) they will be lost and you will need to log in again.***
If you also want to modify the CSS of the templates, it will be useful to activate the `watch` mode of Tailwindcss, executing the command inside the `tailwind` folder (you need to have `Node.js` installed):
```
$ npm run watch-css # minify for production: npm run build-css-prod
```
---
### Happy coding 😀!!