Merge pull request #62 from dwyl/Update-to-Phoenix-1.6-issue-#61

Update to phoenix 1.6 issue #61 [Part 2]

Procfile

@@ -1 +1 @@
-web: MIX_ENV=prod mix ecto.migrate && mix phx.server
+web: MIX_ENV=prod mix ecto.migrate && mix assets.deploy && mix phx.server

assets/css/app.css

@@ -0,0 +1,51 @@
+/* This file is for your main application css. */
+@import "./phoenix.css";
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  padding-bottom: 1rem;
+  min-height: 100%;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Alerts and form errors */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.alert p {
+  margin-bottom: 0;
+}
+.alert:empty {
+  display: none;
+}
+

assets/css/app.scss

@@ -1,6 +1,3 @@
-/* This file is for your main application css. */
-@import "./phoenix.css";
-
 html {
   height: 100%;
   box-sizing: border-box;

assets/js/app.js

@@ -1,7 +1,8 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.scss"
+import "../css/phoenix.css"
+import "../css/app.css"
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured

config/config.exs

@@ -30,4 +30,10 @@ config :phoenix, :json_library, Jason
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env()}.exs"
 
-config :esbuild, :version, "0.13.4"
+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 :chat, ChatWeb.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

coveralls.json

@@ -8,6 +8,7 @@
     "lib/chat/application.ex",
     "lib/chat_web/router.ex",
     "lib/chat_web/views/error_helpers.ex",
-    "lib/chat_web/telemetry.ex"
+    "lib/chat_web/telemetry.ex",
+    "lib/chat_web/channels/user_socket.ex"
   ]
 }

lib/chat_web/channels/room_channel.ex

@@ -2,13 +2,13 @@ defmodule ChatWeb.RoomChannel do
   use ChatWeb, :channel
 
   @impl true
-  def join("room:lobby", payload, socket) do
-    if authorized?(payload) do
+  def join("room:lobby", _payload, socket) do
+    # if authorized?(payload) do
       send(self(), :after_join)
       {:ok, socket}
-    else
-      {:error, %{reason: "unauthorized"}}
-    end
+    # else
+    #   {:error, %{reason: "unauthorized"}}
+    # end
   end
 
   def handle_in("ping", payload, socket) do
@@ -25,9 +25,10 @@ defmodule ChatWeb.RoomChannel do
   end
 
   # Add authorization logic here as required.
-  defp authorized?(_payload) do
-    true
-  end
+  # Auth coming soon via: https://github.com/dwyl/phoenix-chat-example/issues/54 
+  # defp authorized?(_payload) do
+  #   true
+  # end
 
   @impl true
   def handle_info(:after_join, socket) do

lib/chat_web/endpoint.ex

@@ -24,7 +24,7 @@ defmodule ChatWeb.Endpoint do
     at: "/",
     from: :chat,
     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
   # :code_reloader configuration of your endpoint.

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

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Chat · Phoenix Framework</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
-    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
+    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
   </head>
   <body>
     <header>

mix.exs

@@ -87,7 +87,8 @@ defmodule Chat.Mixfile 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
 end