RAD client setup initializes a Fulcro application with RAD-specific features: attribute registry, UI rendering controls, HTML5 routing, and date/time timezone configuration. The setup includes creating the app instance, installing UI controls (form/report renderers), and mounting the root component.
From DevelopersGuide.adoc:826-828:
"Fulcro RAD can be used with any Fulcro application. The only global configuration that is required is to initialize the attribute registry, but the more features you use, the more you'll want to configure. RAD applications that use HTML5 routing and UI generation, for example, will also need to configure those."
Essential Steps:
rad-app/fulcro-rad-appFrom DevelopersGuide.adoc:830-867:
(ns com.example.client
(:require
[com.example.ui :refer [Root]]
[com.fulcrologic.fulcro.application :as app]
[com.fulcrologic.rad.application :as rad-app]
[com.fulcrologic.rad.rendering.semantic-ui.semantic-ui-controls :as sui]
[com.fulcrologic.fulcro.algorithms.timbre-support :refer [console-appender prefix-output-fn]]
[taoensso.timbre :as log]
[com.fulcrologic.rad.type-support.date-time :as datetime]
[com.fulcrologic.rad.routing.html5-history :refer [html5-history]]
[com.fulcrologic.rad.routing.history :as history]))
(defonce app
(rad-app/fulcro-rad-app
{:client-did-mount (fn [app]
;; Adds improved logging support to js console
(log/merge-config! {:output-fn prefix-output-fn
:appenders {:console (console-appender)}}))}))
(defn refresh []
;; Hot code reload of installed controls
(log/info "Reinstalling controls")
(rad-app/install-ui-controls! app sui/all-controls)
(app/mount! app Root "app"))
(defn init []
(log/info "Starting App")
;; Set default timezone for date/time support
(datetime/set-timezone! "America/Los_Angeles")
;; Optional HTML5 history support
(history/install-route-history! app (html5-history))
;; Install UI plugin that can auto-render forms/reports
(rad-app/install-ui-controls! app sui/all-controls)
(app/mount! app Root "app"))
Purpose: Creates a Fulcro app instance with RAD-specific defaults.
Signature: (rad-app/fulcro-rad-app options)
Options: Same as app/fulcro-app, including:
:client-did-mount - Callback after first render:remote - Customize HTTP remote (defaults to /api):props-middleware - App-level props processingWhat It Does:
From DevelopersGuide.adoc:855, 865:
Purpose: Installs rendering controls for auto-rendering forms and reports.
Signature: (rad-app/install-ui-controls! app controls-map)
Parameters:
app - The Fulcro app instancecontrols-map - Map of control definitions from rendering pluginExample:
(rad-app/install-ui-controls! app sui/all-controls)
Rendering Plugins:
com.fulcrologic.rad.rendering.semantic-ui - Semantic UI controlsWhat Controls Provide:
From DevelopersGuide.adoc:860-861:
Purpose: Sets the default timezone for date/time field rendering and parsing.
Signature: (datetime/set-timezone! tz-string)
Example:
(datetime/set-timezone! "America/Los_Angeles")
(datetime/set-timezone! "UTC")
(datetime/set-timezone! "Europe/London")
Uses IANA timezone database identifiers.
From DevelopersGuide.adoc:862-863:
Purpose: Installs HTML5 history routing (optional).
Signature: (history/install-route-history! app history-impl)
Example:
(history/install-route-history! app (html5-history))
Enables:
Without History: Still works, but routing is managed via component state only (no URL changes).
Purpose: Renders the root component into a DOM element.
Signature: (app/mount! app RootComponent element-id)
Example:
(app/mount! app Root "app")
Mounts Root into <div id="app"></div>.
From DevelopersGuide.adoc:1130-1181:
A minimal RAD client needs:
From DevelopersGuide.adoc:1133-1138:
"The bare minimal client will have:
- A Root UI component
- (optional) Some kind of "landing" page (default route)
- One or more forms/reports.
- The Client initialization (shown earlier)."
(ns com.example.ui
(:require
[com.example.model.account :as acct]
[com.fulcrologic.fulcro.components :as comp :refer [defsc]]
[com.fulcrologic.fulcro.dom :as dom :refer [div]]
[com.fulcrologic.fulcro.routing.dynamic-routing :refer [defrouter]]
[com.fulcrologic.rad.authorization :as auth]
[com.fulcrologic.rad.form-options :as fo]
[com.fulcrologic.rad.form :as form]))
(form/defsc-form AccountForm [this props]
{fo/id acct/id
fo/attributes [acct/name]
fo/route-prefix "account"})
(defsc LandingPage [this props]
{:query ['*]
:ident (fn [] [:component/id ::LandingPage])
:initial-state {}
:route-segment ["landing-page"]}
(div
(dom/button {:onClick (fn [] (form/create! this AccountForm))}
"Create a New Account")))
(defrouter MainRouter [this props]
{:router-targets [LandingPage AccountForm]})
(def ui-main-router (comp/factory MainRouter))
(defsc Root [this {:keys [router]}]
{:query [{:router (comp/get-query MainRouter)}]
:initial-state {:router {}}}
(div :.ui.container.segment
(ui-main-router router)))
From DevelopersGuide.adoc:1180-1181:
"The landing page in this example includes a sample button to create a new account, but of course you'll also need to add some seed data to your database, wrap things with some authorization, etc."
(defn ^:after-load refresh
"Called by shadow-cljs after hot code reload"
[]
(log/info "Hot reload - reinstalling controls")
(rad-app/install-ui-controls! app sui/all-controls)
(app/mount! app Root "app"))
(defonce app
(rad-app/fulcro-rad-app
{:remotes {:remote (http/fulcro-http-remote {:url "/api"})
:analytics (http/fulcro-http-remote {:url "/analytics"})}}))
(ns com.example.controls
(:require
[com.fulcrologic.rad.rendering.semantic-ui.semantic-ui-controls :as sui]))
(def my-controls
(-> sui/all-controls
(assoc :text-input my-custom-text-input)
(assoc-in [:report-layout :my-layout] my-custom-report-layout)))
(defn init []
(rad-app/install-ui-controls! app my-controls)
(app/mount! app Root "app"))
(ns com.example.ui
(:require
[com.fulcrologic.rad.authorization :as auth]))
(defsc Root [this {::auth/keys [authorization]
:keys [router]}]
{:query [{::auth/authorization (comp/get-query auth/Authorization)}
{:router (comp/get-query MainRouter)}]
:initial-state {::auth/authorization {}
:router {}}}
(if (auth/authorized? authorization)
(div (ui-main-router router))
(div "Please log in")))
(defn init []
(log/info "Starting App")
(datetime/set-timezone! "UTC")
;; Only install history in production
(when (= js/goog.DEBUG false)
(history/install-route-history! app (html5-history)))
(rad-app/install-ui-controls! app sui/all-controls)
(app/mount! app Root "app"))
From DevelopersGuide.adoc:846:
Use rad-app/fulcro-rad-app, NOT app/fulcro-app. The RAD version sets up the attribute registry and RAD-specific
defaults.
;; Correct order:
(rad-app/install-ui-controls! app sui/all-controls)
(app/mount! app Root "app")
;; Wrong: mount before controls
(app/mount! app Root "app")
(rad-app/install-ui-controls! app sui/all-controls) ; Too late!
datetime/set-timezone! affects all date/time rendering in the app. Set it once at startup.
HTML5 history is not required. Without it, routing still works via component state, but:
From DevelopersGuide.adoc:1174:
{:query [{:router (comp/get-query MainRouter)}]}
The router must be in the root query for routing to work.
From DevelopersGuide.adoc:846:
(defonce app ...)
Use defonce to prevent recreating the app on hot reload. This preserves app state during development.
Without installing controls, forms and reports won't auto-render. You'll need to manually render everything or install a rendering plugin.
From DevelopersGuide.adoc:869-870:
"Additional RAD plugins and templates will include additional features, and you should see the Fulcro and Ring documentation for setting up customizations to things like sessions, cookies, security, CSRF, etc."
Common Additions:
defonce app (rad-app/fulcro-rad-app {...}))datetime/set-timezone!)history/install-route-history!)rad-app/install-ui-controls!)app/mount!)/api endpoint that the client talks toform/create!, form/edit! from UICan you improve this documentation?Edit on GitHub
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |