A [Fastify](https://www.fastify.io) plugin supporting [HTMX](https://htmx.org) hypermedia applications.
npm install fastify-htmxA Fastify plugin supporting HTMX
hypermedia applications.
``shell`
npm install fastify-htmx
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.index.html
Vite, Snowpack, Webpack, Rollup, or Parcel), with an file. Theid="app"
index.html must contain an empty element with . Default:path.resolve('vite', 'dist')
.origin
- : The base address of any bundler's development server, so that thehttp://localhost:3001
Fastify server can explicitly allow Ajax requests from there, in the context
of CORS. Default:
.
- The options.dist directory's file content is statically served under /, toindex.html
make the assets accessible that the bundler links to from the .request
- Fastify's object is decorated with a boolean property htmx,innerHTML
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 is injected as
the of the id="app" element in the index.html.reply
- Fastify's object is decorated with an hxRedirect function, whichHX-Redirect
will either set the request.htmx
header in case of
, or call reply.redirect otherwise./push
- A GET request to sends the HX-Push header. Its value is the rest of/push/path
the url; e.g. yields /path`. HTMX will then use the Push API to
set the browser's location to that URL.
An example setup, using Vite as the bundler, and
pug as the template engine, can be found here:
https://github.com/wscherphof/fastify-htmxample.
The frontend complement of fastify-htmx is
dev-htmx, which is applied in the
mentioned example setup as well.