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

Question

我已经在网上寻找了答案，谷歌etc..but我找不到任何东西来帮助我做我正在尝试的事情：

这是一个场景--我有一个运行jetty服务器实例的clojure代码，并提供内容，包括由hiccup生成的html。

我已经在混合中加入了clojurescript，以便使用试剂提供前端服务。例如，jetty提供的页面包含和div id=“app.js”，而代理编译的jetty为此重写了dom。

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

现在，我正在尝试使用figwheel main热重载这段app.js代码，但是我什么也没得到。使用figwheel main，它打开一个单独的浏览器url，它可以热重新加载stuff..but这并没有连接到为内容提供服务的clojure后端。即在localhost:9500上显示clojurescript代码，而jetty在端口3000上运行。

当我修改clojurescript代码时，我希望能够看到jetty实例所服务的app.js的热重新加载。

我想不出怎么把这事做完。

我已经尝试过来自figwheel main教程、-i.e、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能够处理jetty已经提供的内容。

Answer 1

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

如果你已经在你的CLJS代码中使用Reagent，你应该在那里(作为Reagent组件)添加呃逆，而不是在背面。

如果你在后端有数据，那么通过AJAX调用从后端CLJ代码中抓取数据，然后通过hiccup、SVG等在前端呈现它。我们在工作中使用一个大型CLJ + CLJS应用程序来实现这一点，其中后端代码只能通过AJAX调用(基本上是一个异步子例程调用)来访问。

Answer 2

一种选择是在开发过程中运行一个web服务器(比如，Nginx监听9000端口)，以屏蔽运行Figwheel和Jetty的不同端口。

您可以配置Nginx为静态文件提供位置/，方法是将请求转发到端口3449上的Figwheel，将位置/api转发到端口3000上的Jetty (您的后端由Jetty提供服务)。

在开发过程中，您将连接到端口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/;
  }

}