add Dockerfile and configure production app

app/javascript/application.js

@@ -1,5 +1,8 @@
 import '@hotwired/turbo-rails'
 
+import { createApp, reactive } from 'vue'
+import TemplateBuilder from './template_builder/builder'
+
 import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
@@ -31,16 +34,8 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 
 window.customElements.define('template-builder', class extends HTMLElement {
-  async connectedCallback () {
-    const [
-      { createApp, reactive },
-      { default: TemplateBuilder }
-    ] = await Promise.all([
-      import('vue'),
-      import('./template_builder/builder')
-    ])
-
-    this.appElem = this.children[0]
+  connectedCallback () {
+    this.appElem = document.createElement('div')
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template))
@@ -55,5 +50,6 @@ window.customElements.define('template-builder', class extends HTMLElement {
 
   disconnectedCallback () {
     this.app?.unmount()
+    this.appElem?.remove()
   }
 })

app/views/templates/show.html.erb

@@ -1,31 +1 @@
-<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>">
-  <div>
-    <div style="max-width: 1600px" class="mx-auto pl-4">
-      <div class="flex justify-between py-1.5 items-center pr-4">
-        <div class="flex space-x-3">
-          <a href="/">
-            <%= render 'shared/logo', width: 40, height: 40 %>
-          </a>
-          <span class="text-3xl font-semibold focus:text-clip flex items-center">
-            <span>
-              <%= @template.name %>
-            </span>
-          </span>
-        </div>
-        <div class="space-x-3 flex items-center">
-          <button class="btn btn-primary disabled" disabled>
-            <%= svg_icon('users_plus', class: 'w-5') %>
-            Recipients
-          </button>
-          <button class="base-button disabled" disabled>
-            <%= svg_icon('device_floppy', class: 'w-5') %>
-            Save
-          </button>
-        </div>
-      </div>
-      <div class="flex items-center justify-center h-96">
-        <%= svg_icon('loader', class: 'animate-spin') %>
-      </div>
-    </div>
-  </div>
-</template-builder>
+<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>