Skip to content

Latest commit

 

History

History
111 lines (72 loc) · 4.48 KB

README.md

File metadata and controls

111 lines (72 loc) · 4.48 KB

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:

  • 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

Server side

Client side

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.