feat: SPA init

.gitignore

@@ -53,3 +53,6 @@ jspm_packages/
 
 # Aider AI Chat
 .aider*
+
+/forms_pro/public/frontend
+/forms_pro/www/frontend.html

forms_pro/hooks.py

@@ -237,3 +237,7 @@
 # 	"Logging DocType Name": 30  # days to retain logs
 # }
 
+
+website_route_rules = [
+	{"from_route": "/frontend/<path:app_path>", "to_route": "frontend"},
+]

forms_pro/www/frontend.py

@@ -0,0 +1,14 @@
+import frappe
+from frappe.integrations.frappe_providers.frappecloud_billing import is_fc_site
+from frappe.utils.telemetry import capture
+
+no_cache = 1
+
+
+def get_context(context):
+	csrf_token = frappe.sessions.get_csrf_token()
+	frappe.db.commit()
+	context.csrf_token = csrf_token
+	context.site_name = frappe.local.site
+	# developer mode
+	context.is_developer_mode = frappe.conf.developer_mode

frontend/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+coverage
+../<app-name>
+sites

frontend/README.md

@@ -0,0 +1,50 @@
+# Frappe UI Starter
+
+This template should help get you started developing custom frontend for Frappe
+apps with Vue 3 and the Frappe UI package.
+
+![Auth](https://user-images.githubusercontent.com/34810212/236846289-ac31c292-81ea-4456-be65-95773a4049be.png)
+
+![Home](https://user-images.githubusercontent.com/34810212/236846299-fd534e2b-1c06-4f01-a4f2-91a27547cd55.png)
+
+This boilerplate sets up Vue 3, Vue Router, TailwindCSS, and Frappe UI out of
+the box. It also has basic authentication frontend.
+
+## Docs
+
+[Frappe UI Website](https://frappeui.com)
+
+## Usage
+
+This template is meant to be cloned inside an existing Frappe App. Assuming your
+apps name is `todo`. Clone this template in the root folder of your app using `degit`.
+
+```
+cd apps/todo
+npx degit NagariaHussain/doppio_frappeui_starter frontend
+cd frontend
+yarn
+yarn dev
+```
+
+In a development environment, you need to put the below key-value pair in your `site_config.json` file:
+
+```
+"ignore_csrf": 1
+```
+
+This will prevent `CSRFToken` errors while using the vite dev server. In production environment, the `csrf_token` is attached to the `window` object in `index.html` for you.
+
+The Vite dev server will start on the port `8080`. This can be changed from `vite.config.js`.
+The development server is configured to proxy your frappe app (usually running on port `8000`). If you have a site named `todo.test`, open `http://todo.test:8080` in your browser. If you see a button named "Click to send 'ping' request", congratulations!
+
+If you notice the browser URL is `/frontend`, this is the base URL where your frontend app will run in production.
+To change this, open `src/router.js` and change the base URL passed to `createWebHistory`.
+
+## Resources
+
+- [Vue 3](https://v3.vuejs.org/guide/introduction.html)
+- [Vue Router](https://next.router.vuejs.org/guide/)
+- [Frappe UI](https://github.com/frappe/frappe-ui)
+- [TailwindCSS](https://tailwindcss.com/docs/utility-first)
+- [Vite](https://vitejs.dev/guide/)

frontend/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

frontend/biome.json

@@ -0,0 +1,31 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["dist/**", "coverage/**", "node_modules/**", "../<app-name>/**"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double",
+			"semicolons": "asNeeded"
+		}
+	}
+}

frontend/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<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>Forms Pro</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frappe-ui-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base=/assets/forms_pro/frontend/ && yarn copy-html-entry",
+    "preview": "vite preview",
+    "lint": "biome check --write .",
+    "copy-html-entry": "cp ../forms_pro/public/frontend/index.html ../forms_pro/www/frontend.html"
+  },
+  "dependencies": {
+    "feather-icons": "^4.29.2",
+    "frappe-ui": "^0.1.192",
+    "socket.io-client": "^4.7.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-v8": "^2.1.8",
+    "autoprefixer": "^10.4.2",
+    "jsdom": "^25.0.1",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.4.15",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.8"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

frontend/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+	<div>
+		<router-view />
+	</div>
+</template>

frontend/src/assets/Inter/inter.css

@@ -0,0 +1,152 @@
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 100;
+	font-display: swap;
+	src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
+		url("Inter-Thin.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 100;
+	font-display: swap;
+	src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-ThinItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 200;
+	font-display: swap;
+	src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
+		url("Inter-ExtraLight.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 200;
+	font-display: swap;
+	src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: url("Inter-Light.woff2?v=3.12") format("woff2"),
+		url("Inter-Light.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 300;
+	font-display: swap;
+	src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-LightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
+		url("Inter-Regular.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
+		url("Inter-Italic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
+		url("Inter-Medium.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-MediumItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 600;
+	font-display: swap;
+	src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
+		url("Inter-SemiBold.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 600;
+	font-display: swap;
+	src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
+		url("Inter-Bold.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-BoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 800;
+	font-display: swap;
+	src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
+		url("Inter-ExtraBold.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 800;
+	font-display: swap;
+	src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 900;
+	font-display: swap;
+	src: url("Inter-Black.woff2?v=3.12") format("woff2"),
+		url("Inter-Black.woff?v=3.12") format("woff");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 900;
+	font-display: swap;
+	src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
+		url("Inter-BlackItalic.woff?v=3.12") format("woff");
+}