First, do you really need an umbrella app ?
I don’t know. I’m following the directions in “Phoenix in Action”, Section 5.1.2.
Now, I’ve done this:
~/phoenix_apps/a_umbrella/apps% mix phx.new.web my_web --no-ecto
giving me this directory structure:
~/phoenix_apps/a_umbrella/apps/my_web% tree -I "outline|solid"
.
├── README.md
├── assets
│ ├── css
│ │ └── app.css
│ ├── js
│ │ ├── app.js
│ │ └── my_setup.js
│ ├── tailwind.config.js
│ └── vendor
│ ├── heroicons
│ │ ├── LICENSE.md
│ │ ├── UPGRADE.md
│ │ └── optimized
│ │ ├── 20
│ │ └── 24
│ ├── jquery.js
│ └── topbar.js
├── lib
│ ├── my_web
│ │ ├── application.ex
│ │ ├── components
│ │ │ ├── core_components.ex
│ │ │ ├── layouts
│ │ │ │ ├── app.html.heex
│ │ │ │ └── root.html.heex
│ │ │ └── layouts.ex
│ │ ├── controllers
│ │ │ ├── error_html.ex
│ │ │ ├── error_json.ex
│ │ │ ├── page_controller.ex
│ │ │ ├── page_html
│ │ │ │ └── home.html.heex
│ │ │ └── page_html.ex
│ │ ├── endpoint.ex
│ │ ├── gettext.ex
│ │ ├── router.ex
│ │ └── telemetry.ex
│ └── my_web.ex
├── mix.exs
├── priv
│ ├── gettext
│ │ ├── en
│ │ │ └── LC_MESSAGES
│ │ │ └── errors.po
│ │ └── errors.pot
│ └── static
│ ├── favicon.ico
│ └── robots.txt
└── test
├── my_web
│ ├── channels
│ └── controllers
│ ├── error_html_test.exs
│ ├── error_json_test.exs
│ └── page_controller_test.exs
├── support
│ └── conn_case.ex
└── test_helper.exs
24 directories, 34 files
I tried adding the file:
// ...assets/js/jquery_setup.js
import jQuery from "../vendor/jquery"
window.jQuery = jQuery
window.$ = jQuery
I downloaded jQuery, and I put it here:
//…assets/vendor/jquery.js
My ../assets/js/app.js file looks like this:
// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"
// You can include dependencies in two ways.
//
// The simplest option is to put them in assets/vendor and
// import them using relative paths:
//
// import "../vendor/some-package.js"
//
// Alternatively, you can `npm install some-package --prefix assets` and import
// them using a path starting with the package name:
//
// import "some-package"
//
//Setup jQuery:
import "./jquery_setup.js"
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
Second, you just generate a template for an umbrella app, please follow the steps in Overview — Phoenix v1.7.2 1, how to create a phoenix app and how to integrate third party JS libs
I read that before I posted, and I tried this:
Asset Management
Beside producing HTML, most web applications have various assets (JavaScript, CSS, images, fonts and so on).
From Phoenix v1.7, new applications use esbuild to prepare assets via the Elixir esbuild wrapper, and tailwindcss via the Elixir tailwindcss wrapper for CSS. The direct integration with esbuild and tailwind means that newly generated applications do not have dependencies on Node.js or an external build system (e.g. Webpack).
Your JavaScript is typically placed at “assets/js/app.js” and esbuild will extract it to “priv/static/assets/app.js”. In development, this is done automatically via the esbuild watcher. In production, this is done by running mix assets.deploy.
esbuild can also handle your CSS files, but by default tailwind handles all CSS building.
Finally, all other assets, that usually don’t have to be preprocessed, go directly to “priv/static”.
third-party-js-packages Third-party JS packages
If you want to import JavaScript dependencies, you have two options to add them to your application:
Vendor those dependencies inside your project and import them in your “assets/js/app.js” using a relative path:
import topbar from “../vendor/topbar”
In my browser’s javascript console, I keep getting the error:
ReferenceError: Can’t find variable: $
