Skip to content

Commit d8b4eea

Browse files
jacekschaejacekschae
committed
Update browser example, bump deps, update docs
1 parent f6c8e71 commit d8b4eea

File tree

6 files changed

+62
-52
lines changed

6 files changed

+62
-52
lines changed

‎README.md

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,53 +46,58 @@ The app is only a very basic skeleton with the most useful development tools con
4646
`shadow-cljs` is configured by the `shadow-cljs.edn` config. It looks like this:
4747

4848
```clojure
49-
{:source-paths
50-
["src"] ;; .cljs files go here
49+
;; shadow-cljs configuration
50+
{:source-paths ; .cljs files go here
51+
["src/dev"
52+
"src/main"
53+
"src/test"]
5154

52-
:dependencies
53-
[] ;; covered later
55+
:dependencies ; covered later
56+
[]
57+
58+
:dev-http ; starts a http dev server on http://localhost:8020 and serves `public`
59+
{8020 "public"}
5460

5561
:builds
56-
{:app {:target :browser
57-
:output-dir "public/js"
58-
:asset-path "/js"
59-
60-
:modules
61-
{:main ;; <- becomes public/js/main.js
62-
{:entries [starter.browser]}}
63-
64-
;; start a development http server on http://localhost:8020
65-
:devtools
66-
{:http-root "public"
67-
:http-port 8020}
68-
}}}
62+
{:app ; build identifier
63+
{:target :browser
64+
:output-dir "public/js"
65+
:asset-path "/js"
66+
67+
:modules
68+
{:main ; becomes public/js/main.js
69+
{:init-fn starter.browser/init}}}}}
70+
6971
```
7072

7173
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).
7274

7375
`: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.
7476

75-
`: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.
76-
77-
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`.
77+
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`.
7878

7979
```html
80-
<!doctype html>
81-
<html>
82-
<head><title>Browser Starter</title></head>
80+
<!DOCTYPE html>
81+
<html lang="en">
82+
<head>
83+
<meta charset="UTF-8">
84+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
85+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
86+
<link rel="stylesheet" href="/css/main.css">
87+
<title>Browser Starter</title>
88+
</head>
8389
<body>
8490
<h1>shadow-cljs - Browser</h1>
8591
<div id="app"></div>
86-
92+
<noscript>You need to enable JavaScript to run this app.</noscript>
8793
<script src="/js/main.js"></script>
88-
<script>starter.browser.init();</script>
8994
</body>
9095
</html>
9196
```
9297

9398
## Live reload
9499

95-
To see the live reload in action you can edit the `src/start/browser.cljs`. Some output will be printed in the browser console.
100+
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.
96101

97102
## REPL
98103

@@ -101,9 +106,9 @@ During development it the REPL is very useful.
101106
From the command line use `npx shadow-cljs cljs-repl app`.
102107

103108
```
104-
shadow-cljs - config .../shadow-cljs.edn version: 2.2.16
109+
shadow-cljs - config .../shadow-cljs.edn
105110
shadow-cljs - connected to server
106-
[2:1]~cljs.user=>
111+
cljs.user=>
107112
```
108113

109114
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.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"devDependencies": {
3-
"shadow-cljs": "^2.3.22"
3+
"shadow-cljs": "^2.11.23"
44
}
55
}

‎public/css/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
body {
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23
color: green;
34
}

‎public/index.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
<!doctype html>
2-
<html>
3-
<head><title>Browser Starter</title></head>
4-
<link rel="stylesheet" href="/css/main.css">
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="/css/main.css">
8+
<title>Browser Starter</title>
9+
</head>
510
<body>
6-
<h1>shadow-cljs - Browser</h1>
7-
<div id="app"></div>
8-
9-
<script src="/js/main.js"></script>
10-
<script>starter.browser.init();</script>
11+
<h1>shadow-cljs - Browser</h1>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="app"></div>
14+
<script src="/js/main.js"></script>
1115
</body>
1216
</html>

‎shadow-cljs.edn

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
;; shadow-cljs configuration
22
{:source-paths
3-
["src"]
3+
["src/dev"
4+
"src/main"
5+
"src/test"]
46

57
:dependencies
68
[]
79

8-
:builds
9-
{:app {:target :browser
10-
:output-dir "public/js"
11-
:asset-path "/js"
10+
:dev-http
11+
{8020 "public"}
1212

13-
:modules
14-
{:main ;; <- becomes public/js/main.js
15-
{:entries [starter.browser]}}
13+
:builds
14+
{:app
15+
{:target :browser
16+
:output-dir "public/js"
17+
:asset-path "/js"
1618

17-
;; start a development http server on http://localhost:8020
18-
:devtools
19-
{:http-root "public"
20-
:http-port 8020}
21-
}}}
19+
:modules
20+
{:main ; becomes public/js/main.js
21+
{:init-fn starter.browser/init}}}}}

‎src/starter/browser.cljs renamed to ‎src/main/starter/browser.cljs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
(defn ^:dev/after-load start []
55
(js/console.log "start"))
66

7-
(defn ^:export init []
7+
(defn init []
88
;; init is called ONCE when the page loads
99
;; this is called in the index.html and must be exported
1010
;; so it is available even in :advanced release builds

0 commit comments

Comments
 (0)