live-reloading working with Tailwind in LiveView #220

dwyl · Oct 21, 2022 · a94e0a2 · a94e0a2
1 parent eb0fefc
commit a94e0a2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 23 deletions.
diff --git a/config/config.exs b/config/config.exs
@@ -36,7 +36,7 @@ import_config "#{Mix.env()}.exs"
 # https://gist.github.com/chrismccord/2ab350f154235ad4a4d0f4de6decba7b
 # Configure esbuild (the version is required)
 config :esbuild,
-  version: "0.12.18",
+  version: "0.14.29",
   default: [
     args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
     cd: Path.expand("../assets", __DIR__),

diff --git a/config/dev.exs b/config/dev.exs
@@ -20,9 +20,11 @@ config :auth, AuthWeb.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
+  secret_key_base: "aMh0TI5FqAjFd9Xa+kRAlNfq1OzVb6NmiciLcpgiuU9mpCYjc78L+5cPte+Bqo0m",
   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
 
 # ## SSL Support
@@ -56,7 +58,8 @@ config :auth, AuthWeb.Endpoint,
       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
       ~r"lib/auth_web/(live|views)/.*(ex)$",
-      ~r"lib/auth_web/templates/.*(eex)$"
+      ~r"lib/auth_web/templates/.*(eex)$",
+      ~r"lib/auth_web/live/.*(heex)$"
     ]
   ]
 

diff --git a/lib/auth_web/live/groups_live.html.heex b/lib/auth_web/live/groups_live.html.heex
@@ -1 +1,4 @@
-<h1 class="">Groups LiveView!</h1>
+<h1 class="w-full h-full text-center text-7xl text-white font-bold 
+    bg-gradient-to-r from-green-400 to-blue-500 p-4">
+  Groups LiveView!
+</h1>
diff --git a/lib/auth_web/templates/layout/live.html.heex b/lib/auth_web/templates/layout/live.html.heex
@@ -1,20 +1,17 @@
-<!-- LiveView Layout File -->
-<.container class="my-10">
-  <.alert
-    color="info"
-    class="mb-5"
-    label={live_flash(@flash, :info)}
-    phx-click="lv:clear-flash"
-    phx-value-key="info"
-  />
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title><%= assigns[:page_title] || "Auth App" %></title>
+    <%= csrf_meta_tag() %>
+    <link rel="stylesheet" href={Routes.static_path(@socket, "/assets/app.css") } />
+  </head>
+  <body class="helvetica">
 
-  <.alert
-    color="danger"
-    class="mb-5"
-    label={live_flash(@flash, :error)}
-    phx-click="lv:clear-flash"
-    phx-value-key="error"
-  />
-
-  <%= @inner_content %>
-</.container>
+    <!-- LiveView Layout File -->
+      <%= @inner_content %>
+    <script type="text/javascript" src={ Routes.static_path(@socket, "/assets/app.js")}></script>
+  </body>
+</html>