{"id":12778438,"url":"https://github.com/volfpeter/fastapi-htmx-tailwind-example","last_synced_at":"2025-04-10T02:20:08.587Z","repository":{"id":249198514,"uuid":"824165331","full_name":"volfpeter/fastapi-htmx-tailwind-example","owner":"volfpeter","description":"Example application (IoT dashboard) built with FastAPI, HTMX, TailwindCSS, DaisyUI, Jinja, and MongoDB.","archived":false,"fork":false,"pushed_at":"2025-03-13T21:35:31.000Z","size":88,"stargazers_count":75,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T01:13:17.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/volfpeter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"buy_me_a_coffee":"volfpeter"}},"created_at":"2024-07-04T13:48:48.000Z","updated_at":"2025-04-01T09:34:29.000Z","dependencies_parsed_at":"2025-01-03T12:21:43.584Z","dependency_job_id":"0b11a3d4-9ba2-4b7c-bcd1-1be7a107a3df","html_url":"https://github.com/volfpeter/fastapi-htmx-tailwind-example","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"49fb1287f8040980c5303a8ccd2fe5706182f58f"},"previous_names":["volfpeter/fastapi-htmx-tailwind-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volfpeter%2Ffastapi-htmx-tailwind-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volfpeter%2Ffastapi-htmx-tailwind-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volfpeter%2Ffastapi-htmx-tailwind-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volfpeter%2Ffastapi-htmx-tailwind-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/volfpeter","download_url":"https://codeload.github.com/volfpeter/fastapi-htmx-tailwind-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142979,"owners_count":21054685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-19T03:37:03.788Z","updated_at":"2025-04-10T02:20:08.544Z","avatar_url":"https://github.com/volfpeter.png","language":"Python","funding_links":["https://buymeacoffee.com/volfpeter"],"categories":["Examples by Back-end"],"sub_categories":["Python-based (Django, FastAPI, Flask)"],"readme":"![Tests](https://github.com/volfpeter/fastapi-htmx-tailwind-example/actions/workflows/tests.yml/badge.svg)\n![Linters](https://github.com/volfpeter/fastapi-htmx-tailwind-example/actions/workflows/linters.yml/badge.svg)\n\n# fastapi-htmx-tailwind-example\n\nExample application (IoT dashboard) built with FastAPI, HTMX, TailwindCSS, DaisyUI, Jinja, and MongoDB.\n\n## Status\n\nSince the creation of this project, `fasthx` `1.0` and then `2.0` got released with new features that could simplify this project, for example by removing a few routes with duplicated internal logic. Check the [fasthx releases](https://github.com/volfpeter/fasthx/releases) for more details.\n\nA similar example project with a far more up to date tooling - including the use of newer `FastAPI` and `FastHX` features, as well as `htmy` instead of `jinja` for rendering - can be found [here](https://github.com/volfpeter/lipsum-chat).\n\n## Goal\n\nCreate an extensive example project that integrates the following technologies:\n\n- `FastAPI` as the backend application framework.\n- `HTMX` for frontend interactivity (**no JavaScript**, **no npm** required).\n- _TailwindCSS_ and _DaisyUI_ for styling.\n- `Jinja2` for templating.\n- Async _MongoDB_ with vanilla `Pydantic` for data persistence.\n\nAmong others, the project showcases the following topics:\n\n- `FastAPI` and `HTMX` integration using [`FastHX`](https://volfpeter.github.io/fasthx/).\n- _TailwindCSS_ and _DaisyUI_ integration into a Python and `Jinja2` project without `npm`.\n- Async MongoDB usage with vanilla `Pydantic` and [`motorhead`](https://volfpeter.github.io/motorhead/).\n- Single-command local development with `honcho`.\n- Using JSON instead of form data between the client and the server ([`json-enc` HTMX extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md)), so `Pydantic` models can be used in `FastAPI` routes.\n- Dynamic dialogs with `HTMX` and _DaisyUI_ that are removed from the DOM when closed.\n- Lazy-loaded tables for faster initial page loading.\n- Active search and filtering.\n- Server-sent event streaming with `sse_starlette`, and client-side listening and dynamic UI updates with `HTMX` and its [`sse` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/sse/README.md).\n- Custom server-side `HTMX` triggers using response headers with `FastHX` for automatic UI updates.\n\nNon-goals and caveats:\n\n- Design, styling, and responsiveness (well, dashboard-like applications rarely work on small screens anyway).\n- Testing: the backend code is very basic and uses standard tools, the main thing that should be tested is the frontend and its interactivity, but that's for a `selenium` tutorial project.\n- Full production readiness, see [this section](#Note-on-TailwindCSS-and-DaisyUI) for more information.\n\n## Getting started\n\nThe following developer tools must be available:\n\n- Python (^3.11)\n- Docker\n- Poetry\n- Honcho\n\nThe project's dependencies can be installed with `poetry install`.\n\nThe following `poethepoet` tasks are defined in the project:\n\n- `start`: Starts the FastAPI backend with `uvicorn`.\n- `build-css`: Starts a process that watches `.html` and `.jinja` files and rebuilds the application's TailwindCSS file if necessary.\n- `build-prod-css`: Builds the minified, production TailwindCSS file of the application.\n- `check-format`: Executes the `ruff` format check.\n- `format`: Reformats the codebase with `ruff`.\n- `lint`: Executes the `ruff` linter.\n- `lint-fix`: Fixes linter errors with `ruff`.\n- `mypy`: Executes the `mypy` static code analysis with the project's own configuration.\n- `static-checks`: Executes all static checks (linting, formatting, type checking) in sequence.\n- `test`: Runs the test suite of the project.\n\nThese tasks can be executed with `poetry run poe \u003ctask\u003e`.\n\n## Running the project\n\nJust execute `honcho start` in the root directory. The command will spin up three processes:\n\n- `database`: An empty MongoDB instance (using `docker`) available on the default MongoDB port (`27017`) in the host system. In case you have a MongoDB running on you host system, please change the port mapping and update the database connection string accordingly in `app/database.py`.\n- `css-builder`: The `build-css` task to make sure the tailwind CSS file of the project is always up to date during development.\n- `backend`: The FastAPI application.\n\nThe application will be available at `http://127.0.0.1:10001/` (the port is configurable in `.uvicorn.env`).\n\nWhen started with `honcho start`, the application will create some demo data. To prevent it from doing so, remove the `CREATE_DEMO_DATA=true` part from the `Procfile`'s `backend` process definition.\n\n## Notes\n\n- Demo data creation happens in the application's lifespan to immediately have some data when the project is started. This is not a good practice though for development, because every server restart (code change) will trigger data creation. So if you're working on a project like, move data creation into a separate script or CLI (e.g. with `typer`).\n\n## Development\n\nUse `ruff` for linting and formatting, `mypy` for static code analysis, `pytest` for testing, and `poethepoet` as the task runner.\n\nAs mentioned above, use `honcho start` to start the project, it automatically watches code changes and regenerates or restarts whatever is necessary for a convenient developer experience.\n\n# Contributing\n\nAll contributions and enhancements are welcome.\n\n## Note on TailwindCSS and DaisyUI\n\nWhile TailwindCSS doesn't require `npm`, getting plugins (e.g. DaisyUI) working does. In order to work around this limitation, this project loads the full, minified DaisyUI stylesheet from a CDN, which is quite bad for performance. Production applications should use `npm` and configure TailwindCSS and the DaisyUI plugins as if it was a JavaScript project.\n\n## License - MIT\n\nThe project is open-sourced under the conditions of the [MIT license](https://choosealicense.com/licenses/mit/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolfpeter%2Ffastapi-htmx-tailwind-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvolfpeter%2Ffastapi-htmx-tailwind-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolfpeter%2Ffastapi-htmx-tailwind-example/lists"}