Fork me on GitHub
#shadow-cljs
<
2018-05-07
>
heyarne11:05:12

i have a problem in firefox with a self-signed ssl certificate

heyarne11:05:32

i proceeded like described in the user guide

heyarne11:05:41

and the wss:// connection fails

heyarne11:05:44

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 

heyarne11:05:21

(visually i mean)

heyarne11:05:27

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

heyarne11:05:41

the solution seems to be to create my own root ca which i can then use to create the certs

heyarne11:05:09

maybe this is helpful to anybody. i for one am switching to chromium as my dev browser for now. 😕

thheller12:05:54

@arne-clojurians are you using the ssl support built into shadow-cljs or any other webserver?

thheller12:05:42

I'm guessing that you are using a different webserver and shadow-cljs has no ssl configured?

thheller12:05:05

I still haven't figured out how to configure ssl in windows so I can't really test things easily

heyarne12:05:09

no i'm using the shadow-cljs ssl support

heyarne12:05:13

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

thheller12:05:32

hmm I'm pretty sure I tested firefox in my setup on mac

heyarne12:05:14

oh really? maybe i messed up the certificate creation?

heyarne12:05:32

there are a couple of issues on stackoverflow about firefox and self-signed certs with wss

heyarne12:05:52

but the ones i found are already a couple of years old

thheller12:05:18

well if it works fine in chrome I see no reason why it wouldn't work in FF

heyarne12:05:52

yes. if there was a clear standard for this at least.

thheller12:05:49

did you create with SAN and everything?

heyarne12:05:06

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

thheller12:05:07

let me try to figure out this windows thing and then I'll see what FF does

thheller12:05:16

I definitely want this to work

heyarne12:05:03

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

thheller12:05:54

SAN. SubjectAlternateName

thheller12:05:26

chrome complained for me when the cert didn't include that

heyarne12:05:02

It contains the subject name (common name, country) and the issuer name (common name, country). No complaints in current Chromium

thheller13:05:22

I don't understand why this is so fucking complicated ... 😡

hlolli13:05:03

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....

thheller14:05:08

@arne-clojurians finally got this working. you first need to go to https://localhost:9630 and confirm the security exception firefox shows

thheller14:05:18

no idea why it doesn't trust the cert once its installed

thheller14:05:15

but it seems to work fine once you trusted the "main server"

heyarne15:05:00

@thheller thanks so much!

thheller15:05:30

found these instructions for windows/linux. seems more complicated than it should be but works well. https://gist.github.com/jchandra74/36d5f8d0e11960dd8f80260801109ab0

jmckitrick15:05:42

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 😉

jmckitrick15:05:33

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.

thheller15:05:19

good luck 🙂 let me know how it goes

jmckitrick15:05:49

I assume a lein template is still the best way to start a fresh project?

jmckitrick15:05:20

I lean toward luminus now, and it supports front-end-only reagent apps, of course.

jmckitrick15:05:25

But I’m open.

heyarne16:05:27

@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.

heyarne16:05:07

i'm running shadow-cljs watch x via npm script and i'm receiving status 130 when Ctrl + Cing it. is this normal? never noticed it before

jmckitrick16:05:07

I’d like a consistent structure for my colleagues. So I’ll probably use lein new luminus +re-frame or something similar.

heyarne16:05:55

it might be confusing if you don't use the project.clj then though. or are you using lein for everything?

heyarne16:05:03

i just use bare shadow-cljs, which is why i'm asking

thheller16:05:04

@jmckitrick if you only need frontend you can start with this https://github.com/shadow-cljs/quickstart-browser

jmckitrick16:05:07

Ah, good point.

jmckitrick16:05:32

@thheller I’ll try it now….

thheller16:05:31

no idea where that would come from?

thheller16:05:48

did you upgrade to npm v6?

heyarne16:05:29

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.

thheller16:05:41

no idea. I didn't change anything. might be npm v6?

heyarne16:05:00

