You can pick and choose what "extras" you'd like included into the scaffold - "extras" like libraries to do routing, debugging and CSS.
You'll need to install
Leiningen (a build tool) by following these instructions.
You'll also need Node.js.
The base template includes:
To create an application with just the base template, use this commandline:
$ lein new re-frame <app-name>
When using this command, you'll need to substitute in your own
<app-name> - perhaps
Troubleshooting note: for
cljs. That name will confuse the compiler (long story) and you will later see errors like
cljs.core.init is not a function.
The following "extras" can be nominated on the commandline when you create the template:
To add an
extra to the base template, append its name to the commandline, with a leading
+. Here's an example of adding
lein new re-frame <app-name> +re-com
Note: it is
+re-com, not just
Any combination of
extras can be added at once:
lein new re-frame <app-name> +garden +re-com +routes +test +10x
Note: to assist debugging, you'll want to include either
Refer to the shadow-cljs Emacs / CIDER documentation.
dir-local.el file is created by this template.
Calva has built-in support for
shadow-cljs projects (that's why there is no
+calva option for creating this project).
shadow-cljsproject and ask for which build to compile.
:appis the only configured build, but the VS Code menu for this is a bit strange so make sure the
:appcheckbox is really ticked before proceeding.
Ctrl+Cin this pane will kill your app and free up all resources it has allocated.
src/<your-project-name>and issue Calva: Load Current File and Dependencies.
(js/alert "Hello from Calva")(
ctrl+enterare your friends).
See https://calva.io for more on how to use Calva.
npm install npm run watch
npm install npx shadow-cljs watch app browser-test karma-test
Wait a bit, perhaps 20 seconds, keeping an eye out for a sign the compile has finished, then browse to http://localhost:8280.
To see the other available
shadow-cljs commands run:
npx shadow-cljs --help
So, you now have the application running.
Before you start developing, you should tweak two settings within your
devtools. These are one-time actions (for each browser and laptop you use).
I'll assume Chrome for the purposes of further explanation:
Ctrl-Shift-i(actually there's a variety of ways)
re-frame-10x for debugging your app:
Ctrl-Hand you should see the
re-frame-10xpanel appear on the right side of the window
Sometimes achieving Step 1 on a really simple app - one without widgets - can be fiddly,
because the browser itself hogs "input focus" and grabs all the keystrokes (like
Ctrl-H) which don't
then make it through to your app. You may need to be determined and creative with Step 1.
I have every confidence in you.
If you now edit files, shadow-clj will automatically recompile your changes and "hot load" them into your running app, without your app needing to be re-started. The resulting fast, iterative workflow tends to make you very productive, and is cherished by those lucky enough to experience it.
Start by editing this file:
In the namespace app-name.config, there is a var called
debug?, which defaults to
true in the
dev build, and false in the
If, for example, you wrap your
printlns with a
when block as shown below,
then you will get logs printed to the browser's console for the
dev build and
(when config/debug? (println "dev mode"))
Run your tests
npm install npm run watch
And in another terminal:
After a push, head to the actions section of GitHub repo to see the pipeline processing.
npm run release
Your new application is built by a tool chain controlled by shadow-cljs (a modern CLJS compiler).
There are two files of interest:
shadow-cljs.edn- edit this file if you want to add Clojure and ClojureScript dependency as you would for a normal Leiningen project.
This template does NOT include a backend. You may want to look at the following for backend options:
Looking for more re-frame inspiration, templates or example applications? See the external resources docs page.
Contributions are welcomed! To add a new profile, this is what I'd recommend:
lein new re-frame <app-name> +<profile-name>
The MIT License (MIT) Copyright © 2015-2018 Matthew Jaoudi Copyright © 2015 Dylan Paris Copyright © 2015 Michael Thompson Copyright © 2015 Markku Rontu Copyright © 2016 Daniel Compton Copyright © 2019-2021 Isaac Johnston Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.