如何设置figwheel-main重新加载clojure后端提供的代码

Question

我已经在网上，谷歌等网站上找到了答案，但是找不到任何可以帮助我完成尝试的事情：

这是场景-我已经运行了一个码头服务器实例并提供了打ic生成的html内容的clojure代码。

我已将clojurescript添加到混合物中以使用试剂服务于前端。 例如，jetty服务的页面具有div id =“ app”，试剂编译的app.js为此重写了dom。

到目前为止，一切正常。.我已配置lein运行clojure代码，并将clojurescript代码构建到app.js中，并将其放在lein配置中的资产路径中。

现在，我正在尝试使用figwheel-main ..来热重载此app.js代码。 使用figwheel-main，它会打开一个单独的浏览器URL，该URL可以热加载内容。.但是它未连接到提供内容的clojure后端。 即figwheel-main在localhost：9500上显示clojurescript代码，而jetty在端口3000上运行。

我希望能够在修改clojurescript代码时看到码头实例提供的app.js的热重载。

我不知道如何完成这项工作。

我已经尝试过figwheel-main教程中的配置-ie deps.edn等，但无法弄清楚如何将其与现有clojure代码集成在一起。

(defproject myproject "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "EPL-2.0 OR GPL-2.0-or-later WITH Classpath-exception-2.0"
            :url "https://www.eclipse.org/legal/epl-2.0/"}
  :dependencies [[org.clojure/clojure "1.10.0"]
                 [metosin/reitit "0.3.7"]
                 [ring "1.7.1"]
                 [migratus "1.2.3"]
                 [com.h2database/h2 "1.4.199"]
                 [org.postgresql/postgresql "42.2.5"]
                 [org.clojure/java.jdbc "0.7.9"]
                 [cumulus "0.1.2"]
                 [com.layerware/hugsql "0.4.9"]
                 [selmer "1.12.12"]
                 [ring-webjars "0.2.0"]
                 [ring/ring-anti-forgery "1.3.0"]
                 [hiccup "1.0.5"]
                 [org.clojure/clojurescript "1.10.520" :scope "provided"]
                 [reagent "0.8.1"]
                 [cljs-ajax "0.8.0"]
                 [org.webjars.npm/bulma "0.7.4"]
                 [org.webjars/font-awesome "5.3.1"]]
  :main ^:skip-aot myproject.core
  :source-paths ["src/clj"]
  :resource-paths ["resources" "target/public"]
  :target-path "target/%s"
  :clean-targets ^{:protect false}
  [:target-path
   [:cljsbuild :builds :app :compiler :output-dir]
   [:cljsbuild :builds :app :compiler :output-to]]
  :cljsbuild {:builds
              [{:source-paths ["src/cljs"]
                :compiler {:main "myproject.core"
                           :asset-path "js/out"
                           :optimizations :none
                           :source-map true
                           :pretty-print true
                           :output-to "target/cljsbuild/public/js/app.js"
                           :output-dir "target/cljsbuild/public/js/out"}}]}
  :plugins [[lein-cljsbuild "1.1.7"]]
  :profiles {:uberjar {:aot :all}
             :dev {:repl-options
                   {:init-ns myproject.core}}

我希望figwheel-main可以处理码头已经提供的内容

Answer 1

请记住，您现在正在运行两个程序，一个在浏览器中的CLJS中运行，另一个在后端的CLJ中运行。 它们通过网络进行通信，这增加了更多的复杂性。

如果您已经在CLJS代码中使用了Reagent，则应在此处添加打ic（作为Reagent组件），而不要在背面添加打h。

如果您在后端有数据，请通过AJAX调用从后端CLJ代码中获取数据，然后通过打ic，SVG等在前端将其呈现。我们使用大型的CLJ + CLJS应用程序来完成此任务，在后端仅通过AJAX调用（基本上是异步子例程调用）访问代码。

Answer 2

一种选择是在开发过程中运行一个Web服务器（例如Nginx在端口9000上监听），该服务器将掩盖Figwheel和Jetty运行的不同端口。

您可以通过将请求转发到端口3449上的Figwheel以及将位置/api转发到端口3000上的Jetty（将后端由Jetty服务）来配置Nginx为静态文件提供位置/的静态文件。

在开发过程中，您将连接到端口9000，看起来一切都在该端口上运行。 我不确定的一件事是Figwheel使用的websocket，但是值得尝试。

您可以在Nginx文档中查找示例： https : //docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/，但是示例配置如下所示：

server {
  listen 9000;
  listen [::]:9000;

  location / {
      proxy_pass http://localhost:3449/;
  }

  location /api {
      proxy_pass http://localhost:3000/;
  }

}