Example Client

Example Client

The example client demonstrates all the functionality of Reflet with two minimal components:

1. An audio player
2. A hierarchical form workflow

The example client also has the debugger enabled to demonstrate debugger functionality.

To start the client you must first have a working Clojure installation, as well as npm installed. Then, from the terminal:

npm install; clojure -M:cljs/dev:cljs/client watch dev

This will install the client npm dependencies, build the client JS target, start a code watcher, and load an HTTP server at localhost:8021. Assuming there was no port conflict (in which case shadow-cljs would have printed an alternate port to use), open localhost:8021 in the browser to load the example client.

Safari

The example client works fine on Chrome and Firefox, but Safari's specific approach to auto-play blocking of audio content will result in an error.

If you'd like to try the example client on Safari, you can enable auto-play selectively for localhost in Safari's preferences. Under the Websites tab, and the Auto-Play section, ensure that the localhost website has Allow All Auto-Play set.

Development on Reflet

The debugger SASS is compiled to CSS and bundled in the reflet.css.bundled/css var as part of the library.

If you are developing on Reflet, specifically the debugger, and you want to see live changes as you edit SASS, you will probably want to start both the SASS watcher, which compiles SASS to CSS targets, and the CSS bundler, which bundles the generated CSS targets into the debugger compiled source:

clojure -X:sass/target:css/bundle

However, take care when you have the CSS bundler running. If you attempt something like an interactive git rebase, the bundler might detect changes to the SASS, and automatically inject them into reflet.css.bundle/css, thereby creating unnecessary conflicts. First stop the bundler before proceeding with a rebase.

---

Next: General Development Tips

Home: Home