This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-07
Channels
- # beginners (71)
- # boot (25)
- # cider (204)
- # clara (18)
- # cljs-dev (10)
- # cljsrn (64)
- # clojure (50)
- # clojure-dev (2)
- # clojure-dusseldorf (1)
- # clojure-india (5)
- # clojure-italy (1)
- # clojure-nl (21)
- # clojure-poland (65)
- # clojure-spec (41)
- # clojure-uk (10)
- # clojurescript (4)
- # core-async (5)
- # cursive (2)
- # datomic (17)
- # duct (8)
- # emacs (8)
- # fulcro (1)
- # graphql (21)
- # hoplon (2)
- # javascript (3)
- # lumo (25)
- # mount (5)
- # off-topic (5)
- # onyx (3)
- # portkey (6)
- # re-frame (15)
- # reagent (5)
- # rum (1)
- # shadow-cljs (198)
- # spacemacs (19)
- # specter (2)
Firefox can’t establish a connection to the server at . browser.cljs:315:8
shadow-cljs: websocket error
error
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: WebSocket { url: "", readyState: 3, bufferedAmount: 0, … }
isTrusted: true
originalTarget: WebSocket { url: "", readyState: 3, bufferedAmount: 0, … }
target: WebSocket { url: "", readyState: 3, bufferedAmount: 0, … }
timeStamp: 4402
type: "error"
<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }
browser.cljs:27:10
shadow-cljs: WebSocket disconnected! browser.cljs:27:10
here's a screenshot that's maybe easier to parse: https://transfer.sh/PreAs/Screen%20Shot%202018-05-07%20at%2013.40.46.png
it works fine in chrome. any idea what's going on? it's really annoying that chrome and ff handle localhost differently when it comes to stuff like this or http requests with CORS headers
the solution seems to be to create my own root ca which i can then use to create the certs
maybe this is helpful to anybody. i for one am switching to chromium as my dev browser for now. 😕
@arne-clojurians are you using the ssl support built into shadow-cljs or any other webserver?
I'm guessing that you are using a different webserver and shadow-cljs has no ssl configured?
I still haven't figured out how to configure ssl in windows so I can't really test things easily
so i generated the certificate, configured shadow-cljs and experienced the behavior above. i'm on macos just in case that turns out to be important
there are a couple of issues on stackoverflow about firefox and self-signed certs with wss
but as i said; i've run into trouble with cors-headers in ff while it worked fine in chrome, so it wouldn't surprise me too much
SAM? I hear that term for the first time. I followed this guide, which I found in the docs: https://certsimple.com/blog/localhost-ssl-fix
It contains the subject name (common name, country) and the issuer name (common name, country). No complaints in current Chromium
yeh I had problem with self signed signatures on Chrome, they just restricted them recently, ff should work fine. But I didn't read the whole context of this discussion above....
@arne-clojurians finally got this working. you first need to go to https://localhost:9630 and confirm the security exception firefox shows
found these instructions for windows/linux. seems more complicated than it should be but works well. https://gist.github.com/jchandra74/36d5f8d0e11960dd8f80260801109ab0
We just got a new project I’ll be implementing with shadow, so you’ll be seeing a lot more of me in coming days 😉
I have to start by showing we can import a navbar from npm for our admin screen, and then a react-select for the core functionality.
I assume a lein template is still the best way to start a fresh project?
I lean toward luminus now, and it supports front-end-only reagent apps, of course.
But I’m open.
@jmckitrick are you talking about scaffolding? for that lein works well, yeah. personally i do it by hand or by git cloning a project i set up before.
i'm running shadow-cljs watch x
via npm script and i'm receiving status 130 when Ctrl + C
ing it. is this normal? never noticed it before
I’d like a consistent structure for my colleagues. So I’ll probably use lein new luminus +re-frame
or something similar.
it might be confusing if you don't use the project.clj then though. or are you using lein for everything?
@jmckitrick if you only need frontend you can start with this https://github.com/shadow-cljs/quickstart-browser
Ah, good point.
@arne-clojurians what is status 130?
@thheller I’ll try it now….
https://github.com/quangv/shadow-re-frame-simple-example also has re-frame and stuff
npm ERR! code ELIFECYCLE
npm ERR! errno 130
npm ERR! [email protected] dev:cljs: `shadow-cljs watch app`
npm ERR! Exit status 130
npm ERR!
npm ERR! Failed at the [email protected] dev:cljs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Ok, I have the skeleton app running in watch mode, reagent/re-frame are running.
I’ve just imported the in-house navbar component I need, and here’s the error I got:
errors in file: /Users/devmbp42/tst/admin-destination-guides/node_modules/ui-agent-navigation/lib/navigation/styles/agent-navigation.less
{:js-str-offsets [], :js-esm false, :js-imports [], :js-invalid-requires [], :goog-provides [], :js-language "es3", :goog-module nil, :js-warnings [], :resource-name "node_modules/ui-agent-navigation/lib/navigation/styles/agent-navigation.less", :js-requires [], :js-errors [{:line 1, :column 0, :message "Character '@' (U+0040) is not a valid identifier start char"}], :goog-requires [], :tag :shadow.build.npm/errors}
ExceptionInfo: errors in file: /Users/devmbp42/tst/admin-destination-guides/node_modules/ui-agent-navigation/lib/navigation/styles/agent-navigation.less
clojure.core/ex-info (core.clj:4739)
clojure.core/ex-info (core.clj:4739)
shadow.build.npm/get-file-info* (npm.clj:520)
shadow.build.npm/get-file-info* (npm.clj:428)
shadow.build.npm/get-file-info (npm.clj:556)
shadow.build.npm/get-file-info (npm.clj:553)
shadow.build.npm/find-resource* (npm.clj:650)
shadow.build.npm/find-resource* (npm.clj:610)
It looks like I need to get a less processor running, and I’ve not done that before.
But I don’t want to assume….
Well, there’s support for ES6 or UMD.
Not sure if that assumes webpack for both.
What would I need to change? The author is on our team.
Right, that’s the next step.
I assume I can refer to a relative path?
er, a path in node_modules?
Let’s try…
I assume I need to bump my shadow-cljs for your change… or else comment out that line of the module
I have a server running, and watch running.
I just started from scratch.
Right…
(in-ns 'shadow.build.npm)
then
(def asset-exts
#{"css"
"scss"
"sass"
"less"
"png"
"gif"
"jpg"
"jpeg"
"svg"})
ah ok
sweet!
How does that integrate with server/watch mode?
got it
ok, the error is gone. Now to try the component itself…
So far, so good!
Now I need to set up a proxy to the rest of the app to get a login cookie.
My colleague has a nwb.config.js
with a section for devServer
and a proxy
setting below that.
Let me check the shadow docs first
Got it!
Hmm. I need to find out how to do that… what tools would work?
Of course, silly me. I assume it could be set up to work the same way… I’ll have to figure that part out.
This proxy setting is only for devtools, correct?
Yes, I’m sure you’re right.
So webpack passes options to another node package that does the proxying.
So I need to figure out how to replicate that so the in-house module I’m running can access the login cookie from our app.
Our company login domain, or one of the dev/qa versions
I just need the CLJS app to be able to see the cookies from the company domain.
Let me find out…. I’m pretty ignorant of our networking setup.
if you proxy to your company domain the cookie that gets set will effectively be localhost (assuming it doesn't set a domain itself)
Right. My colleague developed the react component I need to embed, and it’s proxied to the company domain to access that cookie. I need to do the same. With his setup, there’s built in support for proxies, so I need to replicate that some other way.
I guess I’m belaboring the obvious.
just to weigh in on the proxy thing: create-react-app will proxy your api server for you. this is pretty convenient if your release target serves the api and the frontend bundle from the same endpoint. it enables you to keep cors turned off without having to set up an nginx proxy in dev
What web server are we running?
Yeah, we have nginx to connect our individual apps to make them run seamlessly on our dev boxes.
I just don’t know it that well 😕
@lee.justin.m That’s exactly what we used
I think
@lee.justin.m Are you saying a proxy: ...
entry in package.json
is all I need? Does that apply to the dev server used by shadow?
@jmckitrick if you were using create-react-app that’s all you’d need 🙂
Yes, if only, lol.
Hey, I’m willing to help and/or contribute in any way I can!
What’s the server used in shadow?
wow the proxying has gotten really sophisticated since i last checked in with c-r-a. when they first put that feature in there were no options and it only proxied certain mime types
Wow, now what? lol.
I guess the next version will have the less
fix as well 😉
Is there a way to see what Clojurescript version is used when compiling and to specify which version to use?
in theory it is possible yes but due to some backwards incompatible changes in CLJS you currently have to use 1.10.238
Ah okay, not sure I'm doing it right. In the :dependencies
in the shadow-cljs.edn
? When I do that it doesn't give me the shadow-cljs - updating dependencies
message that I normally see.
and you can't currently downgrade that due to a breaking change in the closure interop
@lee.justin.m @jmckitrick just pushed [email protected]
. you can set :devtools {:proxy-url "
and all requests that would otherwise 404 will be proxied to that url instead
probably needs some more advanced config options to only proxy specific paths and such
haha okay. so what c-r-a does is check the mime type so that only api requests go to the api server. The development server will only attempt to send requests without text/html in its Accept header to the proxy.
i think the idea is that you serve static resources off of your development server but just proxy api reqeusts
Awesome! I’ll check it out soon. And I’ll read up on nginx too