This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-28
Channels
- # announcements (3)
- # babashka (36)
- # beginners (77)
- # boot (3)
- # chlorine-clover (10)
- # cider (27)
- # clj-kondo (1)
- # cljs-dev (4)
- # clojure (256)
- # clojure-belgium (1)
- # clojure-europe (9)
- # clojure-uk (18)
- # clojuredesign-podcast (9)
- # clojurescript (54)
- # cryogen (8)
- # cursive (3)
- # data-science (1)
- # datomic (2)
- # duct (31)
- # events (1)
- # exercism (3)
- # fulcro (116)
- # joker (20)
- # kaocha (5)
- # meander (2)
- # nrepl (4)
- # off-topic (10)
- # other-languages (15)
- # re-frame (18)
- # reagent (4)
- # shadow-cljs (44)
- # sql (14)
- # tools-deps (17)
I installed shadow-cljs as follows:
npm install -g shadow-cljs
Then I created a shadow-cljs.edn file, with the following:
[{:id "app"
:source-paths ["src/cljs" "src/cljc" "dev"]
:figwheel {:on-jsload "myapp.system/reset"}
:compiler {:main cljs.user
:asset-path "js/compiled/out"
:output-to "dev-target/public/js/compiled/myapp.js"
:output-dir "dev-target/public/js/compiled/out"
:source-map-timestamp true
:preloads [devtools.preload]
:optimizations :none}}
{:id "test"
:source-paths ["src/cljs" "test/cljs" "src/cljc" "test/cljc"]
:compiler {:output-to "dev-target/public/js/compiled/testable.js"
:main myapp.test-runner
:optimizations :none}}
{:id "min"
:source-paths ["src/cljs" "src/cljc"]
:jar true
:compiler {:main myapp.system
:output-to "resources/public/js/compiled/myapp.js"
:output-dir "target"
:source-map-timestamp true
:optimizations :advanced
:closure-defines {goog.DEBUG false}
:pretty-print false}}
]
Then in the already running clj repl, I do M-x cider-connect-sibling-cljs, and select the shadow repl option. But I get that shadow-cljs Clojurescript REPL is not available. How do I get shadow cljs to work?{:source-paths
["src/cljs" "src/cljc" "dev"]
:dependencies
[]
:builds
{:app
{:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "/js/compiled"
:modules {:myapp {:entries [myapp.system]}}}}}
Can you tell me the steps you are taking? And can we do a very simple, known cljs app that works and build up the complexity from there?
It did launch the repl, but the repl launched says user> and not cljs.repl>. How do I make it a cljs repl?
You ran cider jack in cljs (not sibling) and then you chose shadow repl type and the repl then said “compiling”?
No I had chosen lein. When I choose shadow-cljs, the repl doesn't start at all, and I get the following error: Caused by: http://java.io.FileNotFoundException: Could not locate myapp/application__init.class, myapp/application.clj or myapp/application.cljc on classpath.
I’m happy to work through this with you. But can we start with a simple shadow cljs app and see if we can get that running?
Okay. I have created npx create-cljs-project myapp. By the way, I'm using the chestnut template in the original app.
awesome. so now we probably just need to see what chestnut does differently. does it use some weird lein-shadow
plugin?
@pshar10 can you tell me the lein new command you used to get this created with chestnut?
(defproject myapp "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url ""
:license {:name "Eclipse Public License"
:url ""}
:dependencies [;; mydeps
]
:plugins [[lein-cljsbuild "1.1.7"]
[lein-environ "1.1.0"]]
:min-lein-version "2.6.1"
:source-paths ["src/clj" "src/cljs" "src/cljc"]
:test-paths ["test/clj" "test/cljc"]
:clean-targets ^{:protect false} [:target-path :compile-path "resources/public/js" "dev-target"]
:uberjar-name "vendo.jar"
;; Use lein run if you just want to start a HTTP server, without figwheel
:main vendo.application
;; nREPL by default starts in the :main namespace, we want to start in user
;; because that's where our development helper functions like (go) and
;; (browser-repl) live.
:repl-options {:init-ns user}
:cljsbuild {:builds
[{:id "app"
:source-paths ["src/cljs" "src/cljc" "dev"]
:figwheel {:on-jsload "vendo.system/reset"}
:compiler {:main cljs.user
:asset-path "js/compiled/out"
:output-to "dev-target/public/js/compiled/vendo.js"
:output-dir "dev-target/public/js/compiled/out"
:source-map-timestamp true
:preloads [devtools.preload]
:optimizations :none}}
{:id "test"
:source-paths ["src/cljs" "test/cljs" "src/cljc" "test/cljc"]
:compiler {:output-to "dev-target/public/js/compiled/testable.js"
:main vendo.test-runner
:optimizations :none}}
{:id "min"
:source-paths ["src/cljs" "src/cljc"]
:jar true
:compiler {:main vendo.system
:output-to "resources/public/js/compiled/vendo.js"
:output-dir "target"
:source-map-timestamp true
:optimizations :advanced
:closure-defines {goog.DEBUG false}
:pretty-print false}}
{:id :devcards
:source-paths ["src/cljs" "src/cljc" "dev"]
:figwheel { :devcards true }
:compiler {
:main cljs.user
:asset-path "js/compiled/out"
:output-to "dev-target/public/js/compiled/vendo.js"
:output-dir "dev-target/public/js/compiled/out_devcards"
}}
]}
;; When running figwheel from nREPL, figwheel will read this configuration
;; stanza, but it will read it without passing through leiningen's profile
;; merging. So don't put a :figwheel section under the :dev profile, it will
;; not be picked up, instead configure figwheel here on the top level.
:figwheel {:http-server-root "public" ;; serve static assets from resources/public/
:server-port 3449 ;; default
:server-ip "127.0.0.1" ;; default
:css-dirs ["resources/public/css"] ;; watch and update CSS
;; Start an nREPL server into the running figwheel process. We
;; don't do this, instead we do the opposite, running figwheel from
;; an nREPL process, see
;;
;; :nrepl-port 7888
;; To be able to open files in your editor from the heads up display
;; you will need to put a script on your path.
;; that script will have to take a file path and a line number
;; ie. in ~/bin/myfile-opener
;; #! /bin/sh
;; emacsclient -n +$2 $1
;;
;; :open-file-command "myfile-opener"
:server-logfile "log/figwheel.log"}
:doo {:build "test"}
:profiles {:dev
{:dependencies [[figwheel "0.5.18"]
[figwheel-sidecar "0.5.18"]
[cider/piggieback "0.4.0"]
[cider/cider-nrepl "0.18.0"]
[lein-doo "0.1.11"]
[reloaded.repl "0.2.4"]
[lambdaisland/kaocha "0.0-590"]
[spyscope "0.1.6"]
[eftest "0.5.9"]
[alembic "0.3.2"]
[binaryage/devtools "1.0.0"]
[devcards "0.2.6"]
]
:plugins [[lein-figwheel "0.5.18"]
[lein-doo "0.1.11"]
]
:source-paths ["dev"]
:repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}
:env {
:foo "bar"
}}
:uberjar
{:source-paths ^:replace ["src/clj" "src/cljc"]
:prep-tasks ["compile"
["cljsbuild" "once" "min"]]
:hooks []
:omit-source true
:aot :all}}
;; :injections [(require 'spyscope.core)
;; (require 'kaocha.repl)
;; (require '[cemerick.pomegranate :only (add-dependencies)])
;; ]
:aliases {"kaocha" ["with-profile" "+kaocha" "run" "-m" "kaocha.runner"]}
)
this is a figwheel project. choose figwheel when jacking-in cljs and you hopefully will be good to go
I wanted to use shadow-cljs to easily use npm libraries in my project. What's the next best way to do it?
read shadow-cljs's extensive user guide and see how to create a new project. i have a nice 5 minute presentation/tutorial here: https://github.com/dpsutton/asg-ignite-presentation
The presentation doesn't say anything about a clojure backend + clojurescript template. Basically there are seperate directories clj, cljc and cljs for the front-end and the backend in chestnut. Run
lein new chestnut myapp
to see what I mean. Then if you will tell me how to create something similar with shadow-cljs