Start app as application (#59)

* add separate endpoint for live debugger

* correct paths

* update README

* correct redirecting via button

* add default path for the file when adding button to README

* fix button in dev

* fix credo

* add default values for config

* Add conditionall adding devtools to README.md

* use Plug.Static for serving assets

* Change readme and used values by default

* update readme

* Revert "use Plug.Static for serving assets"

This reverts commit 169b4a8.

* add application

* use config values

* Revert "Revert "use Plug.Static for serving assets""

This reverts commit d026495.

* update Readme

* change readme

* add default address to README

* make debugger work on dev

* fix credo

* change moduledoc

* add name to supervisor, configure endpoint also in test

* use only LiveDebugger.PubSub

.github/workflows/assets.yaml

@@ -53,4 +53,4 @@ jobs:
         uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: Update assets
-          file_pattern: dist
+          file_pattern: priv

README.md

@@ -12,25 +12,31 @@ def deps do
 end
 ```
 
-After that you can add LiveDebugger to your router (do not put it into any `scope`):
+Then you need to configure `LiveDebugger.Endpoint` similarly to `YourApplication.Endpoint`
 
 ```elixir
-import LiveDebugger.Router
+# config/dev.exs
 
-live_debugger "/live_debug"
+config :live_debugger, LiveDebugger.Endpoint,
+  http: [port: 4007], # Add port on which you want debugger to run
+  secret_key_base: <SECRET_KEY_BASE>, # Generate secret using `mix phx.gen.secret`
+  live_view: [signing_salt: "your_signing_salt"],
+  adapter: Bandit.PhoenixAdapter # Change to your adapter if other is used
+```
 
-scope "/" do
-  pipe_through :browser
+Live debugger will be running at separate port which you've provided e.g. http://localhost:4007 .
 
-  live "/", CounterLive
-end
-```
+## Adding button
 
-And add the debug button to your live layout:
+For easy navigation add the debug button to your live layout. Remember to use it only in `:dev` environment if `:live_debugger` is installed as `only: :dev`.
 
 ```Elixir
+# lib/my_app_web/components/app.html.heex
+
 <main>
-  <LiveDebugger.debug_button redirect_url="/live_debug" socket_id={@socket.id} />
+  <%= if Mix.env() == :dev do %>
+    <LiveDebugger.Helpers.debug_button socket_id={@socket.id} />
+  <% end %>
   {@inner_content}
 </main>
 ```

config/config.exs

@@ -7,7 +7,8 @@ if config_env() == :dev do
   config :esbuild,
     version: "0.18.6",
     default: [
-      args: ~w(js/app.js --bundle --minify --sourcemap=external --target=es2020 --outdir=../dist),
+      args:
+        ~w(js/app.js --bundle --minify --sourcemap=external --target=es2020 --outdir=../priv/static/),
       cd: Path.expand("../assets", __DIR__),
       env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
     ]
@@ -18,9 +19,18 @@ if config_env() == :dev do
       args: ~w(
       --config=tailwind.config.js
       --input=css/app.css
-      --output=../dist/app.css
+      --output=../priv/static/app.css
       --minify
     ),
       cd: Path.expand("../assets", __DIR__)
     ]
 end
+
+if config_env() in [:dev, :test] do
+  config :live_debugger, LiveDebugger.Endpoint,
+    http: [port: 4007],
+    secret_key_base: "Hu4qQN3iKzTV4fJxhorPQlA/osH9fAMtbtjVS58PFgfw3ja5Z18Q/WSNR9wP4OfW",
+    live_view: [signing_salt: "your_signing_salt"],
+    adapter: Bandit.PhoenixAdapter,
+    debug_errors: true
+end

dev/layout.ex

@@ -71,7 +71,7 @@ defmodule LiveDebuggerDev.Layout do
   def render("app.html", assigns) do
     ~H"""
     <main>
-      <LiveDebugger.debug_button redirect_url="/live_debug" socket_id={@socket.id} />
+      <LiveDebugger.Helpers.debug_button socket_id={@socket.id} />
       <%= @inner_content %>
     </main>
     """

dev/router.ex

@@ -1,7 +1,6 @@
 defmodule LiveDebuggerDev.Router do
   use Phoenix.Router
   import Phoenix.LiveView.Router
