Figwheel 0.2.5 and ClojureScript 1.10.758

[Pete Doherty]

Hi all,

I'm having trouble getting the latest versions of Figwheel-main (0.2.5) and ClojureScript (1.10.758) to (fully) work together.

I've been able to rework the CLJS Webpack guide enough to get Figwheel compiling the app and serving it via a custom index.html page. The Figwheel-main changelog states that this is required in order to use the bundle feature.

Unfortunately, I think I'm bypassing some of Figwheel's default REPL configuration. The Figwheel scripts all get loaded as part of my compiled Webpack bundle but the REPL script never connects to the Clojure REPL. There are some differences in the REPL script's log output between my project and the Figwheel-main Vim-Fireplace tutorial. This certainly seems to be an indication that I'm doing something wrong, but I'm not sure where to begin addressing the issue.

My project:

[goog.net.WebSocket] Opening the WebSocket on ws://localhost:9500/figwheel-connect?fwsid=c0e05c8b-f386-45f1-a706-874d1f3e3fe7 <empty string>

The Figwheel tutorial:

[goog.net.WebSocket] Opening the WebSocket on ws://localhost:9500/figwheel-connect?fwprocess=0f3498&fwbuild=dev&fwsid=e25756c1-5784-46f5-8e82-739fed9d18dd&fwsname=Yan

Does any of  the above speak to anyone who knows these tools better than me? I do have some experience with both Figwheel and ClojureScript, but it's been a long time.

Thanks!

Pete

[Gary Johnson]

Hi Pete,

I haven't worked with the CLJS Webpack guide recently, but getting Clojurescript and Figwheel to work together is pretty straightforward in my experience.

I use the standard clojure build tool from here: https://clojure.org/guides/getting_started

When run from the command prompt, clojure reads a deps.edn file in the same directory. Here's an example of its contents for a basic web application:

deps.edn

{:paths ["src/clj" "src/cljs" "resources" "target"]

 :deps {org.clojure/clojure       {:mvn/version "1.10.1"}

        org.clojure/clojurescript {:mvn/version "1.10.597"}

        org.clojure/core.async    {:mvn/version "1.1.587"}

        org.clojure/data.json     {:mvn/version "1.0.0"}

        org.clojure/data.xml      {:mvn/version "0.0.8"}

        ring/ring                 {:mvn/version "1.8.0"}

        ring/ring-defaults        {:mvn/version "0.3.2"}

        hiccup/hiccup             {:mvn/version "2.0.0-alpha2"}

        reagent/reagent           {:mvn/version "0.10.0"}}

 :aliases {:compile-cljs {:main-opts ["-m" "cljs.main" "-co" "compile-prod.cljs.edn" "-c"]}

           :run-server   {:main-opts ["-m" "my-project.server"]}

           :figwheel     {:extra-deps {com.bhauman/figwheel-main {:mvn/version "0.2.4"}

                                       com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}}

                          :main-opts ["-m" "figwheel.main" "-b" "compile-dev" "-r"]}}}

This file provides three custom aliases: compile-cljs, run-server, figwheel.

You can run any them like so:

$ clojure -A:figwheel

Each of these aliases references additional build files. So here they are for your reference:

compile-dev.cljs.edn

{:main          "my-project.client"

 :output-dir    "target/public/cljs/out"

 :output-to     "target/public/cljs/app.js"

 :asset-path    "/cljs/out"

 :source-map    true

 :optimizations :none

 :pretty-print  true}

compile-prod.cljs.edn

{:main            "my-project.client"

 :output-dir      "target/public/cljs"

 :output-to       "target/public/cljs/app.js"

 :source-map      "target/public/cljs/app.js.map"

 :optimizations   :advanced

 :pretty-print    false

 :closure-defines {"goog.DEBUG" false}}

figwheel-main.edn

{:watch-dirs ["src/cljs"]

 :css-dirs ["resources/public/css"]

 :ring-server-options {:port 8080 :join? false}

 :ring-handler my-project.handler/development-app}

With these files in place, you should be all set to start building your web application. You need to create my-project.server/-main (to start the web server), my-project.handler/development-app (to be your ring handler function), and my-project.client (to be the entrypoint file for your CLJS code). Everything else is up to you.

I created a repository awhile ago containing a web application template with all of these files and a good deal of default code to get you going. You can find it here:
https://gitlab.com/lambdatronic/clojure-webapp-template

Have fun and happy hacking!

~Gary

[David Nolen]

I believe the latest Figwheel releases are addressing `:bundle` support.

David

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/clojurescript/0bb75d1b-62b6-4f1c-ba6b-3b4b61aeacbd%40googlegroups.com.

[Pete Doherty]

Thanks for this, Gary!

I was able to figure out a workable solution, but this is useful information and your repository is a nice template for new projects. I haven't gotten around to trying to do a production build of my demo application just yet, but I'll probably refer back to your example when I do.

Pete

[Pete Doherty]

Thanks, David. Unsurprisingly, you're correct!

Figwheel-main v0.2.6 added additional `:bundle` support and rounded off the rough edges I was trying to address above. I followed that project's new NPM guide and everything Just Worked. There was also additional support added in v0.2.7, which I haven't had a chance to dig into yet. Kudos to Bruce Hauman for pushing those releases out so quickly.

Pete

To unsubscribe from this group and stop receiving emails from it, send an email to clojur...@googlegroups.com.