I’ve added a /lib/fish_web/live folder with a hero_component.ex and a hero_component.html.leex - and now I’m chasing the Phoenix.LiveView — Phoenix LiveView v0.20.2 and particularly where it says
You can also
live_render
from any template:
So I’ve added <%= live_render @conn, FishWeb.HeroComponent %>
to my /lib/fish_web/templates/page/index.html.eex !
Sure enough - the wrapping div is there alright
<div data-phx-session="SFMyNTY.g2gDaAJhBHQAAAAHZAACaWRtAAAAFHBoeC1GaDJRSnM1Uk5Lajlud0FEZAAKcGFyZW50X3BpZGQAA25pbGQACHJvb3RfcGlkZAADbmlsZAAJcm9vdF92aWV3ZAAcRWxpeGlyLkZpc2hXZWIuSGVyb0NvbXBvbmVudGQABnJvdXRlcmQAA25pbGQAB3Nlc3Npb250AAAAAGQABHZpZXdkABxFbGl4aXIuRmlzaFdlYi5IZXJvQ29tcG9uZW50bgYAM1NECXMBYgABUYA.R9teP9DJXvo0CtI-3vs_slQewBd3npFAySNG8adXI_U" data-phx-static="SFMyNTY.g2gDaAJhBHQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GaDJRSnM1Uk5Lajlud0FEbgYANVNECXMBYgABUYA.YimJVVUJLNLTquNglPydtN1tWdhYQnxV7K3zJmtoBHI" data-phx-view="HeroComponent" id="phx-Fh2QJs5RNKj9nwAD" class="phx-connected" data-phx-root-id="phx-Fh2QJs5RNKj9nwAD"></div>
but no content - and I change it content every 30 seconds!
I’m aware that the ‘wrapper’ has the phx-connected
class - and my log does look fairly peachy I’d say?
Erlang/OTP 22 [erts-10.4.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]
[info] Running FishWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access FishWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.10.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
webpack is watching the files…
Hash: 1c1f1dae74551e8657ce
Version: webpack 4.41.5
Time: 6936ms
Built at: 2020-07-01 9:25:26
Asset Size Chunks Chunk Names
../css/app.css 3.54 MiB app [emitted] app
../css/app.css.map 4.5 MiB app [emitted] [dev] app
../favicon.ico 1.23 KiB [emitted]
../images/phoenix.png 13.6 KiB [emitted]
../robots.txt 202 bytes [emitted]
app.js 168 KiB app [emitted] app
app.js.map 196 KiB app [emitted] [dev] app
Entrypoint app = ../css/app.css app.js ../css/app.css.map app.js.map
[0] multi ./js/app.js 28 bytes {app} [built]
[./css/app.scss] 39 bytes {app} [built]
[./js/app.js] 1.32 KiB {app} [built]
+ 6 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!css/
app.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./css/app.scss] ./node_
modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./css/app.scss 3.7 MiB {mini-css-extract-plu
gin} [built]
+ 1 hidden module
[info] GET /
[debug] Processing with FishWeb.PageController.index/2
Parameters: %{}
Pipelines: [:browser]
[info] Sent 200 in 72ms
[info] GET /
[debug] Processing with FishWeb.PageController.index/2
Parameters: %{}
Pipelines: [:browser]
[info] Sent 200 in 2ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 143µs
Transport: :websocket
Serializer: Phoenix.Socket.V2.JSONSerializer
Parameters: %{"_csrf_token" => "LiwucT0kMy8sQgIGCTUkKwAzeCszdxcqBiz3pmeg_4nGhvKzDZLob2FP", "_mounts" => "0", "vsn" => "2.0.0"}
I’m obviously doing something wrong - I just cannot put my finger on it
My GitHub repo - GitHub - wdiechmann/fish: With this repo you will have a working first stepping stone, albeit a regrettably very rudimentary one at it, to deploying Elixir/Phoenix apps using Dokku and Docker containers - has all the murky details.