-  import LiveDebugger.Router
 
   pipeline :browser do
     plug(:accepts, ["html"])
@@ -15,6 +14,5 @@ defmodule LiveDebuggerDev.Router do
 
     live("/", LiveDebuggerDev.LiveViews.Main)
     live("/side", LiveDebuggerDev.LiveViews.Side)
-    live_debugger("/live_debug")
   end
 end

dev/runner.ex

@@ -36,6 +36,11 @@ defmodule LiveDebuggerDev.Runner do
       ]
 
       {:ok, _} = Supervisor.start_link(children, strategy: :one_for_one)
+
+      # For some reason `Application.put_env` doesn't work and LiveDebugger starts without config
+      Application.stop(:live_debugger)
+      Application.start(:live_debugger)
+
       Process.sleep(:infinity)
     end)
   end

lib/live_debugger.ex

@@ -3,73 +3,20 @@ defmodule LiveDebugger do
   Debugger for LiveView applications.
   """
 
-  use Phoenix.Component
+  use Application
 
-  attr(:redirect_url, :string, required: true, doc: "The URL of the debugger, e.g. `/dbg`")
+  def start(_type, _args) do
+    check_origin = Application.get_env(:live_debugger, :check_origin, false)
 
-  attr(:socket_id, :string,
-    required: true,
-    doc: "The socket ID of the debugged LiveView"
-  )
+    children = [
+      {Phoenix.PubSub, name: LiveDebugger.PubSub},
+      {LiveDebugger.Endpoint,
+       [
+         check_origin: check_origin,
+         pubsub_server: LiveDebugger.PubSub
+       ]}
+    ]
 
-  attr(:corner, :atom,
-    default: :bottom_right,
-    doc:
-      "The corner of the screen to place the button (possible values: `:top_left`, `:top_right`, `:bottom_left`, `:bottom_right`)"
-  )
-
-  attr(:display_socket_id, :boolean,
-    default: false,
-    doc: "Whether to display the socket ID next to the button"
-  )
-
-  def debug_button(assigns) do
-    corner_css = corner_style(assigns.corner)
-
-    style = """
-      position: fixed;
-      height: 40px;
-      min-width: 40px;
-      padding-left: 5px;
-      padding-right: 5px;
-      border-radius: 10px;
-      background-color: rgba(127, 127, 127, 0.1);
-      display: flex;
-      gap: 5px;
-      justify-content: center;
-      align-items: center;
-      z-index: 9999;
-      #{corner_css}
-    """
-
-    assigns = assign(assigns, :style, style)
-
-    ~H"""
-    <div style={@style}>
-      <a id="live-debugger-button" href={"#{@redirect_url}/#{@socket_id}"} target="_blank">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          style="width: 25px; height: 25px;"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082"
-          />
-        </svg>
-      </a>
-      <span :if={@display_socket_id} style="font-size: small;"><%= @socket_id %></span>
-    </div>
-    """
+    Supervisor.start_link(children, strategy: :one_for_one, name: LiveDebugger.Supervisor)
   end
-
-  defp corner_style(:top_left), do: "top: 20px; left: 20px;"
-  defp corner_style(:top_right), do: "top: 20px; right: 20px;"
-  defp corner_style(:bottom_left), do: "bottom: 20px; left: 20px;"
-  defp corner_style(:bottom_right), do: "bottom: 20px; right: 20px;"
-  defp corner_style(_), do: ""
 end

lib/live_debugger/components.ex

@@ -5,8 +5,6 @@ defmodule LiveDebugger.Components do
 
   use Phoenix.Component
 
-  import LiveDebuggerWeb.Helpers
-
   @doc """
   Renders an alert with
   """
@@ -263,7 +261,7 @@ defmodule LiveDebugger.Components do
       <.h5 class="text-center">
         We couldn't find any LiveView associated with the given socket id
       </.h5>
-      <.link class="text-gray-600 underline" navigate={live_debugger_base_url(@socket)}>
+      <.link class="text-gray-600 underline" navigate="/">
         See available LiveSessions
       </.link>
     </div>

lib/live_debugger/endpoint.ex

@@ -0,0 +1,24 @@
+defmodule LiveDebugger.Endpoint do
+  use Phoenix.Endpoint, otp_app: :live_debugger
+
+  @session_options [
+    store: :cookie,
+    key: "_live_debugger",
+    signing_salt: "lvd_debug",
+    same_site: "Lax",
+    # 14 days
+    max_age: 14 * 24 * 60 * 60
+  ]
+
+  socket("/live", Phoenix.LiveView.Socket,
+    websocket: true,
+    longpoll: true
+  )
+
+  plug(Plug.Static, at: "/assets", from: :live_debugger, gzip: false)
+
+  plug(Plug.Session, @session_options)
+
+  plug(Plug.RequestId)
+  plug(LiveDebugger.Router)
+end

lib/live_debugger/error_view.ex

@@ -0,0 +1,5 @@
+defmodule LiveDebugger.ErrorView do
+  @moduledoc false
+
+  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
+end

lib/live_debugger/layout.ex

@@ -24,8 +24,8 @@ defmodule LiveDebugger.Layout do
         />
         <meta name="csrf-token" content={Phoenix.Controller.get_csrf_token()} />
         <title>LiveDebugger</title>
-        <link rel="stylesheet" href={asset_path(@conn, :css)} />
-        <script src={asset_path(@conn, :js)} defer>
+        <link rel="stylesheet" href="/assets/app.css" />
+        <script src="/assets/app.js" defer>
         </script>
         <%= custom_head_tags(assigns, :before_closing_head_tag) %>
       </head>
@@ -49,20 +49,6 @@ defmodule LiveDebugger.Layout do
     """
   end
 
