diff --git a/README.md b/README.md
index d6ac5a0..48c87d2 100644
--- a/README.md
+++ b/README.md
@@ -46,53 +46,58 @@ The app is only a very basic skeleton with the most useful development tools con
`shadow-cljs` is configured by the `shadow-cljs.edn` config. It looks like this:
```clojure
-{:source-paths
- ["src"] ;; .cljs files go here
+;; shadow-cljs configuration
+{:source-paths ; .cljs files go here
+ ["src/dev"
+ "src/main"
+ "src/test"]
- :dependencies
- [] ;; covered later
+ :dependencies ; covered later
+ []
+
+ :dev-http ; starts a http dev server on http://localhost:8020 and serves `public`
+ {8020 "public"}
:builds
- {:app {:target :browser
- :output-dir "public/js"
- :asset-path "/js"
+ {:app ; build identifier
+ {:target :browser
+ :output-dir "public/js"
+ :asset-path "/js"
- :modules
- {:main ;; <- becomes public/js/main.js
- {:entries [starter.browser]}}
+ :modules
+ {:main ; becomes public/js/main.js
+ {:init-fn starter.browser/init}}}}}
- ;; 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`.
+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/main/start/browser.cljs`.
```html
-
-
-Browser Starter
+
+
+
+
+
+
+
+ Browser Starter
+
shadow-cljs - Browser
-
+
-
```
## Live reload
-To see the live reload in action you can edit the `src/start/browser.cljs`. Some output will be printed in the browser console.
+To see the live reload in action you can edit the `src/main/start/browser.cljs`. Some output will be printed in the browser console.
## REPL
@@ -101,9 +106,9 @@ 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 - config .../shadow-cljs.edn
shadow-cljs - connected to server
-[2:1]~cljs.user=>
+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.
diff --git a/package.json b/package.json
index 4f06502..46ec789 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
"devDependencies": {
- "shadow-cljs": "^2.3.22"
+ "shadow-cljs": "^2.11.23"
}
}
diff --git a/public/css/main.css b/public/css/main.css
index cdbe96c..a87beeb 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,3 +1,4 @@
body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: green;
}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index dd8968f..a4c3fd7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,12 +1,16 @@
-
-
-Browser Starter
-
+
+
+
+
+
+
+
+ Browser Starter
+
-
shadow-cljs - Browser
-
-
-
-
+
shadow-cljs - Browser
+
+
+
\ No newline at end of file
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
index eb87317..e45abae 100644
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@@ -1,21 +1,21 @@
;; shadow-cljs configuration
{:source-paths
- ["src"]
+ ["src/dev"
+ "src/main"
+ "src/test"]
:dependencies
[]
+ :dev-http
+ {8020 "public"}
+
:builds
- {:app {:target :browser
- :output-dir "public/js"
- :asset-path "/js"
+ {:app
+ {:target :browser
+ :output-dir "public/js"
+ :asset-path "/js"
- :modules
- {:main ;; <- becomes public/js/main.js
- {:entries [starter.browser]}}
-
- ;; start a development http server on http://localhost:8020
- :devtools
- {:http-root "public"
- :http-port 8020}
- }}}
+ :modules
+ {:main ; becomes public/js/main.js
+ {:init-fn starter.browser/init}}}}}
diff --git a/src/starter/browser.cljs b/src/main/starter/browser.cljs
similarity index 95%
rename from src/starter/browser.cljs
rename to src/main/starter/browser.cljs
index 096e969..43f1762 100644
--- a/src/starter/browser.cljs
+++ b/src/main/starter/browser.cljs
@@ -4,7 +4,7 @@
(defn ^:dev/after-load start []
(js/console.log "start"))
-(defn ^:export init []
+(defn init []
;; init is called ONCE when the page loads
;; this is called in the index.html and must be exported
;; so it is available even in :advanced release builds