gilest

gilest

Hi all

Relatively new to Elixir, but was curious to see how Phoenix might run with a basic importmap configuration.

Introducing, phoenix_importmap.

Benefits:
In dev - minimal file-based tooling, removal of esbuild transpilation step, parity with prod
In prod - more granular caching of js files since they are many rather than a few bundles

Curious to know if folks are interested in this approach, anyway.

Usual disclaimer - this is an early stage library. I’ve not yet used it in prod :slightly_smiling_face:

https://github.com/gilest/phoenix_importmap

Showing Posts 1 to 4

jakeprem

jakeprem

This is really interesting thanks for making it!

I’ll have to take a closer look next time I venture outside the LiveView bubble.

derek-zhou

derek-zhou

Neat. I am using a more bare bone nobuild setup. I made sym links of phoenix js into my static dir:

derek@roastidious:~/projects/gara$ ls -al priv/static/js/
total 36
drwxr-xr-x 3 derek derek 4096 Mar  3 16:20  .
drwxr-xr-x 7 derek derek 4096 Oct 12 15:00  ..
-rw-r--r-- 1 derek derek 2160 Oct 12 15:08  app.js
drwxr-xr-x 2 derek derek 4096 Apr  8  2023  _hooks
lrwxrwxrwx 1 derek derek   54 Oct 12 14:49  phoenix_html.js -> ../../../deps/phoenix_html/priv/static/phoenix_html.js
lrwxrwxrwx 1 derek derek   45 Oct 12 14:51  phoenix.js -> ../../../deps/phoenix/priv/static/phoenix.mjs
lrwxrwxrwx 1 derek derek   68 Oct 12 14:52  phoenix_live_view.js -> ../../../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js

Then I directly import those phoenix js in my app.js:

import "./phoenix_html.js";
import {Socket} from "./phoenix.js";
import {LiveSocket} from "./phoenix_live_view.js";
import Hooks from "./_hooks/index.js";

If I need to use more than a couple of npm modules, I will consider using the importmap package.

jakeprem

jakeprem

Do these get copied correctly when you build releases too?

derek-zhou

derek-zhou

I don’t copy assets from assets/ to priv/ any more. My original js and css lives directly under priv/static/ and the phoenix js are symlink’ed to priv/static/js/ and remain that way in the release. The symlinks are flatten in deploy.

— All posts loaded —

Where Next? Top

Trending in RFCs Top

nikolis
BeamScope Why I created this: Needed some very particular metrics regarding the state of my Elixir cluster in a relatively small project...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews