NestJS + Server-Side TSX + HTMX Todo App

This is a simple todo app built with NestJS, server-side TSX, and HTMX that works as an example or boilerplate for building full stack web apps using TypeScript with all the ease of JSX to reutilize components on server side and the mentioned HTMX + AlpineJS on the frontend.

Features a modal dialog to show the todo form elegantly resolved with AlpineJS events.

Features

Backend:

• NestJS
• Server side TSX components powered by KitaJS. If you are only interested in this and you have an Express.js app you can just take src/kita-views.tsx and add it to your project (make sure to check KitaJS documentation to see how to setup the project).
• Server side validation with Zod (there's a ZodValidationPipe at https://github.com/mbenedettini/nestjs-tsx-htmx-todo-app/blob/main/src/zod-nestjs.ts which for example is used by the Todos controller to validate todos upserts defined at https://github.com/mbenedettini/nestjs-tsx-htmx-todo-app/blob/main/src/todos/todos.service.ts#L8)
• Drizzle ORM + SQLite
• Zod for requests validation (see src/zod-nestjs.ts for the NestJS integration)
• A Nix Flake for development and building the project, including an optimized Docker image.

Frontend:

• HTMX + AlpineJS + TailwindCSS
• Add/Edit Todos using a Modal dialog.

Others:

• Linting and Formatting with Biome

Usage

1. Clone this repo and use your favorite tool (NVM or whichever else) to have ready Node >= 20 and PNPM >= 9.

If you feel enthusiastic about Nix, you can install it following instructions here and then run nix develop to enter a shell with the right Node version and PNPM.

2. Run pnpm install to install the dependencies.

3. Run pnpm run migrations:migrate to run migrations and create the database.

4. Run pnpm run start:dev to start the development server and go to http://localhost:3100.

Build the Docker image

Cross platform building is not easy on Nix. If you are on MacOS or don't want to install Nix, it's just easier to run nix build inside a Linux container:

docker run --platform linux/amd64 -v .:/src -ti nixos/nix:2.24.9 bash -c "cd /src && nix build --extra-experimental-features nix-command --extra-experimental-features flakes --no-filter-syscalls --impure .#docker-image && rm todo-app.tar.gz && cp -L result todo-app.tar.gz" && docker load < todo-app.tar.gz

Then just run the image:

docker run --init -e PORT=3200 -p 3200:3200 todo-app:latest

and head to http://localhost:3200.

If you are on Linux, you can just run nix build .#docker-image and then docker load -i result and then docker run --init -e PORT=3200 -p 3200:3200 todo-app:latest.

License

MIT