-  @compile {:no_warn_undefined, Phoenix.VerifiedRoutes}
-
-  defp asset_path(conn, asset) when asset in [:css, :js] do
-    hash = LiveDebugger.Controllers.Assets.current_hash(asset)
-
-    prefix = conn.private.phoenix_router.live_debugger_prefix()
-
-    Phoenix.VerifiedRoutes.unverified_path(
-      conn,
-      conn.private.phoenix_router,
-      "#{prefix}/#{asset}-#{hash}"
-    )
-  end
-
   defp custom_head_tags(assigns, key) do
     case assigns do
       %{^key => components} when is_list(components) ->

lib/live_debugger/live_components/sidebar.ex

@@ -82,7 +82,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
         />
       </div>
       <div class="flex sm:hidden flex-col gap-2 w-14 pt-4 p-1 h-screen bg-primary items-center justify-start">
-        <.link patch="/live_debug/">
+        <.link patch="/">
           <.sidebar_icon_button icon="hero-home-solid" />
         </.link>
         <.sidebar_icon_button icon="hero-bars-3" phx-click="show_mobile_content" phx-target={@myself} />
@@ -128,7 +128,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
 
   defp sidebar_label(assigns) do
     ~H"""
-    <.link patch={live_debugger_base_url(@socket)}>
+    <.link patch="/">
       <.h3 class="text-white">LiveDebugger</.h3>
     </.link>
     """

lib/live_debugger/live_views/channel_dashboard.ex

@@ -71,7 +71,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboard do
     with [live_pid] <- LiveViewDiscoveryService.debugged_live_pids(),
          {:ok, %{socket: %{id: socket_id}}} <- ChannelService.state(live_pid) do
       socket
-      |> push_navigate(to: "#{live_debugger_base_url(socket)}/#{socket_id}")
+      |> push_navigate(to: "/#{socket_id}")
       |> noreply()
     else
       _ ->
@@ -166,7 +166,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboard do
   end
 
   defp assign_base_url(socket) do
-    assign(socket, :base_url, "#{live_debugger_base_url(socket)}/#{socket.assigns.socket_id}")
+    assign(socket, :base_url, "/#{socket.assigns.socket_id}")
   end
 
   defp assign_async_debugged_pid(socket) do

lib/live_debugger/live_views/sessions_dashboard.ex

@@ -49,10 +49,7 @@ defmodule LiveDebugger.LiveViews.SessionsDashboard do
                 </tr>
                 <tr :for={session <- live_sessions}>
                   <td class="text-center ">
-                    <.link
-                      class="text-primary"
-                      patch={"#{live_debugger_base_url(@socket)}/#{session.socket_id}"}
-                    >
+                    <.link class="text-primary" patch={"/#{session.socket_id}"}>
                       <%= session.module %>
                     </.link>
                   </td>