Fork me on GitHub
#lein-figwheel
<
2016-12-20
>
alexandergunnarson00:12:16

Hey! So I have an issue with figwheel not picking up the :websocket-url config

alexandergunnarson00:12:47

In the root of project.clj I have the following:

:cljsbuild {:builds [{:id "web"
                      :source-paths ["src" "env/dev"
                                     "../../../quantum/src/cljc"
                                     "../../../quantum/src/clj"]
                      :figwheel     {:load-warninged-code true
                                     :websocket-url "ws://<IP>/figwheel-ws"}
                      :compiler     {:output-to     "./resources/public/js/web/main.js"
                                     :main          "env.ios.main"
                                     :output-dir    "./resources/public/js/web"
                                     :optimizations :none
                                     :warnings {:redef-in-file false}}}

alexandergunnarson00:12:13

It hangs on Figwheel: trying to open cljs reload socket

bhauman00:12:16

"ws://<IP>/figwheel-ws"

bhauman00:12:23

that isn't valid

alexandergunnarson00:12:58

I tried websocket-host as just <IP> and also :js-client-host but that didn’t help...

alexandergunnarson00:12:29

I can try that again? Because I just barely pulled out the cljsbuild config from a :dev profile thinking maybe the nestedness was causing issues

alexandergunnarson00:12:33

Right, I’ve read that

alexandergunnarson00:12:58

I tried first :websocket-host <IP>

alexandergunnarson00:12:10

Then :websocket-url ws://<IP>/figwheel-ws”

bhauman00:12:13

oh sorry you cleaned the input

bhauman00:12:23

thats the actual ip

alexandergunnarson00:12:41

Yes e.g. 401.239.144.331 (not the actual IP)

bhauman00:12:57

so how are you starting figwheel?

alexandergunnarson00:12:38

I’m starting it remotely on an AWS instance in the appropriate project directory

alexandergunnarson00:12:46

sudo LEIN_ROOT=1 lein figwheel web

bhauman00:12:58

and you have the port set?

bhauman00:12:10

and the AWS port is open

alexandergunnarson00:12:12

Port 3449 is open in the security settings, yes

alexandergunnarson00:12:22

When you say the port set, what does that mean?

bhauman00:12:28

and the websocket-url has the port in it?

bhauman00:12:59

ws://<IP>:<port>/figwheel-ws

bhauman00:12:34

also there is one other thing the webserver is starting on the 0.0.0.0 interface

bhauman00:12:01

you may want to set the :server-ip your server ip

alexandergunnarson00:12:15

Well so there’s the AWS private IP and the elastic IP

alexandergunnarson00:12:28

I tried setting the :server-ip to the elastic IP but that failed

bhauman00:12:47

so try 127.0.0.1

alexandergunnarson00:12:15

{:id "web"
 :source-paths ["src" "env/dev"
                "../../../quantum/src/cljc"
                "../../../quantum/src/clj"]
 :figwheel     {:load-warninged-code true
                :websocket-url ""}
 :compiler     {:output-to     "./resources/public/js/web/main.js"
                :main          "env.ios.main"
                :output-dir    "./resources/public/js/web"
                :optimizations :none
                :warnings {:redef-in-file false}}}

alexandergunnarson00:12:34

But server, :figwheel {:server-ip 127.0.0.1}

bhauman00:12:50

in the top level figwheel

alexandergunnarson00:12:32

(This is what is has been doing btw)

bhauman00:12:58

that says localhost

alexandergunnarson00:12:25

Yes, that’s what it has been doing — like I said, it seems to have not been picking up the config

bhauman00:12:50

how are you starting figwheel?

alexandergunnarson00:12:00

sudo LEIN_ROOT=1 lein figwheel web manually

alexandergunnarson00:12:12

In the directory where that project.clj is

alexandergunnarson00:12:41

(Meanwhile I killed figwheel and restarted as per that command, after applying the :figwheel {:server-ip “127.0.0.1”} edit — maybe it changes things)

bhauman00:12:53

do print-config in the figwheel repl

alexandergunnarson01:12:08

I would if it connected 😉

bhauman01:12:54

so you put this config at the root of your lein project.clj?

bhauman01:12:02

the :cljsbuild config

bhauman01:12:36

and you are sure your :profiles {:web } isn't overriding it?

alexandergunnarson01:12:15

(defproject <PROJECT> "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url ""
  :license {:name "Eclipse Public License"
            :url  ""}
  ;:git-dependencies [[""]]
  :dependencies
     [ ...
      [org.clojure/tools.analyzer.jvm "0.6.10"]
      [reagent "0.6.0-rc" :exclusions [cljsjs/react cljsjs/react-dom cljsjs/react-dom-server]]
      [re-frame "0.8.0-alpha11"]]
  :plugins [[lein-cljsbuild         "1.1.1"  ]
            [lein-figwheel          "0.5.8"]
            #_[oubiwann/lein-git-deps "0.0.3"  ]]
  :clean-targets ["target/"]
  :aliases {"dependencies" ["pdo"
                              "deps,"
                              "sudo" "npm" "install"
                              "sudo" "rnpm" "link"
                              ; When encountering a build error,
                              ; 

                              ]
            "prod-build" ^{:doc "Recompile code with prod profile."}
                         ["do" "clean"
                          ["with-profile" "prod" "cljsbuild" "once" "ios"]
                          ["with-profile" "prod" "cljsbuild" "once" "android"]]}
  :figwheel  {:server-ip "127.0.0.1"}
  :cljsbuild {:builds [{:id "web"
                        :source-paths ["src" "env/dev"]
                        :figwheel     {:load-warninged-code true
                                       :websocket-url ""}
                        :compiler     {:output-to     "./resources/public/js/web/main.js"
                                       :main          "env.ios.main"
                                       :output-dir    "./resources/public/js/web"
                                       :optimizations :none
                                       :warnings {:redef-in-file false}}}
                       {:id "ios"
                        :source-paths ["src" "env/dev"]
                        :figwheel     {:load-warninged-code true :websocket-url ""}
                        :compiler     {:output-to     "target/ios/not-used.js"
                                       :main          "env.ios.main"
                                       :output-dir    "target/ios"
                                       :optimizations :none
                                       :warnings {:redef-in-file false}}}
                       {:id "android"
                        :source-paths ["src" "env/dev"]
                        :figwheel     {:load-warninged-code true :websocket-url ""}
                        :compiler     {:output-to     "target/android/not-used.js"
                                       :main          "env.android.main"
                                       :output-dir    "target/android"
                                       :optimizations :none
                                       :warnings {:redef-in-file false}}}]}
  :profiles {:dev {:dependencies [[figwheel-sidecar "0.5.0-6"]
                                  [com.cemerick/piggieback "0.2.1"]]
                   :source-paths ["src" "env/dev"]
                   :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}})

alexandergunnarson01:12:28

Full project.clj (dependencies elided)

alexandergunnarson01:12:16

By the way, now trying to connect to <IP>:3449 in the browser says “this site can’t be reached"

alexandergunnarson01:12:27

(Possibly because of the 127.0.01)

alexandergunnarson01:12:41

Thanks so much for your help with this by the way! Extremely prompt 👍

alexandergunnarson01:12:19

Ah… I’m seeing something now… figwheel-sidecar has a different version

alexandergunnarson01:12:45

Removing that dep and trying again

bhauman01:12:02

yeah you have to keep hitting shift reload

bhauman01:12:17

or you'll be messing with cached versions

bhauman01:12:25

even if you have caching disabled

alexandergunnarson01:12:56

Well, after it’s up haha

bhauman01:12:27

so I'm thinking it is picking up the config

alexandergunnarson01:12:29

Also, figwheel has been saying that the :compiler :warnings key isn’t valid

alexandergunnarson01:12:35

Maybe that’s related?

bhauman01:12:37

well it wouldn't start if there is a warning

alexandergunnarson01:12:17

Maybe that shadows another warning?

bhauman01:12:19

oh well that should work

alexandergunnarson01:12:51

Also, figwheel’s up again (`Prompt will show when Figwheel connects to your application`), but shift-reload in the browser says refused to connect

bhauman01:12:59

to localhost?

bhauman01:12:14

or to your elastic ip now

alexandergunnarson01:12:47

I’ve always been running figwheel from the elastic IP for this particular project

bhauman01:12:18

in the client what is it trying to connect to?

alexandergunnarson01:12:39

The client is my laptop connecting to the elastic IP via Chrome

alexandergunnarson01:12:56

The elastic IP points to the AWS instance on which figwheel is running

alexandergunnarson01:12:09

It worked before the 127.0.0.1 edit

bhauman01:12:12

so the configuration is making it through

bhauman01:12:43

you have the correct websocket url in the client now

alexandergunnarson01:12:04

The browser doesn’t actually load the page at all is what I’m saying

bhauman01:12:11

yes I understand that

alexandergunnarson01:12:28

When you say “in the client” you mean in project.clj?

bhauman01:12:45

get rid of the 127.0.0.1

alexandergunnarson01:12:52

All right, doing that now

alexandergunnarson01:12:21

Relaunching figwheel

bhauman01:12:37

is your page a static html file?

bhauman01:12:49

that is served by figwheel?

alexandergunnarson01:12:17

Just a very small index.html I created that references the .js files

alexandergunnarson01:12:41

Well, possibly one concern is this:

alexandergunnarson01:12:40

Sorry, trying to pull it up

alexandergunnarson01:12:26

<html>
  <head>
    <head>
    <!-- <link rel="stylesheet" type="text/css" href="./Fonts/selected-fonts.css"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=0.67, maximum-scale=0.67, user-scalable=no"> -->
    <!-- <link rel="stylesheet" href="react-virtualized.css"></style> -->
    <style type="text/css" id="dynamic"></style>
    <style type="text/css" id="default-style">
      html, body {
        -webkit-font-smoothing:  antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      ::-webkit-scrollbar {
        display: none;
      }
    </style>
    <!-- <link rel="stylesheet" href="fixed-data-table.css"></style> -->
    <!-- "https://bitwiseshiftleft.github.io/sjcl/sjcl.js" -->
    <!-- <script type="text/javascript" src="/js/forge.bundle.js"></script> -->
    <!-- <script type="text/javascript" src="/js/crypto-aes.js"  ></script> -->
    <!-- <script src="js/react-0.14.7.js"     type="text/javascript"></script> -->
    <!-- <script src="js/react-0.14.7.min.js"     type="text/javascript"></script> -->
    <script src="/js/npm-deps.js"></script>
    <!--<script src="js/pdfjs.worker.min.js"></script>-->
    <!-- <script src="js/react-dom-0.14.7.min.js" type="text/javascript"></script> -->
    <!-- <script src="js/react-infinite.min.js"   type="text/javascript"></script> -->
    <!-- <script src="js/bitdash.min.js"></script> -->
  </head>
  <body>
    <script>
      var React       = quantaRNDeps.React;
      var ReactNative = quantaRNDeps.ReactNative;
    </script>
    <div id=root></div>
    <script src="/js/web/goog/base.js"></script>
    <script src="/js/web/cljs_deps.js"></script>
    <script>if (typeof goog == "undefined") console.warn("ClojureScript could not load :main, did you forget to specify :asset-path?");</script>
    <script>if (typeof goog != "undefined") { goog.require("figwheel.connect"); }</script>
    <!-- If you put this outside of the <body> it might say 'js/document.-body not defined' -->
    <!-- <script src="/js/web/main.js"></script> -->
    <script>goog.require("env.ios.main");</script>
  </body>
</html>

alexandergunnarson01:12:42

Ignore the crazy number of comments

alexandergunnarson01:12:13

I was trying to reference just /js/web/main.js but I was running into an issue with paths, I believe

alexandergunnarson01:12:33

Something like goog.base couldn’t be found

bhauman01:12:19

so is the page loading now?

alexandergunnarson01:12:39

Sorry, I got a late start on reloading figwheel — should be another 10 sec

alexandergunnarson01:12:46

Just kidding, it’s done

alexandergunnarson01:12:56

Yes, now the page loads

bhauman01:12:05

and figwheel doesn't connect?

alexandergunnarson01:12:26

"Figwheel: trying to open cljs reload socket"

alexandergunnarson01:12:35

Server side, no connection either

alexandergunnarson01:12:39

"Prompt will show when Figwheel connects to your application"

bhauman01:12:18

in dev tools it is showing that figwheel is trying to connect to your ip:port

alexandergunnarson01:12:28

Yup! "Figwheel: trying to open cljs reload socket”

bhauman01:12:29

and you did hit shift reload?

alexandergunnarson01:12:49

Oh, figwheel isn’t printing out the ip:port combo (That would be nice though)

alexandergunnarson01:12:07

Doing shift-reload again

bhauman01:12:16

like in the error you pasted above

alexandergunnarson01:12:20

Figwheel: trying to open cljs reload socket and hangs as usual

bhauman01:12:25

could you paste the error?

bhauman01:12:33

the devtools error?

alexandergunnarson01:12:41

utils.cljs?rel=1482193632635:49 > Figwheel: trying to open cljs reload socket

alexandergunnarson01:12:52

Chrome dev tools right? Not some extension I might not have?

alexandergunnarson01:12:22

Ah, it’s taking very long to print that out

alexandergunnarson01:12:33

Like 60 sec or something? Maybe more

alexandergunnarson01:12:41

socket.cljs?rel=1482195136016:63 WebSocket connection to '' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

alexandergunnarson01:12:49

Figwheel works like a charm locally but I’ve always run into errors around non-localhost scenarios and just given up

alexandergunnarson01:12:21

I’m sure it’ll be just fine in a bit 🙂

bhauman01:12:55

ok you need to look at the output file /resources/public/js/web/figwheel/connect/web.cljs

alexandergunnarson01:12:03

All right, going there

bhauman01:12:28

look at the websocket host

alexandergunnarson01:12:30

I only have connect.cljs

alexandergunnarson01:12:38

client client.cljs client.cljs.cache.json client.js client.js.map connect.cljs connect.cljs.cache.json connect.js connect.js.map

bhauman01:12:42

ok look hat that

bhauman01:12:48

ok look at that

alexandergunnarson01:12:58

`(ns figwheel.connect (:require [env.ios.main] [figwheel.client] [figwheel.client.utils])) (figwheel.client/start {:load-warninged-code true, :build-id "web", :websocket-url "ws://[[client-hostname]]:3449/figwheel-ws”})`

alexandergunnarson01:12:25

How is client-hostname localhost?? When location.host is "52.4.208.191:3449” ?

alexandergunnarson01:12:36

Anyway the IP isn’t getting put in

alexandergunnarson01:12:54

Also let me check my dependency tree to make sure figwheel isn’t being overridden by an earlier version or something...

bhauman01:12:19

well this makes no sense

alexandergunnarson01:12:19

Yeah heh it doesn’t 😛

alexandergunnarson01:12:34

I hope I’m doing something wrong, because that would be easier

bhauman01:12:56

please do a lein clean

bhauman01:12:48

also get rid of the :warnings key

bhauman01:12:02

and make sure that there are no other config errors

alexandergunnarson01:12:18

I had an old version of figwheel (`0.5.4-7` in dependencies, not the 0.5.8 in plugins) which I updated to 0.5.8

alexandergunnarson01:12:22

And I’ll do the rest

alexandergunnarson01:12:09

Got rid of warnings key and trying again with figwheel

alexandergunnarson01:12:20

I manually cleaned some things just now by the way because they weren’t in clean targets (the js/web directory for instance)

bhauman01:12:32

look at that file again after compile

alexandergunnarson01:12:03

It’s up but I don’t see figwheel/connect

alexandergunnarson01:12:13

Before and after shift-reloading I still don’t see it

alexandergunnarson01:12:29

resources/public/js/web/figwheel shows client client.cljs client.cljs.cache.json client.js client.js.map

alexandergunnarson01:12:41

client folder shows

file_reloading.cljs             file_reloading.js.map     heads_up.js      socket.cljs.cache.json  utils.cljs             utils.js.map
file_reloading.cljs.cache.json  heads_up.cljs             heads_up.js.map  socket.js               utils.cljs.cache.json
file_reloading.js               heads_up.cljs.cache.json  socket.cljs      socket.js.map           utils.js

alexandergunnarson01:12:37

Still WebSocket connection to '' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

bhauman01:12:52

hmmm look at your main file

alexandergunnarson01:12:02

Which main file? main.js?

bhauman01:12:30

yes web main.js

bhauman01:12:55

oh yeah in 5.8 its in memory

alexandergunnarson01:12:55

var CLOSURE_UNCOMPILED_DEFINES = null;
if(typeof goog == "undefined") document.write('<script src="./resources/public/js/web/goog/base.js"></script>');
document.write('<script src="./resources/public/js/web/cljs_deps.js"></script>');
document.write('<script>if (typeof goog == "undefined") console.warn("ClojureScript could not load :main, did you forget to specify :asset-path?");</script>');

document.write("<script>if (typeof goog != \"undefined\") { goog.require(\"figwheel.connect.web\"); }</script>");
document.write('<script>goog.require("env.ios.main");</script>');

alexandergunnarson01:12:18

Yeah this is why I don’t use main.js — I use env.ios.main directly

bhauman01:12:24

so there should be a figwheel connect web

alexandergunnarson01:12:24

Because goog.require(\"figwheel.connect.web\”) fails

alexandergunnarson01:12:36

Hmm okay, trying at least

alexandergunnarson01:12:57

goog.require('figwheel.connect.web’) -> null

alexandergunnarson01:12:22

ls on figwheel directory yields client client.cljs client.cljs.cache.json client.js client.js.map

alexandergunnarson01:12:29

client is a folder

bhauman01:12:11

OK so you have all kinds of things going on here

bhauman01:12:23

the two versions of figwheel was bad

bhauman01:12:29

really bad

alexandergunnarson01:12:34

Yes, fixed that though

bhauman01:12:58

and you did a clean compile?

alexandergunnarson01:12:12

lein clean and manually removed the js/web folder

alexandergunnarson01:12:34

This is why it took 212.987 seconds instead of ~40 😛

bhauman01:12:45

and the js/web/main.js requires figwheel.connect.web

bhauman01:12:58

then there has to be a figwheel/connect/web.js

alexandergunnarson01:12:59

Do I need to have something else as a dependency for figwheel.connect.web to be generated?

alexandergunnarson01:12:13

Hmm let me try to find if figwheel has a weird interaction via lein deps :tree

bhauman01:12:28

ok I would run this locally and first get it to connect

bhauman01:12:39

and fix you html file

alexandergunnarson01:12:37

It does connect locally (in some sense) — I just always have used figwheel for this project in the context of React Native (re-natal) so I didn’t have to use figwheel’s 3449, just RN’s 8080

alexandergunnarson01:12:48

But yeah the lack of 3449 connection is the issue here

alexandergunnarson01:12:05

Which I think will be fixed by fixing dependencies?

alexandergunnarson01:12:10

If that doesn’t work I’ll come back

alexandergunnarson01:12:26

But I know where to look now at least

bhauman01:12:51

dude do you want to screen share?

alexandergunnarson01:12:46

Haha sure 😛 I feel pretty confident about the next step (dependency fixes) and don’t want to take up more of your time but this is a strange enough situation apparently...

alexandergunnarson01:12:01

Do you? I can invite you

bhauman01:12:14

I have screen here as well

alexandergunnarson01:12:25

Cool, what’s your username

bhauman01:12:35

Bruce Hauman

alexandergunnarson01:12:58

Oops, email I guess (you can delete the address from Slack after I put it into Screenhero)

alexandergunnarson01:12:13

Screenhero doesn’t do lookups by username

alexandergunnarson01:12:36

It says “invitation sent"

alexandergunnarson02:12:23

Thanks so much for all your help!