Home

Awesome

Inertia Clojure

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

The latest versions on Clojars

Clojars Project

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:

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

Server side

Client side

Features

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

Todo:

License

Copyright © 2021 Michaël Salihi / Prestance

Distributed under the Eclipse Public License version 1.0.