Fork me on GitHub
#cider
<
2020-03-28
>
Spaceman13:03:38

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?

thheller13:03:03

that is not a valid shadow-cljs config

Spaceman13:03:27

What's a valid shadow-cljs config?

thheller13:03:35

{: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]}}}}}

thheller13:03:37

something like that

Spaceman13:03:34

Still I get the same error after I choose :app

thheller13:03:59

sorry no clue about the cider parts

dpsutton16:03:52

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?

dpsutton16:03:36

Ah. Don’t connect a sibling. Just jack in clojurescript.

Spaceman17:03:30

It did launch the repl, but the repl launched says user> and not cljs.repl>. How do I make it a cljs repl?

dpsutton18:03:40

You ran cider jack in cljs (not sibling) and then you chose shadow repl type and the repl then said “compiling”?

Spaceman20:03:38

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.

dpsutton20:03:17

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?

Spaceman20:03:55

Okay. I have created npx create-cljs-project myapp. By the way, I'm using the chestnut template in the original app.

Spaceman20:03:49

Yes

npx shadow-cljs node-repl 
works in the one created with create-cljs-project

dpsutton20:03:44

awesome. so now we probably just need to see what chestnut does differently. does it use some weird lein-shadow plugin?

dpsutton20:03:53

or are deps managed by deps.edn or lein?

dpsutton20:03:45

@pshar10 can you tell me the lein new command you used to get this created with chestnut?

Spaceman21:03:38

(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"]}
  )

dpsutton21:03:21

this isn't a shadow-cljs project

dpsutton21:03:31

there's no hope of shadow running this

dpsutton21:03:57

this is a figwheel project. choose figwheel when jacking-in cljs and you hopefully will be good to go

Spaceman21:03:50

I wanted to use shadow-cljs to easily use npm libraries in my project. What's the next best way to do it?

dpsutton21:03:25

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

thanks 4
Spaceman21:03:44

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

dpsutton21:03:59

you can see how the backend is made in the chestnut example and delete all of the front end stuff and use the shadow-cljs stuff instead

dpsutton21:03:31

you don't need a template. just a backend which will look like any backend project (you can mimic the chestnut stuff) and a frontend that you can mimic the shadow-cljs stuff i linked