frappe · ruchamahabal · Mar 15, 2025 · Mar 3, 2025 · Mar 4, 2025 · Mar 5, 2025
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ node_modules
 __pycache__
 studio/docs/current
 studio/public/frontend
-studio/www/studio.html
+studio/www/studio.html
+studio/templates/generators/renderer.html
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,12 +9,13 @@
 	<body>
 		<!-- For the main app builder -->
 		<div id="studio"></div>
-		<!-- For rendering apps built by studio -->
-		<div id="app"></div>
 		<div id="modals"></div>
 		<div id="popovers"></div>
 
-		<script> window.csrf_token = '{{ csrf_token }}'; </script>
+		<script>
+			window.csrf_token = '{{ csrf_token }}';
+			window.site_url = '{{ site_url }}';
+		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,8 +4,9 @@
 	"version": "0.0.0",
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build --base=/assets/studio/frontend/ && yarn copy-html-entry",
+		"build": "vite build --base=/assets/studio/frontend/ && yarn copy-html-entry && yarn copy-app-renderer",
 		"copy-html-entry": "cp ../studio/public/frontend/index.html ../studio/www/studio.html",
+		"copy-app-renderer": "cp ../studio/public/frontend/renderer.html ../studio/templates/generators/renderer.html",
 		"serve": "vite preview",
 		"extract-frappeui-types": "tsx src/scripts/tsToJSONGenerator.ts frappeui",
 		"extract-studio-types": "tsx src/scripts/tsToJSONGenerator.ts studio"

diff --git a/frontend/renderer.html b/frontend/renderer.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Built with Frappe Studio -->
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>{{ app_title }}</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<div id="modals"></div>
+		<div id="popovers"></div>
+		<script>
+			window.csrf_token = "{{ csrf_token }}";
+			window.app_name = "{{ app_name }}";
+			window.app_route = "{{ app_route }}";
+			window.app_title = "{{ app_title }}";
+			window.app_pages = {{ app_pages|tojson }};
+		</script>
+		{% if is_developer_mode %}
+			<!-- workaround for HMR in renderer during development -->
+			<script type="module" src="http://{{ site_name }}:8080/@vite/client"></script>
+			<script type="module" src="http://{{ site_name }}:8080/src/renderer.ts"></script>
+		{% else %}
+			<script type="module" src="/src/renderer.ts"></script>
+		{% endif %}
+	</body>
+</html>
diff --git a/frontend/src/assets/Inter/Inter-Black.woff b/frontend/src/assets/Inter/Inter-Black.woff
diff --git a/frontend/src/assets/Inter/Inter-Black.woff2 b/frontend/src/assets/Inter/Inter-Black.woff2
diff --git a/frontend/src/assets/Inter/Inter-BlackItalic.woff b/frontend/src/assets/Inter/Inter-BlackItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-BlackItalic.woff2 b/frontend/src/assets/Inter/Inter-BlackItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Bold.woff b/frontend/src/assets/Inter/Inter-Bold.woff
diff --git a/frontend/src/assets/Inter/Inter-Bold.woff2 b/frontend/src/assets/Inter/Inter-Bold.woff2
diff --git a/frontend/src/assets/Inter/Inter-BoldItalic.woff b/frontend/src/assets/Inter/Inter-BoldItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-BoldItalic.woff2 b/frontend/src/assets/Inter/Inter-BoldItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-ExtraBold.woff b/frontend/src/assets/Inter/Inter-ExtraBold.woff
diff --git a/frontend/src/assets/Inter/Inter-ExtraBold.woff2 b/frontend/src/assets/Inter/Inter-ExtraBold.woff2
diff --git a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2 b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-ExtraLight.woff b/frontend/src/assets/Inter/Inter-ExtraLight.woff
diff --git a/frontend/src/assets/Inter/Inter-ExtraLight.woff2 b/frontend/src/assets/Inter/Inter-ExtraLight.woff2
diff --git a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2 b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Italic.woff b/frontend/src/assets/Inter/Inter-Italic.woff
diff --git a/frontend/src/assets/Inter/Inter-Italic.woff2 b/frontend/src/assets/Inter/Inter-Italic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Light.woff b/frontend/src/assets/Inter/Inter-Light.woff
diff --git a/frontend/src/assets/Inter/Inter-Light.woff2 b/frontend/src/assets/Inter/Inter-Light.woff2
diff --git a/frontend/src/assets/Inter/Inter-LightItalic.woff b/frontend/src/assets/Inter/Inter-LightItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-LightItalic.woff2 b/frontend/src/assets/Inter/Inter-LightItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Medium.woff b/frontend/src/assets/Inter/Inter-Medium.woff
diff --git a/frontend/src/assets/Inter/Inter-Medium.woff2 b/frontend/src/assets/Inter/Inter-Medium.woff2
diff --git a/frontend/src/assets/Inter/Inter-MediumItalic.woff b/frontend/src/assets/Inter/Inter-MediumItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-MediumItalic.woff2 b/frontend/src/assets/Inter/Inter-MediumItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Regular.woff b/frontend/src/assets/Inter/Inter-Regular.woff
diff --git a/frontend/src/assets/Inter/Inter-Regular.woff2 b/frontend/src/assets/Inter/Inter-Regular.woff2
diff --git a/frontend/src/assets/Inter/Inter-SemiBold.woff b/frontend/src/assets/Inter/Inter-SemiBold.woff
diff --git a/frontend/src/assets/Inter/Inter-SemiBold.woff2 b/frontend/src/assets/Inter/Inter-SemiBold.woff2
diff --git a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2 b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-Thin.woff b/frontend/src/assets/Inter/Inter-Thin.woff
diff --git a/frontend/src/assets/Inter/Inter-Thin.woff2 b/frontend/src/assets/Inter/Inter-Thin.woff2
diff --git a/frontend/src/assets/Inter/Inter-ThinItalic.woff b/frontend/src/assets/Inter/Inter-ThinItalic.woff
diff --git a/frontend/src/assets/Inter/Inter-ThinItalic.woff2 b/frontend/src/assets/Inter/Inter-ThinItalic.woff2
diff --git a/frontend/src/assets/Inter/Inter-italic.var.woff2 b/frontend/src/assets/Inter/Inter-italic.var.woff2
diff --git a/frontend/src/assets/Inter/Inter-roman.var.woff2 b/frontend/src/assets/Inter/Inter-roman.var.woff2
diff --git a/frontend/src/assets/Inter/Inter.var.woff2 b/frontend/src/assets/Inter/Inter.var.woff2
diff --git a/frontend/src/assets/Inter/inter.css b/frontend/src/assets/Inter/inter.css
diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
@@ -18,10 +18,13 @@
 						type="text"
 						variant="outline"
 						class="w-full"
