Combining
- https://github.com/shadow-cljs/quickstart-browser
- https://github.com/Day8/re-frame/tree/master/examples/simple
bidi
,pushy
No-hashes bidirectional routing by J. Pablo Fernández - https://pupeno.com/2015/08/26/no-hashes-bidirectional-routing-in-re-frame-with-bidi-and-pushy/ (and views from re-frame templatelein new re-frame my-app +routes
)
This repository only shows a basic example of how to get a basic Browser build.
Please refer to the full User Guide for more information.
git clone [email protected]:quangv/shadow-re-frame-simple-example.git
cd shadow-re-frame-simple-example
yarn ; or npm install
npx shadow-cljs server
This runs the shadow-cljs
server process which all following commands will talk to. Just leave it running and open a new terminal to continue.
The first startup takes a bit of time since it has to download all the dependencies and do some prep work. Once this is running we can get started.
npx shadow-cljs watch app
This will begin the compilation of the configured :app
build and re-compile whenever you change a file.
When you see a "Build completed." message your build is ready to be used.
[:app] Build completed. (23 files, 4 compiled, 0 warnings, 7.41s)
You can now then open http://localhost:8020.
The app is only a very basic skeleton with the most useful development tools configured.
shadow-cljs
is configured by the shadow-cljs.edn
config. It looks like this:
{:source-paths
["src"] ;; .cljs files go here
:dependencies
[] ;; covered later
:builds
{:app {:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules
{:main ;; <- becomes public/js/main.js
{:entries [simple.core]}}
;; start a development http server on http://localhost:8020
:devtools
{:http-root "public"
:http-port 8020}
}}}
It defines the :app
build with the :target
set to :browser
. All output will be written to public/js
which is a path relative to the project root (ie. the directory the shadow-cljs.edn
config is in).
:modules
defines the how the output should be bundled together. For now we just want one file. The :main
module will be written to public/js/main.js
, it will include the code from the :entries
and all their dependencies.
:devtools
configures some useful development things. The http://localhost:8020
server we used earlier is controlled by the :http-port
and serves the :http-root
directory.
The last part is the actual index.html
that is loaded when you open http://localhost:8020
. It loads the generated /js/main.js
and then calls start.browser.init
which we defined in the src/start/browser.cljs
.
<!doctype html>
<html>
<head><title>Browser Starter</title></head>
<body>
<h1>shadow-cljs - Browser</h1>
<div id="app"></div>
<script src="/js/main.js"></script>
<script>simple.core.init();</script>
</body>
</html>
To see the live reload in action you can edit the src/start/browser.cljs
. Some output will be printed in the browser console.
During development it the REPL is very useful.
From the command line use npx shadow-cljs cljs-repl app
.
shadow-cljs - config .../shadow-cljs.edn version: 2.2.16
shadow-cljs - connected to server
[2:1]~cljs.user=>
This can now be used to eval code in the browser (assuming you still have it open). Try (js/alert "Hi.")
and take it from there. You might want to use rlwrap npx shadow-cljs cljs-repl app
if you intend to type a lot here.
You can exit the REPL by either CTRL+C
or typing :repl/quit
.
The watch
process we started is all about development. It injects the code required for the REPL and the all other devtools but we do not want any of that when putting the code into "production" (ie. making it available publicly).
The release
action will remove all development code and run the code through the Closure Compiler to produce a minified main.js
file. Since that will overwrite the file created by the watch
we first need to stop that.
Use CTRL+C
to stop the watch
process and instead run npx shadow-cljs release app
.
When done you can open http://localhost:8020
and see the release
build in action. At this point you would usually copy the public
directory to the "production" web server.
Note that in the default config we overwrote the public/js/main.js
created by the watch
. You can also configure a different path to use for release builds but writing the output to the same file means we do not have to change the index.html
and test everything as is.
./run build ; Compiles code, put in `./dist` folder.