From d5a451b1f7222791e63d326d26b4228f3e6f72c1 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 9 Nov 2022 15:46:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20for=20workflow=20preview?=
 =?UTF-8?q?=20component=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/components/WorkflowPreview.vue | 7 ++++++-
 packages/editor-ui/src/stores/n8nRootStore.ts         | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index a2cf4d916daf4..791a7b699fb38 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -14,7 +14,7 @@
 				[$style.show]: this.showPreview,
 			}"
 			ref="preview_iframe"
-			src="/workflows/demo"
+			:src="`${rootStore.baseUrl}workflows/demo`"
 			@mouseenter="onMouseEnter"
 			@mouseleave="onMouseLeave"
 		></iframe>
@@ -25,6 +25,8 @@
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/components/mixins/showMessage';
 import { IWorkflowDb } from '../Interface';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(showMessage).extend({
 	name: 'WorkflowPreview',
@@ -64,6 +66,9 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		showPreview(): boolean {
 			return !this.loading &&
 				(
diff --git a/packages/editor-ui/src/stores/n8nRootStore.ts b/packages/editor-ui/src/stores/n8nRootStore.ts
index 37cac9c669bb6..77710ff73966c 100644
--- a/packages/editor-ui/src/stores/n8nRootStore.ts
+++ b/packages/editor-ui/src/stores/n8nRootStore.ts
@@ -1,5 +1,5 @@
 import { STORES } from '@/constants';
-import { INodeUi, IRestApiContext, RootState } from '@/Interface';
+import { IRestApiContext, RootState } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import { defineStore } from 'pinia';
 import Vue from 'vue';