Fork me on GitHub
#clojurescript
<
2019-06-25
>
introom11:06:56

i want to build a website with lookandfeels like this: https://www.scala-lang.org/

introom11:06:33

any convenient library to recommend?

introom11:06:24

it seems i shall go with bootstrap and buy some nice looking themes on their websites

tavistock12:06:13

what that makes that website looks nice is a lot of graphic design work, i doubt the framework chosen matters, but bootstrap is nice

Michael Mackenzie17:06:29

has anyone ever successfully built un uberjar for a clojure/clojurescript app that had pure javascript dependencies through yarn or npm (i.e. not cljsjs)?

Michael Mackenzie17:06:00

it works when i use lein run after compiling the cljs, but the uberjar is missing all of the JS dependencies at runtime

lilactown17:06:27

as part of building the uberjar, you need to compile the CLJS and put the resulting built artifact in the uberjar

Michael Mackenzie17:06:46

i still haven't figured it out. i've since given up on hosting it on Heroku for this reason, and now i'm trying to do it via docker

lilactown17:06:50

this is no different if you are using npm dependencies or not

Michael Mackenzie17:06:07

@lilactown can i send you my project.clj to see if theres anything obviously missing?

Michael Mackenzie17:06:01

i can't find any documentation anywhere that explains it 😞 i've been stuck for a week now unable to deploy anywhere 😕

lilactown17:06:35

it depends on how you are building the CLJS. are you using lein-cljsbuild?

Michael Mackenzie17:06:51

no, i'm currently using shadow-cljs

Michael Mackenzie17:06:36

i tried initially with lein-cljsbuild but it failed for some other reason

lilactown17:06:44

OK, cool. so it will be a two-step process: 1. Build CLJS app using shadow-cljs and put it somewhere that’s on the uberjar classpath (e.g. resources/public) 2. Build uberjar

Michael Mackenzie17:06:33

ok - that sounds new

Michael Mackenzie17:06:36

i'l try that right now

Michael Mackenzie17:06:15

currently it outputs to target/cljsbuild/public/js

lilactown17:06:27

is that on the classpath?

lilactown17:06:40

that example I gave probably will not work for you, it was just an example

Michael Mackenzie17:06:01

i feel like it is on the classpath... it doesn't complain about the compiled file app.js missing

lilactown17:06:15

how are you serving the app.js?

Michael Mackenzie17:06:21

in fact the error at runtime comes out of app.js, where it adds the script tags for the NPM deps

Michael Mackenzie17:06:36

i'm using the luminus stack

lilactown17:06:43

script tags for npm deps??

Michael Mackenzie17:06:56

CLJS does that at runtime

Michael Mackenzie17:06:08

it's in the compiled javascript code

Michael Mackenzie17:06:22

it's how it loads dependencies into the DOM

lilactown17:06:34

OK, let me amend my instructions

lilactown17:06:48

1. you need to do a release build using shadow-cljs 2. build the uberjar

lilactown17:06:05

a release build will not add script tags, it will bundle it all into one file app.js

lilactown17:06:28

this way you don’t need to have all of the npm deps installed inside of your uberjar

Michael Mackenzie17:06:32

{:uberjar {:omit-source true
             :prep-tasks ["compile" ["shadow" "release" "app"]]
             
             :aot :all
             :uberjar-name "getfluentspanish.jar"
             :source-paths ["env/prod/clj" "env/prod/cljs"]
             :resource-paths ["env/prod/resources"]}

lilactown17:06:36

the app.js will contain all the files

Michael Mackenzie17:06:42

this is the profile... looks like it's already tryingh to do that

lilactown17:06:06

yes it looks like

lilactown17:06:07

I don’t know much about luminus, you might try #luminus

lilactown17:06:53

it sounds like it’s doing a lot of stuff automatically for you, which is nice, but if the release artifact isn’t in the uberjar, I’m not sure

Michael Mackenzie17:06:44

one thing is that it is bundling app.js separately from the deps in the output folder

lilactown17:06:52

if you do shadow-cljs release app and look in the env/prod/resources folder, do you see the app.js?

Michael Mackenzie17:06:03

i have app.js and then a cljs-build/ directory full of hundreds of javascript files

lilactown17:06:25

yes that’s fine

Michael Mackenzie17:06:15

there is nothing in env/prod/resources except config.edn and logback.xml

Michael Mackenzie17:06:23

i don't think in my project that is supposed to be a build output dir

Michael Mackenzie17:06:37

woah ok now the app.js is bigger - 1MB compared to 128k before

Michael Mackenzie17:06:47

after lein shadow release app

Michael Mackenzie17:06:51

maybe we've got something now...

lilactown17:06:04

go ahead and link me your project.clj

lilactown17:06:41

did you change the output dir?

lilactown17:06:47

in the :shadow config

Michael Mackenzie17:06:40

no, i believe it was what luminus gave me by default with the +shadow-cljs addon

Michael Mackenzie17:06:58

i.. i think it's working right now from the docker image i built

Michael Mackenzie17:06:05

i have absolutely no idea how

Michael Mackenzie17:06:22

i'm not sure what happened or if this is going to spontaneously revert to messing up again, but it seems like i can actually build uberjars with NPM deps now...

Michael Mackenzie17:06:08

just for the hell of it, i'll try a heroku deploy too, but i imagine that still won't work

Michael Mackenzie17:06:40

yep, still fails on heroku

Michael Mackenzie17:06:57

but maybe via the docker image i can deploy to some PaaS now

Michael Mackenzie17:06:33

@lilactown thanks a lot for your help again. I don't know what happened, but at least I understand the CLJS build process a bit better now

lilactown17:06:45

The docker build is probably picking up your local build artifacts

lilactown17:06:08

So something on Heroku is not running the shadow release command

Michael Mackenzie17:06:15

the docker build runs the uberjar

lilactown17:06:40

Yes, and that uverjar has files that come from your local system

lilactown17:06:56

Iirc Heroku builds it for you from your git repo

Michael Mackenzie17:06:57

remote:        Preparing npm packages
remote:        Installing npm packages
remote:        npm packages successfully installed
remote:        Running shadow-cljs...
remote:        [:app] Compiling ...
remote:        The required JS dependency "object-assign" is not available, it was required by "node_modules/react/cjs/react.production.min.js".
remote:
remote:        Searched in:/tmp/build_b5551ab5f6bbfd1f0bbb0a1210e21209/node_modules
remote:
remote:        You probably need to run:
remote:          npm install object-assign
remote:
remote:        See: 
remote:
remote:  !     Failed to build.
remote:  !     Push rejected, failed to compile Clojure (Leiningen 2) app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !	Push rejected to getfluentspanish.
remote:

Michael Mackenzie17:06:07

that's what Heroku gives me

Michael Mackenzie17:06:43

yes, sorry I wasn't disagreeing about that, I just mean that i'm not sure what the difference is between how Heroku is building the uberjar and how I am locally

Michael Mackenzie17:06:04

it worked via docker on Heroku 🎉

lilactown17:06:06

have you tried installing the object-assign dependency?

Michael Mackenzie17:06:15

it just goes down a rabbithole

Michael Mackenzie17:06:21

it is then missing another dependency

lilactown17:06:27

it might be some issue with lein npm and Heroku

Michael Mackenzie17:06:37

every implicit dependency of the listed NPM deps

lilactown17:06:56

I would ask in #luminus if anyone has experience with Heroku + shadow-cljs

lilactown17:06:02

or open an issue on the luminus repo

lilactown17:06:15

but if Docker works for now, cool

lilactown17:06:38

you just have to build your docker image locally it sounds like

Michael Mackenzie17:06:07

unfortunately, although it sort of works now, i get mysterious runtime javascript errors

Michael Mackenzie17:06:17

Uncaught TypeError: Cannot read property 'b' of null
    at app.js:1470
    at dE (app.js:1470)
    at eE (app.js:1470)
    at app.js:1474
    at Object.drop (app.js:428)
    at app.js:296
    at Array.forEach (<anonymous>)
    at a.<anonymous> (app.js:296)
    at Object.drop (app.js:336)
    at handleTopDrop (app.js:487)

Michael Mackenzie17:06:23

when i try to use a drag and drop activity i wrote

Michael Mackenzie17:06:32

probably something with the minification...

Michael Mackenzie17:06:47

nothing ever just "works" haha 😞

lilactown17:06:52

probably some code you wrote that doesn’t work with advanced optimizations

Michael Mackenzie17:06:59

i'll play around with it

lilactown17:06:12

you should be able to debug locally with the release build

lilactown17:06:28

you can add —debug to the shadow-cljs release command so it will have easier to read names

Michael Mackenzie17:06:36

ok i'll take a look