# fastify-htmx

> A [Fastify](https://www.fastify.io) plugin supporting [HTMX](https://htmx.org) hypermedia applications.

Latest version **0.8.4** (published 2022-01-27) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install fastify-htmx
pnpm add fastify-htmx
yarn add fastify-htmx
bun add fastify-htmx
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.4 |
| Published | 2022-01-27 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Wouter Scherphof |
| Maintainers | wscherphof |

## Links

- npm: https://www.npmjs.com/package/fastify-htmx
- Repository: https://github.com/wscherphof/fastify-htmx
- Homepage: https://github.com/wscherphof/fastify-htmx#readme
- Issues: https://github.com/wscherphof/fastify-htmx/issues
- npm.io page: https://npm.io/package/fastify-htmx

## Dependencies (4)

- [fastify-cors](https://npm.io/package/fastify-cors.md) ^6.0.2
- [fastify-plugin](https://npm.io/package/fastify-plugin.md) ^3.0.0
- [fastify-static](https://npm.io/package/fastify-static.md) ^4.5.0
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^5.2.0

## Recent versions

- 0.8.4 (latest) — 2022-01-27
- 0.8.3 — 2022-01-27
- 0.8.2 — 2022-01-21
- 0.8.1 — 2022-01-20
- 0.8.0 — 2022-01-19
- 0.7.3 — 2022-01-19
- 0.7.2 — 2022-01-19
- 0.7.1 — 2022-01-19
- 0.7.0 — 2022-01-18
- 0.6.0 — 2022-01-18
- 0.5.0 — 2022-01-18
- 0.4.0 — 2022-01-18
- 0.3.0 — 2022-01-17
- 0.2.0 — 2022-01-16
- 0.1.1 — 2022-01-15
- … 1 more at https://npm.io/package/fastify-htmx/versions

## README

# fastify-htmx

A [Fastify](https://www.fastify.io) plugin supporting [HTMX](https://htmx.org)
hypermedia applications.

## Install

```shell
npm install fastify-htmx
```

## Register

In your app.js, register the plugin:

```js
fastify.register(require('fastify-htmx'));
```

Optional options:

- `dist`: The path, possibly containing the build output of a "bundler" (e.g.
  Vite, Snowpack, Webpack, Rollup, or Parcel), with an `index.html` file. The
  index.html must contain an empty element with `id="app"`. Default:
  `path.resolve('vite', 'dist')`.
- `origin`: The base address of any bundler's development server, so that the
  Fastify server can explicitly allow Ajax requests from there, in the context
  of [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Default:
  `http://localhost:3001`.

## Features

- The `options.dist` directory's file content is statically served under `/`, to
  make the assets accessible that the bundler links to from the `index.html`.
- Fastify's `request` object is decorated with a boolean property `htmx`,
  indicating whether the request is an Ajax request for partial content, or an
  initial browser request for a complete HTML document.
- In case of a full document request, the payload rendered by your Fastify
  [route](https://www.fastify.io/docs/latest/Reference/Routes/) is injected as
  the `innerHTML` of the `id="app"` element in the `index.html`.
- Fastify's `reply` object is decorated with an `hxRedirect` function, which
  will either set the `HX-Redirect`
  [header](https://htmx.org/reference/#response_headers) in case of
  `request.htmx`, or call `reply.redirect` otherwise.
- A GET request to `/push` sends the `HX-Push` header. Its value is the rest of
  the url; e.g. `/push/path` yields `/path`. HTMX will then use the Push API to
  set the browser's location to that URL.

## Example

An example setup, using [Vite](https://vitejs.dev/) as the bundler, and
[pug](https://pugjs.org) as the template engine, can be found here:
https://github.com/wscherphof/fastify-htmxample.

## dev-htmx

The frontend complement of fastify-htmx is
[dev-htmx](https://github.com/wscherphof/dev-htmx), which is applied in the
mentioned example setup as well.

---
_Source: https://npm.io/package/fastify-htmx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._