prestancedesign / inertia-clojure

A Clojure adapter for Inertia.js

Inertia Clojure

Clojure Middleware adapter for Inertia.js to build single-page apps, without building an API.

The latest versions on Clojars

Introduction

Inertia is a new approach to building classic server-driven web apps. From their own web page:

Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.

Inertia requires an adapter for each backend framework.

For Clojure there is no de facto web framework, so I went with a Ring middleware who shape up the request and response to meet the Inertia.js protocol.

Install

For deps.edn:

com.github.prestancedesign/inertia-clojure {:mvn/version "0.2.5"}

For project.clj:

[com.github.prestancedesign/inertia-clojure "0.2.5"]

Usage

Inertia-clojure contains a standard Ring middleware wrap-inertia that you can use with routing libraries like Reitit, Compojure, etc. The middleware must be the last item in your web middleware chain.

It expects 3 arguments:

• the app handler
• template: a function that recieves data-page arg - a correctly encoded string of the Inertia page object. The function should return an HTML string, so the template lib is up to you.
• version: your current asset version https://inertiajs.com/asset-versioning

Note: In your HTML template function make sure to always include the data-page string in the attribute of the HTML node you want to render your JavaScript app in. For more information on how Inertia works read the protocol on the Inertia website https://inertiajs.com/the-protocol.

Example

(require '[inertia.middleware :as inertia])
;; ... Another required lib (compojure, httpkit, etc)

(def asset-version "1")

;; Create html template with library of your choice, here Hiccup
(defn template [data-page]
  (page/html5
   [:head
    [:meta {:charset "utf-8"}]
    [:title "Inertia + Clojure example"]]
   [:body
    [:div {:id "app"
           :data-page data-page}] ; The Inertia JSON page object
    (page/include-js "/js/app.js")])) ; Include your Reagent, React, Vue or Svelte SPA

(defroutes routes
  (GET "/" [] (inertia/render :index {:title "Hello World!"})) ; Use the Inertia render helper to return formatted response
  (GET "/demo" [] (inertia/render :demo {:title "Clojure + Inertia"}))
  (route/resources "/"))

(def app (inertia/wrap-inertia routes template asset-version)) ; Wrap your handler with the Inertia middleware

(http/run-server app {:port 3000})

Project examples

Full stack

• Ping CRM: port of the official Inertia demo to Clojure Ring, Reitit, Integrant and next.jdbc
• Usermanager Integrant + Reitit stack: Single page application in Clojure Ring, Reitit + Reagent/Inertia.js
• Usermanager Component + Compojure stack: Single Page App demo in Clojure, Ring, Compojure + Reagent/Inertia.js
• Inert - Inertia + Clojure + Svelte: Single Page App demo in Clojure, Reitit-Ring, Svelte/Inertia.js and Vite. You can check out the live website here - Inert.

Server side

• Reitit / Selmer: An example with Reitit routing and Selmer template lib
• Compojure / Hiccup: An example with Compojure routing and Hiccup for the template

Client side

• Reagent / Shadow-CLJS + Inertia.js

Features

Features of the official server-side adapters are still in progress.

Todo:

• Shared data
• Partial reloads
• Assets versionning
• Validation error props
• Lazy loaded props
• Root template data

License

Copyright © 2021 Michaël Salihi / Prestance

Distributed under the Eclipse Public License version 1.0.