search

woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 38 forks source link

Docker issue mix assets.deploy #20

Closed woutdp closed 1 year ago

woutdp commented 1 year ago

Reported by victorbjorklund: https://elixirforum.com/t/livesvelte-e2e-reactivity-in-liveview-with-svelte/54822/2?u=woutdp

But getting some errors when building in Docker:

=> ERROR [builder 16/20] RUN mix assets.deploy 1.3s
[builder 16/20] RUN mix assets.deploy:
#26 1.253 /app/assets/node_modules/esbuild-svelte/dist/index.js:23
#26 1.253 const svelteFilter = (options == null ? void 0 : options.include) ?? SVELTE_FILTER;
#26 1.253 ^
#26 1.253
#26 1.253 SyntaxError: Unexpected token ‘?’
#26 1.253 at wrapSafe (internal/modules/cjs/loader.js:915:16)
#26 1.253 at Module._compile (internal/modules/cjs/loader.js:963:27)
#26 1.253 at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
#26 1.253 at Module.load (internal/modules/cjs/loader.js:863:32)
#26 1.253 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
#26 1.253 at Module.require (internal/modules/cjs/loader.js:887:19)
#26 1.253 at require (internal/modules/cjs/helpers.js:74:18)
#26 1.253 at Object. (/app/assets/build.js:2:22)
#26 1.253 at Module._compile (internal/modules/cjs/loader.js:999:30)
#26 1.253 at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
#26 1.268 ** (exit) 1
#26 1.268 (mix 1.14.2) lib/mix/tasks/cmd.ex:74: Mix.Tasks.Cmd.run/1
#26 1.268 (mix 1.14.2) lib/mix/task.ex:421: anonymous fn/3 in Mix.Task.run_task/4
#26 1.268 (mix 1.14.2) lib/mix/task.ex:479: Mix.Task.run_alias/6
#26 1.268 (mix 1.14.2) lib/mix/cli.ex:84: Mix.CLI.run_task/2

executor failed running [/bin/sh -c mix assets.deploy]: exit code: 1

Not sure if error is LiveSvelte, Esbuild-svelte or Docker.

victorbjorklund commented 1 year ago

Seems that this was just me making a mistake in my dockerfile setup. However I seem to have tun into a problem that is an issue with Docker. App runs fine on local computer. But when deploying using Docker (even if Docker Desktop) is isn't possible to start the NodeJS process:

{NodeJS.Supervisor, [path: "#{File.cwd!()}/assets", pool_size: 1]},

If I remove it from the application tree then it starts (but I assume it is needed since it is there). Even if start it manually in a iex in the container I get errors: 


