# HTMXX v5 This is a total rewrite since v4 and not compatible. Going forward; HTMXX will be maintaining this Typescript approach instead of the now deprecated specialist `html` files from pervious versions. ## Back to the future of web development A zero config full-stack web framework in Typescript using [HTMX](https://htmx.org) and a routing structure. Reactive and responsive web development with proper [REST](https://htmx.org/essays/rest-explained/) endpoints (i.e. returning HTML not JSON) And no need for any client-side Javascript. Use [Hyperscript](https://hyperscript.org/) for reactivity. ![todomvc htmx demo gif](todo-demo.gif) ## How to install ``` npm i htmxx ``` Then just point it at a the directory that contains your `routes` folder. This will contain your web-app file structure used to generate a resource of all the endpoints. This resource can then be used by your server (e.g. Lambda function or ExpressJS) to render the endpoint. # How to use ## Express server ``` const { Htmxx } = require('htmxx'); const htmxx = new Htmxx(process.cwd()); htmxx.startServer(); ``` ## Routes folder The web-app just consists of a routes folder containing the application routing structure as `Typescript` files, that define the server endpoints. e.g. - `src/routes/index.ts` defines a `GET` endpoint at `/` - `src/routes/customers.post.ts` defines a `POST` endpoint at `/customers` ## Special files Any Typescript files will be treated as an endpoint unless they begin with an underscore `_` (e.g. `_layout.ts`). `*.ts` is a `GET`, other methods (`POST`, `PUT`, `PATCH`, `DELETE`) are supported in by adding the lowercase prefix to the Typescript extension e.g. `*.post.ts` is a `POST`. Special files `_layout.ts` and `_error.ts` can be defined anywhere within our routes structure, these serve the following. purposes: ### Layout files These files allow nesting of content in your routes structure allowing layouts to be created at any level of the routing tree. They must contain a `${children}` instance inside the HTML template to tell the framework where the content is to be rendered. We add the import for HTMX in the root `_layout.ts` file. e.g. ```ts import type { HtmxxRequest } from 'htmxx'; export default (request: HtmxxRequest, children: string) => { return /*html*/ ` HTMXX Demo ${children} `; }; ``` If we navigate to `/`, the `index.ts` will be rendered in the body. ### Error files These files are displayed if an error occurs in the app. An `_error.ts` in the same directory as the error occured or in a directory above will be rendered in the case of an error. ### parameterised filenames In many routing frameworks you have the ability to define variable path names e.g. `customers/:customerId` so that when a user navigates to `customers/56` the code can retrieve the `customerId` as 56 and load the correct data to display. This framework follows the same principle and it is defined by the folder and file structure. If we create a folder structure `customers/[customerId]` we can place an `index.ts` in the `customers` folder and another `index.ts` in the `[customerId]` folder, or we could have a file called `[customerId].ts` in the `customers` folder. The `