@tailor-cms/tce-preview-runtime 0.2.1 → 0.4.0-beta.1

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.2.1",
+  "version": "0.4.0-beta.1",
   "dependencies": {
     "@mdi/font": "7.2.96",
     "@vitejs/plugin-vue": "4.3.4",
     "@vueuse/core": "10.4.1",
     "ky": "1.0.1",
+    "lodash": "^4.17.21",
     "sass": "1.68.0",
     "split.js": "1.6.5",
     "typescript": "5.2.2",

package/src/App.vue

@@ -5,9 +5,10 @@ import ky from 'ky';
 import AppBar from './components/AppBar.vue';
 import MainLayout from './components/MainLayout.vue';
 
-const SERVER_HOST = `localhost:${import.meta.env.VITE_TCE_SERVER_PORT || 8030}`;
-const api = ky.create({ prefixUrl: `http://${SERVER_HOST}` });
-const ws = new WebSocket(`ws://${SERVER_HOST}`);
+const appUrl = new URL(window.location.href);
+const apiPrefix = '/tce-server';
+const api = ky.create({ prefixUrl: apiPrefix });
+const ws = new WebSocket(`ws://${appUrl.host}${apiPrefix}`);
 
 const element = ref({});
 onMounted(async () => {

package/src/components/AppBar.vue

@@ -2,11 +2,11 @@
 import logoUrl from '../assets/logo.png';
 import { useGlobalState } from '../state';
 
-const { isDark, showEdit, showDisplay, showBothComponents } = useGlobalState();
+const { showEdit, showDisplay, showBothComponents } = useGlobalState();
 </script>
 
 <template>
-  <v-app-bar :color="isDark ? 'grey-darken-4' : 'grey-lighten-4'" elevation="1">
+  <v-app-bar color="blue-grey-darken-4" elevation="6">
     <template #prepend>
       <v-app-bar-nav-icon class="ml-2">
         <img :src="logoUrl" alt="Tailor logo" width="36" />
@@ -16,7 +16,7 @@ const { isDark, showEdit, showDisplay, showBothComponents } = useGlobalState();
       Content Element Kit
       <v-chip
         class="ml-3 mb-1 text-body-2"
-        color="teal-accent-4"
+        color="#23F48B"
         density="compact"
         variant="tonal"
       >
@@ -24,17 +24,13 @@ const { isDark, showEdit, showDisplay, showBothComponents } = useGlobalState();
       </v-chip>
     </v-app-bar-title>
     <v-spacer />
-    <v-btn-toggle
-      :variant="isDark ? 'flat' : 'tonal'"
-      class="mr-4"
-      density="compact"
-    >
+    <v-btn-toggle class="mr-4" density="compact">
       <v-btn @click="showEdit">
-        <span>Edit</span>
+        <span>Authoring</span>
         <v-icon end>mdi-pencil</v-icon>
       </v-btn>
       <v-btn @click="showDisplay">
-        <span>Display</span>
+        <span>End-user</span>
         <v-icon end>mdi-fullscreen</v-icon>
       </v-btn>
       <v-btn @click="showBothComponents">

package/src/components/PreviewPanel.vue

@@ -3,10 +3,10 @@
     <div :id="PANELS.EDIT" class="d-flex flex-1-1-50">
       <iframe
         :key="`author-${isLoaded ? new Date().getTime() : 0}`"
+        :src="VITE_EDIT_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
         sandbox="allow-scripts"
-        src="http://localhost:8010"
         title="Edit component container"
       >
       </iframe>
@@ -14,10 +14,10 @@
     <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
       <iframe
         :key="`display-${isLoaded ? new Date().getTime() : 0}`"
+        :src="VITE_DISPLAY_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
         sandbox="allow-scripts"
-        src="http://localhost:8020"
         title="Display component container"
       >
       </iframe>
@@ -31,6 +31,7 @@ import Split from 'split.js';
 
 import { PANELS, useGlobalState } from '../state';
 
+const { VITE_DISPLAY_RUNTIME_URL, VITE_EDIT_RUNTIME_URL } = import.meta.env;
 const { previewPanelSplit } = useGlobalState();
 
 defineProps<{ isLoaded: Boolean }>();

package/vite.config.ts

@@ -1,13 +1,36 @@
 import { defineConfig } from 'vite';
+import pick from 'lodash/pick';
 import vue from '@vitejs/plugin-vue';
 import vuetify from 'vite-plugin-vuetify';
 
+const config = pick(process.env, [
+  'EDIT_RUNTIME_URL',
+  'DISPLAY_RUNTIME_URL',
+  'SERVER_RUNTIME_URL',
+  'PREVIEW_RUNTIME_PORT',
+]);
+
+// Expose to Frontend by prefixing with VITE_
+Object.entries(config).forEach(
+  ([k, v]) => (process.env[`VITE_${k}`] = v as string),
+);
+
 // https://vitejs.dev/config/
 export default defineConfig((): any => {
   return {
     root: './src',
     server: {
-      port: 8080,
+      // Accept connections from any host (Docker)
+      host: '0.0.0.0',
+      port: parseInt(config.PREVIEW_RUNTIME_PORT, 10),
+      proxy: {
+        '/tce-server': {
+          target: config.SERVER_RUNTIME_URL,
+          ws: true,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/tce-server/, ''),
+        },
+      },
     },
     logLevel: 'warn',
     optimizeDeps: { entries: ['./src/main.js'] },