Liking cljdoc? Tell your friends :D

Webly GitHub Actions status |pink-gorilla/weblyClojars Project

End Users this project is not for you.

  • With webly you can build clj/cljs web apps (server: clj, frontend: reagent/reframe)

  • webly uses great tools such as: reagent, reframe, tailwind-css, shadow-cljs

  • webly brings a things that can be hard to configure (or repetitive) when you develop a web app such as:

    • ten-x developer console
    • configuration management
    • unit test runner
    • routing (via edn config), extensible both in frontend and backend
    • keybindings
    • loading animation
    • notifications and dialogs
    • api endpoints
    • oauth2
    • google analytics (can be disabled)
  • webly is used in Goldly and Notebook.

run the ui demo

Clone this repo and run:

./scripts/prep-res.sh
clojure -X:webly     ; The demo runs a webserver on port 8000. "shadow-cljs watch" mode

The source code of the demo is in profiles/demo.

If this was your app, after you are finished developing it, you might compile it:

clojure -X:webly :profile '"compile"' ; Build cljs bundle, and output bundle stats
clojure -X:webly :profile '"jetty"'   ; Serves website from precompiled bundle.
clojure -X:webly :profile '"release"' ; Build cljs bundle, output bundle stats. no tenx. no source-maps
clojure -X:webly :profile '"jetty"'   ; Serves website from precompiled bundle.

features:

10x / tracing

  • are included in watch / compile
  • keybinding [alt+g t] to open 10x console
  • touse trace-fn see:

Bidi Routing

Bidi is not as highly starred as compojure, but it has important benefits:

  • It is isomorphic (clj and cljs) (forget compojure AND secretary)
  • It has a clear separation of concerns with handlers (both for clj (ring-handler) and cljs (pushy)
  • It is bi-directional; this allows making links!
  • It does not use macros, this means routes can be easily tested, transformed, sent between client-server, stored, modified.
  • No linting errors due to macros.
  • Easy testing of route definitions, and handler results (including wrapping routes)

web app

  • dynamically generated app html that works with csrf
  • ring middleware for api calls
  • routing with bidi (this allows to have links within the web-app)
  • this means a registry for ring-handlers and reagent-views
  • oauth2 with github

webly build

  • this feature is available for apps that use webly
  • compiles/watches via shadow-cljs
  • does not require shadow-cljs.edn
  • bundle-size report at compile time

oauth2 (separate readme)

webly - how to use:

To start webly you have to pass it two parameter: profile and config

Webly profile can be one of the following strings:

  • watch: builds with ten-x and runs shadow dev server
  • compile: builds bundle
  • release: builds release bundle (for production)
  • jetty: runs app, with bundle compiled via compile or release
  • ci: builds bundle for unit tests
  • npm-install: just installs npm dependencies (based on deps.cljs)

Webly config:

  • is a clojure datastructure
  • is used in backend (clj) and frontend (cljs)
  • can be passed as a string (link to a edn file or resource) - mandatory if webly is used in a leiningen project
  • can be passed as a clojure datastructure - for quicker configuration in deps.edn projects.

npm dependencies

  • keep your npm depeendencies only in deps.cljs
  • do NOT create a package.json file!
  • package.json will be auto generated
  • run lein webly npm-install and npm outdated to see if there are newer versions available

Add npm dependencies that you want to use into a clojure deps.cljs

{:npm-deps
 {; font awesome
  "@fortawesome/fontawesome-free" "^5.13.0"

Sometimes github repo and npm module do not match. Check this to see what goes on: https://unpkg.com/@ricokahler/oauth2-popup-flow@2.0.0-alpha.1/index.js

unit tests

  • clj clojure -X:test
  • cljs: ./scripts/test-cljs.sh

Can you improve this documentation?Edit on GitHub

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close