microtables/frontend

microtables-frontend

A re-frame ClojureScript single-page application.

Project Overview

• Architecture: Single Page Application (SPA)
• Language: ClojureScript with re-frame
• Dependencies
  • UI framework: re-frame → Reagent → React
• Build tools
  • CLJS compilation, REPL, & hot reload: shadow-cljs
• Development tools
  • Debugging: CLJS DevTools

Directory structure

• /: project config files
• dev/: source files available only during development
  • cljs/user.cljs: symbols for use during development in the ClojureScript REPL
• resources/public/: SPA root directory
  • index.html: SPA home page
  • js/compiled/: compiled CLJS output (not tracked in source control)
• src/cljs/microtables_frontend/: SPA source files

Environment Setup

1. Install JDK 11 or later
2. Install Node.js
3. Clone this repo and open a terminal in the frontend directory
4. Install dependencies: sh npm install

Browser Setup

Disable browser caching when developer tools are open to prevent interference with hot reloading.

Enable custom formatters in Chrome/Chromium DevTools (Settings → Preferences → Console → Enable custom formatters) so that CLJS DevTools can display ClojureScript data readably in the console.

Development

Running the App

npm run dev

When [:app] Build completed appears in the output, browse to http://localhost:8280/.

shadow-cljs will automatically push ClojureScript code changes to your browser on save. See Hot Reload in ClojureScript: Things to avoid for common pitfalls.

Connecting to the browser REPL from your editor

See Shadow CLJS User's Guide: Editor Integration. The running build id is app (:app in a Clojure context).

Connecting to the browser REPL from a terminal

1. Connect to the nREPL (port 8777, configured in shadow-cljs.edn): sh npx shadow-cljs cljs-repl app Or connect with your editor's nREPL client to localhost:8777, then: clj (shadow.cljs.devtools.api/nrepl-select :app)

Debug Logging

The debug? variable in config.cljs defaults to true in dev builds and false in prod builds.

Production

npm run prod

The resources/public/js/compiled directory will contain the compiled app.js and manifest.edn files. The resources/public/ directory is the complete production web front end.