Skip to content

reagent/reframe application skelleton

Notifications You must be signed in to change notification settings

pink-gorilla/webly

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

    • unit test runner
    • routing (via edn config), extensible both in frontend and backend
    • keybindings
    • loading animation
    • notifications and dialogs
  • webly is used in Goldly.

run the ui demo

Clone this repo and run:

cd demo-webly
clj -X:webly:npm-install
clj -X:webly:compile
clj -X:webly:run 

The demo runs a webserver on port 8080.

A simple demo is on Webly Github Pages

features

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

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

webly - how to use:

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

Webly Compile Profiles

Webly profile can be one of the following strings:

  • watch: builds and runs shadow dev server (shadow-cljs watch)
  • compile: builds bundle and output bundle stats
  • release: builds release bundle (for production) no tenx. no source-maps bundle stats
  • 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

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/[email protected]/index.js

unit tests

  • clj bb test-clj
  • cljs: bb test-cljs

static build

  cd demo-webly
  clj -X:webly:compile  or clojure -X:webly:release-adv
  clj -X:webly:static
  cp node_modules/@icon target/static/index_files -r
 ./http-server.sh