update to Phoenix 1.6.2 see: dwyl/learn-phoenix#143

assets/js/socket.js

@@ -8,9 +8,7 @@
 // from the params if you are not using authentication.
 import {Socket} from "phoenix"
 
-// let socket = new Socket("/socket", {params: {token: window.userToken}})
-// https://stackoverflow.com/a/67305310/1148249
-let socket = new Socket("wss://hits.dwyl.com/socket/websocket?vsn=2.0.0")
+let socket = new Socket("/socket", {params: {token: window.userToken}})
 
 // Connect to the socket:
 socket.connect()

config/config.exs

@@ -29,3 +29,11 @@ config :phoenix, :json_library, Jason
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env()}.exs"
+
+config :esbuild,
+  version: "0.13.4",
+  default: [
+    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ]

config/dev.exs

@@ -21,13 +21,8 @@ config :hits, HitsWeb.Endpoint,
   code_reloader: true,
   check_origin: false,
   watchers: [
-    node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch-stdin",
-      cd: Path.expand("../assets", __DIR__)
-    ]
+    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
   ]
 
 # ## SSL Support

lib/hits_web/endpoint.ex

@@ -14,7 +14,7 @@ defmodule HitsWeb.Endpoint do
     at: "/",
     from: :hits,
     gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(assets fonts images favicon.ico robots.txt)
   )
 
   # Code reloading can be explicitly enabled under the

lib/hits_web/templates/layout/app.html.eex

@@ -14,6 +14,6 @@
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> -->
       <%= @inner_content %>
     </main>
-    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
   </body>
 </html>

mix.exs

@@ -4,7 +4,7 @@ defmodule Hits.MixProject do
   def project do
     [
       app: :hits,
-      version: "1.0.0",
+      version: "1.6.2",
       elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
       compilers: [:phoenix, :gettext] ++ Mix.compilers(),
@@ -42,16 +42,23 @@ defmodule Hits.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.5.3"},
-      {:phoenix_pubsub, "~> 2.0"},
-      {:phoenix_ecto, "~> 4.1"},
-      {:ecto_sql, "~> 3.4.5"},
-      {:postgrex, ">= 0.15.0"},
-      {:phoenix_html, "~> 2.14"},
+      {:phoenix, "~> 1.6.2"},
+      # {:phoenix_pubsub, "~> 2.0"},
+      {:phoenix_ecto, "~> 4.4"},
+      {:ecto_sql, "~> 3.7.0"},
+      {:postgrex, ">= 0.15.13"},
+
+      {:phoenix_html, "~> 3.0"},
+      {:phoenix_live_view, "~> 0.16.4"},
+      {:phoenix_live_dashboard, "~> 0.5"},
+      {:telemetry_metrics, "~> 0.6"},
+      {:telemetry_poller, "~> 0.5"},
+
       {:phoenix_live_reload, "~> 1.2.4", only: :dev},
-      {:gettext, "~> 0.18"},
-      {:jason, "~> 1.2.1"},
-      {:plug_cowboy, "~> 2.3"},
+      {:gettext, "~> 0.18.2"},
+      {:jason, "~> 1.2.2"},
+      {:plug_cowboy, "~> 2.5.2"},
+      {:plug_crypto, "~> 1.2.2"},
 
       # The rest of the dependendencies are for testing/reporting
       # decode .json fixture in test
@@ -61,7 +68,9 @@ defmodule Hits.MixProject do
       {:excoveralls, "~> 0.14.2", only: [:test, :dev]},
       # to generate documentation
       {:ex_doc, "~> 0.25.2", only: [:dev, :docs]},
-      {:inch_ex, "~> 2.1.0-rc.1", only: :docs}
+      {:inch_ex, "~> 2.1.0-rc.1", only: :docs},
+
+      {:esbuild, "~> 0.3.4", runtime: Mix.env() == :dev},
     ]
   end
 
@@ -77,7 +86,8 @@ defmodule Hits.MixProject do
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate", "test"],
       cover: ["coveralls.json"],
-      "cover.html": ["coveralls.html"]
+      "cover.html": ["coveralls.html"],
+      "assets.deploy": ["esbuild default --minify", "phx.digest"]
     ]
   end