├── .gitignore
├── README.md
├── deps.edn
└── src
    └── clj
        └── new
            ├── create_reagent_app.clj
            └── create_reagent_app
                ├── .gitignore
                ├── README.md
                ├── core.cljs
                ├── core_test.cljs
                ├── deps.edn
                ├── dev.cljs.edn
                ├── index.html
                ├── package.json
                ├── prod.cljs.edn
                └── style.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # mac
 2 | .DS_STORE
 3 | 
 4 | # clojure
 5 | .lsp
 6 | .cpcache
 7 | .clj-kondo
 8 | 
 9 | # personal
10 | build-journal.md
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Create Reagent App
  2 | 
  3 | > [!IMPORTANT]
  4 | > This project is now inactive.  See [templates](https://github.com/athomasoriginal/templates).
  5 | 
  6 | Setup a ClojureScript/Reagent app in one command.  This is meant to be used like
  7 | Create React App but with much less opinion and no need to "eject" from anything.
  8 | 
  9 | Want to understand the decisions made for this project?  Read [Start a ClojureScript App from Scratch]
 10 | 
 11 | - [Housekeeping]
 12 | - [Quickstart]
 13 | - [Pro Tips]
 14 |   - [Add a Global Alias]
 15 |   - [Using The Global Alias]
 16 |   - [Keeping Aliases Updated]
 17 | - [Notes]
 18 | 
 19 | ## Housekeeping
 20 | 
 21 | Install the following before moving onto the `Quickstart`
 22 | 
 23 | - [Install Java]
 24 | - [Install Clojure]
 25 | 
 26 | **Note:** This guides assumes you're using a minimum of Clojure CLI Tools version `1.10.1.697` or later!  This is why you see see newer args passed to `clj`. (At the time of this writing anyways October 15, 2020).  Not sure which version you have?  Run the following command:
 27 | 
 28 | ```bash
 29 | clj -h
 30 | ```
 31 | 
 32 | The first lines of the output will look _something_ like this:
 33 | 
 34 | ```bash
 35 | ➜ clj -h
 36 | Version: 1.10.2.796
 37 | # ..
 38 | ```
 39 | 
 40 | ## QuickStart
 41 | 
 42 | - Move to a directory where you want your ClojureScript app to live
 43 | 
 44 | - Install `clj-new` as a clojure tool
 45 |   ```bash
 46 |   clojure -Ttools install com.github.seancorfield/clj-new \
 47 |     '{:git/tag "v1.2.399"}' :as clj-new
 48 |   ```
 49 | - Create app using `create-reagent-app`
 50 | 
 51 |   ```bash
 52 |   clojure -Tclj-new create \
 53 |     :template '"https://github.com/athomasoriginal/create-reagent-app@9765fdd8020887ed5caad49729d42ab9643a0793"' \
 54 |     :name nike/nike-app
 55 |   ```
 56 | 
 57 | The format of `:name` is `<org-name>/<app-name>`.  So in this case, if you were working for `nike`, you `org-name` would be `nike` and your `app-name` would be `fitness-app`.  See the [official clj-new docs] for more info on the args.
 58 | 
 59 | ```bash
 60 | fitness-app
 61 | ├── README.md
 62 | ├── deps.edn
 63 | ├── dev.cljs.edn
 64 | ├── resources
 65 | │   └── public
 66 | │       ├── index.html
 67 | │       └── style.css
 68 | ├── src
 69 | │   └── nike
 70 | │       └── fitness_app.cljs
 71 | └── test
 72 |     └── nike
 73 |         └── fitness_app_test.cljs
 74 | ```
 75 | 
 76 | - Move into `fitness-app`
 77 |   ```bash
 78 |   cd fitness-app
 79 |   ```
 80 | - Install JS deps
 81 |   ```bash
 82 |   yarn install
 83 |   ```
 84 |   > If you don't have `yarn` installed you can use `npm instead`
 85 | - Run the app for development
 86 | 
 87 |   ```bash
 88 |   clj -M:dev
 89 |   ```
 90 | 
 91 | ## Pro Tips
 92 | 
 93 | ### Add a Global Alias
 94 | 
 95 | The install directions show you the quick and dirty approach.  However, if you
 96 | find yourself starting projects more often than not and want to save yourself
 97 | some typing and the overhead of thinking about additional configuration.  To do
 98 | this:
 99 | 
100 | - Open your global `.clojure` directory
101 |   ```bash
102 |   vim ~/.clojure
103 |   ```
104 |   > Note that `vim` is _my_ editor.  If you're not using `vim`, replace `vim`
105 |   > with the CLI command for your editor of choice.  Or just open `~/.clojure`
106 |   > from inside of your fav' editor.
107 | - Add the following alias to the `deps.edn` file in `~/.clojure`
108 |   ```clojure
109 |   {:aliases
110 |    ;; ...
111 |    :new
112 |    {:extra-deps {com.github.seancorfield/clj-new {:mvn/version "1.2.399"}}
113 |     :exec-fn    clj-new/create
114 |     :exec-args  {:template "https://github.com/athomasoriginal/create-reagent-app@d844d4119f81ad15757a975655992704dedf3046"}}}}
115 |   ```
116 |   > I called mine `new`, but you can call it anything you like.  For a better
117 |   > understanding of what this file looks like you can look at
118 |   > [my dot-clojure] file.  In addition, if you want to see another example of
119 |   > what an amazing `dot-clojure` file looks like I highly encourage you to
120 |   > take a look at [Sean Corfield's dot-clojure] file.
121 | 
122 | ### Using The Global Alias
123 | 
124 | Assuming you have finished the [Add a Global Alias] step
125 | 
126 | - Move to a directory where you want your ClojureScript app to live
127 | 
128 | - Run the `create-reagent-app` alias:
129 | 
130 |   ```clj
131 |   clj -X:create-reagent-app create :name nike/fitness-app
132 |   ```
133 | 
134 | Much better, yes?
135 | 
136 | ### Keeping aliases updated
137 | 
138 | Whenever this project updates, you will need to use the latest `hash` to take advantage of those changes.
139 | 
140 | - visit this repos [commit history]
141 | - copy the latest `sha hash`
142 | - replace the `sha hash` in your alias with the new `sha hash`
143 | 
144 | ## Notes
145 | 
146 | The structure of `organization-name/project-name` is defined by `clj-new` and not this template.
147 | 
148 | [Housekeeping]: #housekeeping
149 | [Quickstart]: #quickstart
150 | [Pro Tips]: #pro-tips
151 | [Notes]: #notes
152 | [ClojureScript Version]: #clojurescript-version
153 | [Using The Global Alias]: #using-the-global-alias
154 | [Keeping Aliases Updated]: #keeping-aliases-updated
155 | 
156 | 
157 | [Install Java]: https://www.youtube.com/watch?v=SljDPNwAFOc
158 | [Install Clojure]: https://www.youtube.com/watch?v=5_q5pLoz9b0&t=2s
159 | [1.10.741]: https://clojurescript.org/news/2020-04-24-release
160 | [Add a Global Alias]: #add-a-global-alias
161 | [resolve many of these issues]: https://www.clojuriststogether.org/news/q2-2020-funding-announcement/
162 | [my dot-clojure]: https://github.com/athomasoriginal/dotfiles/blob/master/.clojure/deps.edn
163 | [Sean Corfield's dot-clojure]: https://github.com/seancorfield/dot-clojure
164 | [Add a Global Alias]: #add-a-global-alias
165 | [Start a ClojureScript App from Scratch]: https://betweentwoparens.com/start-a-clojurescript-app-from-scratch
166 | [official clj-new docs]: https://github.com/seancorfield/clj-new
167 | [commit history]: https://github.com/athomasoriginal/create-reagent-app/commits/master
168 | 


--------------------------------------------------------------------------------
/deps.edn:
--------------------------------------------------------------------------------
1 | {:paths ["src"]
2 |  :deps
3 |  {org.clojure/clojure             {:mvn/version "1.11.1"}
4 |   com.github.seancorfield/clj-new {:mvn/version "1.2.399"}}}
5 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app.clj:
--------------------------------------------------------------------------------
 1 | (ns clj.new.create-reagent-app
 2 |   "Generate a reagent app"
 3 |   (:require [clj.new.templates :as cnt]))
 4 | 
 5 | 
 6 | (defn create-reagent-app
 7 |   "Reagent app template."
 8 |   [name]
 9 |   (let [render  (cnt/renderer "create_reagent_app")
10 |         main-ns (cnt/multi-segment (cnt/sanitize-ns name))
11 |         data    {:raw-name    name
12 |                  :name        (cnt/project-name name)
13 |                  :namespace   main-ns
14 |                  :nested-dirs (cnt/name-to-path main-ns)
15 |                  :year        (cnt/year)
16 |                  :date        (cnt/date)}]
17 |      (println "Generating a reagent app: " (cnt/project-name name))
18 |      (cnt/->files data
19 |                   ["deps.edn"                       (render "deps.edn" data)]
20 |                   ["README.md"                      (render "README.md" data)]
21 |                   [".gitignore"                     (render ".gitignore")]
22 |                   ["dev.cljs.edn"                   (render "dev.cljs.edn" data)]
23 |                   ["prod.cljs.edn"                  (render "prod.cljs.edn" data)]
24 |                   ["package.json"                   (render "package.json" data)]
25 |                   ["src/{{nested-dirs}}.cljs"       (render "core.cljs" data)]
26 |                   ["test/{{nested-dirs}}_test.cljs" (render "core_test.cljs" data)]
27 |                   ["resources/public/index.html"    (render "index.html" data)]
28 |                   ["resources/public/style.css"     (render "style.css")])))
29 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/.gitignore:
--------------------------------------------------------------------------------
1 | # clojure
2 | .cpcache
3 | out
4 | target
5 | 
6 | # javascript
7 | node_modules
8 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/README.md:
--------------------------------------------------------------------------------
 1 | # {{name}}
 2 | 
 3 | ## Quick Start
 4 | 
 5 | - Build JavaScript Deps
 6 |   ```bash
 7 |   yarn install
 8 |   ```
 9 | - Run App
10 |   ```bash
11 |   clj -M:dev
12 |   ```
13 | - Visit App
14 |   http://localhost:9500
15 | 
16 | 
17 | ## Build Production
18 | 
19 | - Build production JavaScript bundle
20 | 
21 |   ```bash
22 |   clj -M:prod
23 |   ```
24 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/core.cljs:
--------------------------------------------------------------------------------
 1 | (ns ^:figwheel-hooks {{namespace}}
 2 |   (:require
 3 |     [reagent.dom :as r.dom]))
 4 | 
 5 | 
 6 | (defn app []
 7 |   [:h1.site__title
 8 |     [:span.site__title-text "{{namespace}}"]])
 9 | 
10 | 
11 | (defn mount []
12 |   (r.dom/render [app] (js/document.getElementById "root")))
13 | 
14 | 
15 | (defn ^:after-load re-render []
16 |   (mount))
17 | 
18 | 
19 | (defonce start-up (do (mount) true))
20 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/core_test.cljs:
--------------------------------------------------------------------------------
1 | (ns {{namespace}}-test)
2 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/deps.edn:
--------------------------------------------------------------------------------
 1 | {:paths
 2 |  ["src" "test" "resources" "target"]
 3 | 
 4 |  :deps
 5 |  {org.clojure/clojurescript {:mvn/version "1.11.60"}
 6 | 
 7 |   com.bhauman/figwheel-main {:mvn/version "0.2.18"}
 8 | 
 9 |   reagent/reagent           {:mvn/version "1.1.0"}}
10 | 
11 |  :aliases
12 |  {:dev  {:main-opts ["--main"  "figwheel.main"
13 |                      "--build" "dev"
14 |                      "--repl"]}
15 | 
16 |   :prod {:main-opts ["--main"          "figwheel.main"
17 |                      "--optimizations" "advanced"
18 |                      "--build-once"    "prod"]}}}
19 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/dev.cljs.edn:
--------------------------------------------------------------------------------
1 | ^{:auto-bundle :webpack
2 |   :watch-dirs  ["src"]
3 |   :css-dirs    ["resources"]}
4 | {:main {{namespace}}}
5 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>{{name}}</title>
 5 |     <link rel="stylesheet" type="text/css" href="style.css" />
 6 |   </head>
 7 |   <body>
 8 |     <div id="root"></div>
 9 | 
10 |     <script src="/cljs-out/dev/main_bundle.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{name}}",
 3 |   "devDependencies": {
 4 |     "webpack": "5.73.0",
 5 |     "webpack-cli": "4.10.0"
 6 |   },
 7 |   "dependencies": {
 8 |     "react": "17.0.2",
 9 |     "react-dom": "17.0.2"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/prod.cljs.edn:
--------------------------------------------------------------------------------
1 | {:main       {{namespace}}
2 |  :output-dir "out"
3 |  :output-to  "out/dev-main.js"}
4 | 


--------------------------------------------------------------------------------
/src/clj/new/create_reagent_app/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --color-purple: rgba(197, 18, 193, 1);
 3 |   --color-pink: rgba(241, 50, 50, 1);
 4 | }
 5 | 
 6 | #root {
 7 |   margin: 0;
 8 |   height: 100vh;
 9 |   display: flex;
10 |   font-family: Arial;
11 |   align-items: center;
12 |   justify-content: center;
13 | }
14 | 
15 | .site__title {
16 |   font-size: 100px;
17 |   width: 50%;
18 |   text-align: center;
19 | }
20 | 
21 | .site__title-text {
22 |   background: -webkit-linear-gradient(
23 |     34deg,
24 |     var(--color-purple),
25 |     var(--color-pink)
26 |   );
27 |   -webkit-background-clip: text;
28 |   -webkit-text-fill-color: transparent;
29 | }
30 | 


--------------------------------------------------------------------------------