es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo crear una aplicación de varias páginas con Figwheel y Leiningen?

12 Jun, 2023 Programación

Tengo una aplicación simple de Figwheel que está construida con Leiningen. Quiero tener varias páginas en ella:

  • index.html debería usar el código de hello-figwheel.core.
  • page2.html debería usar el código de hello-figwheel.page2.

Supongo que tengo que modificar de alguna manera el archivo project.clj:

:compiler {:main hello-figwheel.core
:asset-path “js/compiled/out”
:output-to “resources/public/js/compiled/hello_figwheel.js”
:output-dir “resources/public/js/compiled/out”
:source-map-timestamp true
;; Para console.log CLJS en Chrome asegúrese de habilitar devtools
;; https://github.com/binaryage/cljs-devtools
:preloads [devtools.preload]}}

¿Cómo puedo decirle a Leiningen que compile hello-figwheel.core en resources/public/js/compiled/hello_figwheel.js y hello-figwheel.page2 en resources/public/js/compiled/page2.js?

Hay una pregunta similar. La diferencia con esta es que se usa Leiningen para ejecutar Figwheel.

Actualización 1: agregué lo siguiente al archivo project.clj:

{
:id “page2”
:source-paths [“src”]
:compiler {
:output-dir “resources/public/js/compiled/page2”
:output-to “resources/public/js/compiled/page2/main.js”
:main hello-figwheel.page2
:asset-path “js/compiled/out”
:source-map-timestamp true
;; Para console.log CLJS en Chrome asegúrese de habilitar devtools
;; https://github.com/binaryage/cljs-devtools
:preloads [devtools.preload]}

        :figwheel {:on-jsload "hello-figwheel.page2/on-js-reload"
                   :open-urls ["http://localhost:3449/page2.html"]}

}

Cuando ejecuto lein figwheel, el REPL no puede conectarse a mi aplicación web. Dice “Prompt will show when Figwheel connects to your application”, pero nunca sucede.

Además, si abro http://localhost:3449/page2.html en el navegador, actualizo page2.cljs y actualizo la página en el navegador, los cambios no son visibles allí.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para compilar hello-figwheel.core a resources/public/js/compiled/hello_figwheel.js y hello-figwheel.page2 a resources/public/js/compiled/page2.js usando Leiningen, debes modificar el archivoproject.clj de la siguiente manera:

    (defproject hello-figwheel "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  ;; Agregar una nueva entrada para la página2
  :cljsbuild {:builds [{:id "core"
                         :source-paths ["src"]
                         :compiler {:output-to "resources/public/js/compiled/hello_figwheel.js"
                                    :main hello-figwheel.core
                                    :asset-path "js/compiled/out"
                                    :output-dir "resources/public/js/compiled/out"
                                    :source-map-timestamp true
                                    :preloads [devtools.preload]}
                         }
                        ;; Agregar una nueva compilación para la página2
                        {:id "page2"
                         :source-paths ["src"]
                         :compiler {:output-to "resources/public/js/compiled/page2.js"
                                    :main hello-figwheel.page2
                                    :asset-path "js/compiled/out"
                                    :output-dir "resources/public/js/compiled/out"
                                    :source-map-timestamp true
                                    :preloads [devtools.preload]}
                         }]
              }
  :repl-options {:init-ns hello-figwheel.core})

    En este archivo modificado project.clj se definen dos compilaciones, core para el espacio de nombre hello-figwheel.core y page2 para el espacio de nombre hello-figwheel.page2. Los archivos de salida para estas compilaciones se establecen en resources/public/js/compiled/hello_figwheel.js y resources/public/js/compiled/page2.js, respectivamente.

    Para ejecutar Figwheel y conectarte a tu aplicación, ejecuta lein figwheel en tu terminal. Si haces cambios en hello-figwheel.core, se reflejarán en index.html. Si haces cambios en hello-figwheel.page2, se reflejarán en page2.html.

    Si el REPL no puede conectarse a tu aplicación web, asegúrate de que tu navegador web esté ejecutándose y apuntando a http://localhost:3449/`. Si los cambios que haces enhello-figwheel.page2no son visibles en tu navegador cuando actualizas la página, verifica queresources/public/page2.htmlesté haciendo referencia correctamente apage2.js` de la siguiente manera:

    <!DOCTYPE html>
<html>
  <head>
    <title>Hello Figwheel Page 2</title>
    <script src="js/compiled/out/goog/base.js"></script>
    <script src="js/compiled/page2.js"></script>
    <script>goog.require('hello_figwheel.page2');</script>
    <link rel="stylesheet" href="css/page2.css">
  </head>
  <body>
    <h1>Hello Figwheel Page 2</h1>
    <div id="app"></div>
  </body>
</html>

    Si el directorio src contiene tanto hello-figwheel.core.cljs como hello-figwheel.page2.cljs, entonces estás listo para continuar. De lo contrario, si están en directorios separados, modifica las rutas de los espacios de nombres en consecuencia.

    Esto debería permitirte ejecutar varias páginas en la misma aplicación Figwheel usando Leiningen.

Comments are closed.