prelim work on vite reload

assets/js/app.js

@@ -8,3 +8,6 @@
 // Our code
 import './ujs';
 import './when-ready';
+
+// Fallback on the dark theme for now
+import '../css/themes/dark.scss';

config/dev.exs

@@ -17,10 +17,10 @@ config :philomena, PhilomenaWeb.Endpoint,
   watchers: [
     node: [
       "node_modules/vite/bin/vite.js",
-      "build",
       "--mode",
       "development",
-      "--watch",
+      "--host",
+      "0.0.0.0",
       "--config",
       "vite.config.ts",
       cd: Path.expand("../assets", __DIR__)

config/runtime.exs

@@ -137,6 +137,9 @@ if config_env() == :prod do
 
   # Do not relax CSP in production
   config :philomena, csp_relaxed: false
+
+  # Disable Vite HMR in prod
+  config :philomena, vite_reload: false
 else
   # Don't send email in development
   config :philomena, Philomena.Mailer, adapter: Bamboo.LocalAdapter
@@ -146,4 +149,7 @@ else
 
   # Relax CSP rules in development and test servers
   config :philomena, csp_relaxed: true
+
+  # Enable Vite HMR
+  config :philomena, vite_reload: true
 end

docker-compose.yml

@@ -48,6 +48,8 @@ services:
       - postgres
       - elasticsearch
       - redis
+    ports:
+      - '5173:5173'
 
   postgres:
     image: postgres:16.2-alpine

docker/app/Dockerfile

@@ -1,4 +1,4 @@
-FROM elixir:1.16.1-alpine
+FROM elixir:1.16.2-alpine
 
 ADD https://api.github.com/repos/philomena-dev/FFmpeg/git/refs/heads/release/6.1 /tmp/ffmpeg_version.json
 RUN (echo "https://github.com/philomena-dev/prebuilt-ffmpeg/raw/master"; cat /etc/apk/repositories) > /tmp/repositories \
@@ -24,4 +24,5 @@ COPY docker/app/run-test /usr/local/bin/run-test
 COPY docker/app/safe-rsvg-convert /usr/local/bin/safe-rsvg-convert
 COPY docker/app/purge-cache /usr/local/bin/purge-cache
 ENV PATH=$PATH:/root/.cargo/bin
+EXPOSE 5173
 CMD run-development

lib/philomena_web/plugs/content_security_policy_plug.ex

@@ -24,8 +24,9 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
 
       csp_config = [
         {:default_src, ["'self'"]},
-        {:script_src, ["'self'" | script_src]},
+        {:script_src, ["'self' localhost:5173" | script_src]},
-        {:style_src, ["'self'" | style_src]},
+        {:connect_src, ["'self' ws://localhost:5173 localhost:5173"]},
+        {:style_src, ["'self' 'unsafe-inline'" | style_src]},
         {:object_src, ["'none'"]},
         {:frame_ancestors, ["'none'"]},
         {:frame_src, frame_src || ["'none'"]},

lib/philomena_web/templates/layout/app.html.slime

@@ -10,18 +10,23 @@ html lang="en"
         ' - Derpibooru
       - else
         ' Derpibooru
-    link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
-    = if is_nil(@current_user) do
-      link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
     link rel="icon" href="/favicon.ico" type="image/x-icon"
     link rel="icon" href="/favicon.svg" type="image/svg+xml"
     meta name="generator" content="philomena"
     meta name="theme-color" content="#618fc3"
     meta name="format-detection" content="telephone=no"
     = csrf_meta_tag()
-    script type="module" src=Routes.static_path(@conn, "/js/app.js") async="async"
+
+    = if vite_reload?() do
+      script type="module" src="http://localhost:5173/@vite/client"
+      script type="module" src="http://localhost:5173/js/app.js"
+    - else
+      link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
+      = if is_nil(@current_user) do
+        link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
+      script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js") async="async"
     = render PhilomenaWeb.LayoutView, "_opengraph.html", assigns
-  body data-theme=theme_name(@current_user)
+  body data-theme=theme_name(@current_user) data-vite-reload=to_string(vite_reload?())
     = render PhilomenaWeb.LayoutView, "_burger.html", assigns
     #container class=container_class(@current_user)
       = render PhilomenaWeb.LayoutView, "_header.html", assigns

lib/philomena_web/views/layout_view.ex

@@ -22,6 +22,10 @@ defmodule PhilomenaWeb.LayoutView do
     Application.get_env(:philomena, :cdn_host)
   end
 
+  def vite_reload? do
+    Application.get_env(:philomena, :vite_reload)
+  end
+
   defp ignored_tag_list(nil), do: []
   defp ignored_tag_list([]), do: []
   defp ignored_tag_list([{tag, _body, _dnp_entries}]), do: [tag.id]