Anyone successfully integrated Svelte into Phoenix 1.6.x + esbuild?

Hey. I haven’t integrated Svelte into my projects, but what is your exact difficulty? Are you trying to avoid using NPM? If so, unless someone pre-packages svelte into an hex package you will have to use NPM, because other than that I don’t see a major difference between integrating Svelte into Phoenix than any other Backend framework.

Unless you mean SvelteKit? That would be pretty much impossible at this stage to integrate other than just using Phoenix for the service side of things (Rest or GraphQL, etc.).

I surely would be happy to get rid of node but since it’s there for other reasons anyway, so that’s not about it. It’s about integrating Svelte into the watch'n build process. IOW - I’d like to have .svelte components built and usable in Phoenix application. Similar to how other “assets” are built on-the-fly as needed in dev environment. the Mostly for some interactive and reactive widgets here and there. Something what I had for the previous versions. Setup well outlined here: https://dkuku.github.io/phoenix-svelte-setup

So basically the problem is replacing Webpack with esbuild for Svelte.
Because after that is a matter of adding a watcher in the dev config file to watch the npm build process.
Apparently esbuild is not as well supported in svelte as in webpack, it is possible with something like this: GitHub - EMH333/esbuild-svelte: An esbuild plugin to compile Svelte components · GitHub there is also an example of a plugin from evan: can we use Svelte in esbuild? · Issue #8 · evanw/esbuild · GitHub but that is kinda an old issue, don’t know how well it works.

Yeah, I found those, plus
https://esbuild.github.io/plugins/#svelte-plugin
but I would appreciate some hints how to correctly plug that into Phoenix/mix

I use svelte and liveview, just not in the same project. In both cases, I use snowpack, I would imagine that it should have no problem handling both svelte and liveview together. Also, snowpack can optionally use esbuild underneath as a JavaScript minimizer

@silverdr I made this little demo just for educational purposes where I integrate phoenix 1.6, esbuild, svelte and tailwindcss , GitHub - roger120981/svelte_phoenix: Template to integrate phoenix.16, esbuild, svelte and tailwindcss · GitHub , Just a detail in the case of tailwindcss being in a windows 10 environment, I had to make some modifications to the original watcher, but it works perfectly in linux and svelte works well, only that it is a small step for complex apps.

pd: Use esbuild-svelte as a svelte plugin

This looks promising, thank you! I’ll have a closer look and report. In my case it is enough if it works with Linux and OSX.

@silverdr ok, I just created and updated a branch that works on linux / osx https://github.com/roger120981/svelte_phoenix/tree/linux-tailwind

I did a quick git clone followed by mix deps.get and when trying to run the server I get a few warnings:

warning: :telemetry.span/3 is undefined (module :telemetry is not available or is yet to be defined

followed by:

could not compile dependency :phoenix_live_dashboard, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile phoenix_live_dashboard", update it with "mix deps.update phoenix_live_dashboard" or clean it with "mix deps.clean phoenix_live_dashboard"
** (MatchError) no match of right hand side value: {:error, {:telemetry, {'no such file or directory', 'telemetry.app'}}}
    (phoenix 1.6.2) lib/mix/tasks/compile.phoenix.ex:19: Mix.Tasks.Compile.Phoenix.run/1
    (mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.13.0) lib/mix/tasks/compile.all.ex:92: Mix.Tasks.Compile.All.run_compiler/2
    (mix 1.13.0) lib/mix/tasks/compile.all.ex:72: Mix.Tasks.Compile.All.compile/4
    (mix 1.13.0) lib/mix/tasks/compile.all.ex:59: Mix.Tasks.Compile.All.with_logger_app/2
    (mix 1.13.0) lib/mix/tasks/compile.all.ex:36: Mix.Tasks.Compile.All.run/1
    (mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.13.0) lib/mix/tasks/compile.ex:131: Mix.Tasks.Compile.run/1

This is on Linux / master branch. If I switch to linux-tailwind branch I get:

Error: Cannot find module 'esbuild'
Require stack:
- /home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets/build.js'
  ]
}
[error] Task #PID<0.467.0> started from SveltePhoenixWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.6.2) lib/phoenix/endpoint/watcher.ex:55: Phoenix.Endpoint.Watcher.watch/2
    (elixir 1.13.0) lib/task/supervised.ex:89: Task.Supervised.invoke_mfa/2
    (stdlib 3.16.1) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["node", ["build.js", "--watch", {:cd, "/home/silverdr/sources/silverdr/elixir/svelte_phoenix/assets"}]]
internal/modules/cjs/loader.js:905
  throw err;
  ^

Any quick fixes for that?

In the case of the esbuild error, just install the dependency, cd assets npm i esbuild, must be above 0.9.6 which is the version that svelte-esbuild needs, in this case it tells you that it cannot find that module because it has not been installed

In the case of elixir I use version 1.12.1, erlang otp 23 and it compiles well for windows 10 and for linux with the ubuntu 18.04 distro