Fork me on GitHub
#figwheel-main
<
2021-04-28
>
badchicken01:04:46

Hi, so I'm new to clojurescript, and I like the leiningen figwheel-main template, but I'd like to deploy to Heroku. I think Heroku sets the port via a PORT environment variable. Is there a way to make an application created with the figwheel-main template use the PORT environment variable instead of the :port in :ring-server-options . The documentation mentions that if you find yourself using the :ring-server-options "you probably need to run your own server outside of figwheel.main". Maybe that's what I need to do. Does anyone have any good examples of how to do that? Thanks!

seancorfield02:04:11

@badchicken2 Do you actually have a server-side piece to your app or is it pure cljs?

seancorfield02:04:58

(I haven’t used lein for years so I can’t help you with that — I’ve only used figwheel-main via the Clojure CLI/`deps.edn`)

badchicken04:04:42

I'm going to have a server-side piece. I'm open to using something besides lein, but basically I want clojurescript/reagent in the UI with clojure server-side, plus figwheel watching/reloading changes during development... and deployable to Heroku. I've spent a lot of time looking at different options, but nothing seems to be quite what I'm looking for. It's pretty confusing as a beginner.

Michaël Salihi07:04:08

@badchicken2 You can check here https://github.com/prestancedesign/todo-backend-clojure-reitit/blob/master/src/todo_backend/core.clj#L72. This is how you can do. FYI, this todo app example run on Heroku. Check also the Procfile used by Heroku to run the JAR version of your app. https://github.com/prestancedesign/todo-backend-clojure-reitit/blob/master/Procfile Hope this can help.

Michaël Salihi09:04:22

> The documentation mentions that if you find yourself using the :ring-server-options "you > probably need to run your own server outside of figwheel.main". Maybe > that's what I need to do. Does anyone have any good examples of how to > do that? This is what your need https://github.com/bhauman/figwheel-main/blob/ead06b94b1b2747ed37e5d8c37118d6e7ae77193/docs/docs/your_own_server.md

👍 2
badchicken13:04:47

Thanks for the link. On the page it says "If you don't already have a host page for your application and you are not sure how to create one, please see the documentation on this subject", but the links are broken so I'm not sure what I need to do with that. What is a host page?

Michaël Salihi13:04:38

Here is the working link: https://github.com/bhauman/figwheel-main/blob/master/docs/docs/your_own_page.md I'll do a PR to fix the document, the *.md extension is missing.

badchicken14:04:23

Following the instructions from your_own_server.md results in an error when I try to run it: "java.io.FileNotFoundException: Could not locate ring/adapter/jetty__init.class, ring/adapter/jetty.clj or ring/adapter/jetty.cljc on classpath".

Michaël Salihi14:04:04

You should put Ring in your dependencies https://github.com/ring-clojure/ring

[ring/ring "1.9.3"]

badchicken14:04:46

I'll take a look at figwheel-heroku. Adding ring to the dependencies didn't help.

badchicken14:04:49

Also, this problem happens whether I created the project with lein or with clj (using the examples on https://github.com/bhauman/figwheel-main-template)

Michaël Salihi14:04:03

Are your restart the REPL after the dependencie update?

Michaël Salihi14:04:25

Did you had ring/ring not only ring/ring-core? Ring-core doesn't contains ring.adapter.jetty server

badchicken14:04:32

I did. Here's an example of what I'm doing.

Michaël Salihi15:04:24

OK I see, the Figwheel doc is incomplete. With the scripts/server.cljs example, you need more dependencies:

{:deps {org.clojure/clojure {:mvn/version "1.10.0"}
        org.clojure/clojurescript {:mvn/version "1.10.773"}
        ring/ring {:mvn/version "1.9.3"}
        ring/ring-defaults {:mvn/version "0.3.2"}
        com.bhauman/figwheel-main {:mvn/version "0.2.13"}
        com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
        reagent {:mvn/version "0.10.0" }}
 :paths ["src" "resources" "target"]
 :aliases {:fig {:extra-deps
                  {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
                   com.bhauman/figwheel-main {:mvn/version "0.2.11"}}
                 :extra-paths ["target" "test"]}
           :build {:main-opts ["-m" "figwheel.main" "-b" "dev" "-r"]}
           :min   {:main-opts ["-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]}
           :test  {:main-opts ["-m" "figwheel.main" "-co" "test.cljs.edn" "-m" "yourname.test-runner"]}}}

badchicken16:04:37

Hey, that worked! I also added "test" to the :paths to quell a warning. Thank you so much for all your help! This is one area that I think the Clojure ecosystem could use some improvement. There are so many different examples of how to cobble together an app and development environment, some of which don't quite work as described. It's challenging if you're new to Clojure.

Michaël Salihi16:04:57

You're welcome! Glad to know that works.

Michaël Salihi16:04:50

Yes I agree, there are room to some improvements here. The learning curve is steep at the beginning but once that is over it is much smoother. I think that at the moment there is a good progression on the resources (tutorials, articles, etc).

Michaël Salihi14:04:00

Take a look at this template, it should help you: https://github.com/kliph/figwheel-heroku

emccue14:04:49

@badchicken2 What you want is roughly a scheme like this

emccue14:04:35

Figwheel runs as a server on port X. It watches your source directory and moves compiled artifacts to some directory /js/path

emccue14:04:54

You have a separate server you have written running on port Y

emccue14:04:24

this server includes all your api endpoints, features, and serves the javascript stored in /js/path when requested

emccue14:04:12

you open your web browser to the server running on port Y, which serves some html that includes the "root" js stored at /js/path

emccue14:04:40

when the code loads, it will look for port X and connect to the figwheel server running there

emccue14:04:04

the code for doing that is injected by figwheel as part of compilation in dev mode

emccue14:04:03

when you finally deploy your app, you deploy the separate server to heroku

emccue14:04:30

and in the simplest configuration, include a production bundle of the code in /js/path within the jar's resources and serve appropriately

emccue14:04:37

so the builtin server with figwheel that would serve html tends to have pretty limited uses if you are building the frontend in conjunction with a backend

👍 3