Interactive Elixir (1.14.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(simple_svelte@6fbb9c86b778)1>  NodeJS.start_link([path: "/app/assets", pool_size: 1])
** (EXIT from #PID<0.1452.0>) shell process exited with reason: shutdown: failed to start child: NodeJS.Supervisor.Pool
    ** (EXIT) an exception was raised:
        ** (MatchError) no match of right hand side value: {:error, {:enoent, [{:erlang, :open_port, [{:spawn_executable, nil}, [line: 65536, env: [{'NODE_PATH', '/app/assets:/app/assets/node_modules'}, {'WRITE_CHUNK_SIZE', '65536'}], args: ["/app/lib/nodejs-2.0.0/priv/server.js"]]], [error_info: %{module: :erl_erts_errors}]}, {NodeJS.Worker, :init, 1, [file: 'lib/nodejs/worker.ex', line: 51]}, {:gen_server, :init_it, 2, [file: 'gen_server.erl', line: 851]}, {:gen_server, :init_it, 6, [file: 'gen_server.erl', line: 814]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}}
            (poolboy 1.5.2) /app/deps/poolboy/src/poolboy.erl:283: :poolboy.new_worker/1
            (poolboy 1.5.2) /app/deps/poolboy/src/poolboy.erl:304: :poolboy.prepopulate/3
            (poolboy 1.5.2) /app/deps/poolboy/src/poolboy.erl:153: :poolboy.init/3
            (stdlib 4.1.1) gen_server.erl:851: :gen_server.init_it/2
            (stdlib 4.1.1) gen_server.erl:814: :gen_server.init_it/6
            (stdlib 4.1.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3

Interactive Elixir (1.14.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(simple_svelte@6fbb9c86b778)1> 
12:04:29.741 [error] GenServer #PID<9246.1456.0> terminating
** (MatchError) no match of right hand side value: {:error, {:enoent, [{:erlang, :open_port, [{:spawn_executable, nil}, [line: 65536, env: [{'NODE_PATH', '/app/assets:/app/assets/node_modules'}, {'WRITE_CHUNK_SIZE', '65536'}], args: ["/app/lib/nodejs-2.0.0/priv/server.js"]]], [error_info: %{module: :erl_erts_errors}]}, {NodeJS.Worker, :init, 1, [file: 'lib/nodejs/worker.ex', line: 51]}, {:gen_server, :init_it, 2, [file: 'gen_server.erl', line: 851]}, {:gen_server, :init_it, 6, [file: 'gen_server.erl', line: 814]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}}
    /app/deps/poolboy/src/poolboy.erl:283: :poolboy.new_worker/1
    /app/deps/poolboy/src/poolboy.erl:304: :poolboy.prepopulate/3
    /app/deps/poolboy/src/poolboy.erl:153: :poolboy.init/3
    (stdlib 4.1.1) gen_server.erl:851: :gen_server.init_it/2
    (stdlib 4.1.1) gen_server.erl:814: :gen_server.init_it/6
    (stdlib 4.1.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
Last message: {:EXIT, #PID<9246.1455.0>, {{:badmatch, {:error, {:enoent, [{:erlang, :open_port, [{:spawn_executable, nil}, [line: 65536, env: [{'NODE_PATH', '/app/assets:/app/assets/node_modules'}, {'WRITE_CHUNK_SIZE', '65536'}], args: ["/app/lib/nodejs-2.0.0/priv/server.js"]]], [error_info: %{module: :erl_erts_errors}]}, {NodeJS.Worker, :init, 1, [file: 'lib/nodejs/worker.ex', line: 51]}, {:gen_server, :init_it, 2, [file: 'gen_server.erl', line: 851]}, {:gen_server, :init_it, 6, [file: 'gen_server.erl', line: 814]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}}}, [{:poolboy, :new_worker, 1, [file: '/app/deps/poolboy/src/poolboy.erl', line: 283]}, {:poolboy, :prepopulate, 3, [file: '/app/deps/poolboy/src/poolboy.erl', line: 304]}, {:poolboy, :init, 3, [file: '/app/deps/poolboy/src/poolboy.erl', line: 153]}, {:gen_server, :init_it, 2, [file: 'gen_server.erl', line: 851]}, {:gen_server, :init_it, 6, [file: 'gen_server.erl', line: 814]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}}
State: {:state, {#PID<9246.1456.0>, :poolboy_sup}, :simple_one_for_one, {[NodeJS.Worker], %{NodeJS.Worker => {:child, :undefined, NodeJS.Worker, {NodeJS.Worker, :start_link, [["/app/assets"]]}, :temporary, false, 5000, :worker, [NodeJS.Worker]}}}, {:mapsets, %{}}, 0, 1, [], 0, :never, :poolboy_sup, {NodeJS.Worker, ["/app/assets"]}}

Seems more a problem with NodeJS package than with live_svelte but I assume a lot of people uses docker to deploy phoenix apps so it might still be worthwhile to investigate how to set it up to work in docker. When/if I figure out how to fix it I will post here

woutdp commented 1 year ago

Do you have node installed in the production environment? It's possible that Docker installs node for the initial build step but then removes it for the deployment.

You can check by running node --version inside the production environment.

The reason it works without including the NodeJS.Supervisor is because we disable SSR if the supervisor is not set, so everything would work except for SSR.

woutdp commented 1 year ago

Might have been related to https://github.com/woutdp/live_svelte/issues/20

Please try again to see if it's working now with the latest version. Best to go through the installation steps again as some things have change, I have it working in a production environment on fly.io

woutdp commented 1 year ago

I've also added a Dockerfile in https://github.com/woutdp/live_svelte/blob/master/example_project/Dockerfile

This is the Dockerfile I'm using for deploying to fly.io.