it is actually. npm 5.8 doesn't show this behavior

thheller16:05:52

> This is probably not a problem with npm

heyarne16:05:17

blatant 😉

jmckitrick16:05:28

Ok, I have the skeleton app running in watch mode, reagent/re-frame are running.

jmckitrick16:05:47

I’ve just imported the in-house navbar component I need, and here’s the error I got:

jmckitrick16:05:15

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)

jmckitrick16:05:50

It looks like I need to get a less processor running, and I’ve not done that before.

jmckitrick16:05:04

But I don’t want to assume….

thheller16:05:39

less is not supported yet but its supposed to get filtered

thheller16:05:51

(def asset-exts
  #{"css"
    "png"
    "jpg"
    "jpeg"
    "svg"})

thheller16:05:53

I'll add less

thheller16:05:08

looks like your in-house stuff has the assumption of using webpack built-in though

jmckitrick16:05:38

Well, there’s support for ES6 or UMD.

jmckitrick16:05:45

Not sure if that assumes webpack for both.

jmckitrick16:05:56

What would I need to change? The author is on our team.

thheller16:05:08

no they do a require("./agent-navigation.less") in the code (or import)

thheller16:05:15

ie. from JS they require a stylesheet

thheller16:05:55

shadow-cljs will just filter those out currently

thheller16:05:09

but that means you must get the styles by other means

jmckitrick16:05:16

Right, that’s the next step.

jmckitrick16:05:44

I assume I can refer to a relative path?

jmckitrick16:05:54

er, a path in node_modules?

jmckitrick16:05:26

Let’s try…

jmckitrick17:05:16

I assume I need to bump my shadow-cljs for your change… or else comment out that line of the module

thheller17:05:41

how are you using shadow-cljs?

jmckitrick17:05:54

I have a server running, and watch running.

thheller17:05:59

you can run shadow-cljs clj-repl

jmckitrick17:05:04

I just started from scratch.

thheller17:05:28

(in-ns 'shadow.build.npm) then

(def asset-exts
  #{"css"
    "scss"
    "sass"
    "less"
    "png"
    "gif"
    "jpg"
    "jpeg"
    "svg"})

thheller17:05:37

no need to wait for me to fix things 😉

thheller17:05:01

then restart the watch and things should work

jmckitrick17:05:04

How does that integrate with server/watch mode?

thheller17:05:15

just do it while server is running

thheller17:05:40

or just run clj-repl itself which then acts the server

thheller17:05:53

can run (shadow/watch :app) in the REPL as well

jmckitrick17:05:37

ok, the error is gone. Now to try the component itself…

thheller17:05:00

hmm 96k files in my node_modules. this is getting out of hand. 😛

jmckitrick17:05:32

So far, so good!

jmckitrick17:05:52

Now I need to set up a proxy to the rest of the app to get a login cookie.

jmckitrick17:05:44

My colleague has a nwb.config.js with a section for devServer and a proxy setting below that.

jmckitrick17:05:01

Let me check the shadow docs first

thheller17:05:59

shadow-cljs itself has no support for acting as a proxy itself

thheller17:05:01

only support putting a proxy in front of it

jmckitrick17:05:55

Hmm. I need to find out how to do that… what tools would work?

jmckitrick17:05:56

Of course, silly me. I assume it could be set up to work the same way… I’ll have to figure that part out.

jmckitrick17:05:34

This proxy setting is only for devtools, correct?

thheller17:05:46

if you only do local development you do not really need it

thheller17:05:29

hmm I could actually add proxy support pretty simlpy

thheller17:05:22

but typically you have something in front of the dev server

thheller17:05:30

not the dev server in front of something

jmckitrick17:05:04

Yes, I’m sure you’re right.

jmckitrick17:05:41

So webpack passes options to another node package that does the proxying.

jmckitrick17:05:08

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.

thheller17:05:28

well what does it proxy to?

jmckitrick17:05:41

Our company login domain, or one of the dev/qa versions

jmckitrick17:05:02

I just need the CLJS app to be able to see the cookies from the company domain.

thheller17:05:04

do you have local dns?

jmckitrick17:05:42

Let me find out…. I’m pretty ignorant of our networking setup.

thheller18:05:07

its not required. just makes things a little easier.

thheller18:05:42

if you proxy to your company domain the cookie that gets set will effectively be localhost (assuming it doesn't set a domain itself)

jmckitrick18:05:18

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.

jmckitrick18:05:57

I guess I’m belaboring the obvious.

thheller18:05:41

I personally use nginx for pretty much all my stuff

thheller18:05:47

in development as well as production

thheller18:05:51

so I'm pretty used to that

justinlee18:05:33

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

thheller18:05:01

is that documented somewhere?

jmckitrick18:05:22

What web server are we running?

jmckitrick18:05:45

Yeah, we have nginx to connect our individual apps to make them run seamlessly on our dev boxes.

jmckitrick18:05:54

I just don’t know it that well 😕

jmckitrick18:05:16

@lee.justin.m That’s exactly what we used

justinlee18:05:26

i should probably just use nginx. the proxy feature is just a convenience.

thheller18:05:46

I'm all for convenience 😉

jmckitrick18:05:48

@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?

justinlee18:05:04

@jmckitrick if you were using create-react-app that’s all you’d need 🙂

jmckitrick18:05:15

Yes, if only, lol.

thheller18:05:17

Challenge accepted!

jmckitrick18:05:51

Hey, I’m willing to help and/or contribute in any way I can!

jmckitrick18:05:17

What’s the server used in shadow?

justinlee18:05:36

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

thheller18:05:11

well the simple version is

wizard 4
jmckitrick18:05:53

Wow, now what? lol.

jmckitrick18:05:14

I guess the next version will have the less fix as well 😉

thheller18:05:11

I'm not happy with the implementation but it seems to work fine

thheller18:05:27

does it need to proxy websockets?

thheller18:05:31

that probably doesn't work

thheller18:05:34

oh hehe. it actually works

justinlee18:05:04

gotta love it when you’re accidentally a genius

thheller18:05:24

I have nothing to do with that. its just an undertow handler

justinlee18:05:46

nobody needs to know that

justinlee18:05:56

can i pull a new version and try it out or is it not ready yet?

Pontus18:05:48

Is there a way to see what Clojurescript version is used when compiling and to specify which version to use?

thheller19:05:12

in theory it is possible yes but due to some backwards incompatible changes in CLJS you currently have to use 1.10.238

thheller19:05:21

otherwise just specify clojurescript in your deps

Pontus17:05:21

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.

thheller17:05:53

shadow-cljs itself it already pinned to 1.10.238 so no need to specify it there

thheller17:05:17

and you can't currently downgrade that due to a breaking change in the closure interop

thheller18:05:10

@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

thheller18:05:26

ie. anything without a file

justinlee18:05:44

how does that interact with push state?

thheller18:05:44

probably needs some more advanced config options to only proxy specific paths and such

thheller18:05:58

completely replaces push-state

thheller18:05:19

thats why I mention the more advanced config options 😉

justinlee18:05:11

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.

thheller18:05:31

but who says that the proxy server can't serve images?

thheller18:05:47

or html for that matter?

justinlee19:05:08

i think the idea is that you serve static resources off of your development server but just proxy api reqeusts

justinlee19:05:25

there’s no real benefit to serving static resources via proxy

thheller19:05:55

well honestly ... you should just be using nginx for all of this

thheller19:05:27

but I guess we can mimic what CRA does

thheller19:05:00

but the proxy support doesn't proxy anything you have a file for

thheller19:05:28

so it only breaks if you actually reload a push-state url

thheller19:05:42

if you load the index initially everything works 😉

jmckitrick19:05:20

Awesome! I’ll check it out soon. And I’ll read up on nginx too