-						@input="(val: string) => (page.route = val)"
 						:modelValue="pageRoute"
 						:hideClearButton="true"
-						@update:modelValue="(val: string) => store.updateActivePage('route', `${app?.route}/${val}`)"
+						@update:modelValue="
+							(val: string) => {
+								store.updateActivePage('route', val.startsWith('/') ? val : `/${val}`)
+							}
+						"
 					/>
 
 					<!-- App Route Prefix -->
@@ -53,10 +56,11 @@ const props = defineProps<{
 }>()
 
 const inputRef = ref<InstanceType<typeof Input> | null>(null)
-
-const pageRoute = computed(() => {
-	return props.page.route.replace(`${props.app?.route}/`, "")
-})
+const pageRoute = ref(props.page.route)
+const setPageRoute = () => {
+	// remove leading slash from route because app route prefix will be <app.route>/ so that user doesn't have to type the leading slash
+	pageRoute.value = props.page.route.replace(/^\//, "")
+}
 
 const dynamicPadding = computed(() => {
 	const prefixWidth = props.app?.route?.length * 8 + 15 // Assuming 8px per character plus 4px for padding
@@ -78,6 +82,7 @@ watch(
 		// apply dynamic padding to input element when the popover is opened
 		// to avoid overlapping with the prefix content
 		applyDynamicPadding()
+		setPageRoute()
 	},
 	{ immediate: true },
 )

diff --git a/frontend/src/components/StudioToolbar.vue b/frontend/src/components/StudioToolbar.vue
@@ -27,7 +27,7 @@
 							name="external-link"
 							v-if="store.activePage && store.activePage.published"
 							class="h-[14px] w-[14px] !text-gray-700 dark:!text-gray-200"
-							@click="store.openPageInBrowser(store.activePage)"
+							@click="store.openPageInBrowser(store.activeApp, store.activePage)"
 						>
 						</FeatherIcon>
 					</div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,2 +1,2 @@
-@import './assets/Inter/inter.css';
+@import 'frappe-ui/src/fonts/Inter/inter.css';
 @import 'frappe-ui/src/style.css';
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -2,12 +2,11 @@ import "./index.css"
 
 import { createApp } from "vue"
 import { createPinia } from "pinia"
-import studio_router from "@/router/studio_router"
 import "./setupFrappeUIResource"
-import app_router from "@/router/app_router"
+import studio_router from "@/router/studio_router"
 import App from "./App.vue"
 
-import { resourcesPlugin, FeatherIcon } from "frappe-ui"
+import { resourcesPlugin, frappeRequest } from "frappe-ui"
 import { registerGlobalComponents } from "./globals"
 
 const studio = createApp(App)
@@ -18,11 +17,23 @@ studio.use(studio_router)
 studio.use(resourcesPlugin)
 studio.use(pinia)
 registerGlobalComponents(studio)
-studio.mount("#studio")
 
-// For rendering apps built by studio
-const app = createApp(App)
-app.use(app_router)
-app.use(pinia)
-registerGlobalComponents(app)
-app.mount("#app")
+declare global {
+	interface Window {
+		site_url: string
+		[key: string]: string
+	}
+}
+
+studio_router.isReady().then(async () => {
+	if (import.meta.env.DEV) {
+		await frappeRequest({
+			url: "/api/method/studio.www.studio.get_context_for_dev",
+		}).then(async (values: Record<string, any>) => {
+			for (let key in values) {
+				window[key] = values[key]
+			}
+		})
+	}
+	studio.mount("#studio")
+})
diff --git a/frontend/src/pages/AppContainer.vue b/frontend/src/pages/AppContainer.vue
@@ -24,19 +24,18 @@ const rootBlock = ref<Block | null>(null)
 watch(
 	() => route.path,
 	async () => {
-		let { appRoute, pageRoute } = route.params as { appRoute: string; pageRoute: string[] }
+		let { pageRoute } = route.params as { pageRoute: string[] }
 		const isDynamic = route.meta?.isDynamic
-		if (appRoute === "studio") return
 
-		let currentPath = ""
+		let currentPath = "/"
 		if (isDynamic) {
 			currentPath = route.matched?.[0]?.path
 		} else if (pageRoute) {
 			currentPath = pageRoute[0]
 		}
 
 		if (currentPath) {
-			page.value = await findPageWithRoute(appRoute, currentPath)
+			page.value = await findPageWithRoute(window.app_name, currentPath)
 			if (!page.value) return
 			const blocks = jsonToJs(page.value?.blocks)
 			if (blocks) {

diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
@@ -45,29 +45,8 @@
 		>
 			<template #body-content>
 				<div class="flex flex-col gap-3">
-					<Input label="App Title" type="text" variant="outline" v-model="newApp.app_title" />
-
-					<div class="flex w-full flex-col gap-1">
-						<label class="block text-xs text-gray-600">App Route</label>
-						<div class="relative flex items-stretch">
-							<Input
-								type="text"
-								variant="outline"
-								class="w-full [&>div>input]:pl-[100px]"
-								:hideClearButton="true"
-								v-model="newApp.route"
-							/>
-
-							<!-- App Route Prefix -->
-							<div
-								class="absolute bottom-[1px] left-[1px] flex items-center rounded-l-[0.4rem] bg-gray-100 text-gray-700"
-							>
-								<span class="flex h-[1.65rem] items-center text-nowrap px-2 py-0 text-base">
-									studio-app/
-								</span>
-							</div>
-						</div>
-					</div>
+					<FormControl label="App Title" type="text" variant="outline" v-model="newApp.app_title" />
+					<FormControl label="App Route" type="text" variant="outline" v-model="newApp.route" />
 				</div>
 			</template>
 		</Dialog>
@@ -95,7 +74,7 @@ const createStudioApp = (app: NewStudioApp) => {
 	studioApps.insert
 		.submit({
 			app_title: app.app_title,
-			route: `studio-app/${app.route}`,
+			route: app.route,
 		})
 		.then((res: StudioApp) => {
 			showDialog.value = false