feat: Initialize App

frappe · Jul 19, 2023 · c051a71 · c051a71
1 parent 6a359b1
commit c051a71
Show file tree

Hide file tree

Showing 57 changed files with 2,074 additions and 0 deletions.
diff --git a/crm/frappe_crm/__init__.py → crm/crm/__init__.py b/crm/frappe_crm/__init__.py → crm/crm/__init__.py
diff --git a/crm/www/__init__.py b/crm/www/__init__.py
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+*.pyc
+*.egg-info
+*.swp
+tags
+crm/public/frontend
+__pycache__
diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+ "semi": false,
+ "singleQuote": true
+}
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,42 @@
+# Frappe UI Starter
+
+This template should help get you started developing custom frontend for Frappe
+apps with Vue 3 and the Frappe UI package.
+
+This boilerplate sets up Vue 3, Vue Router, TailwindCSS, and Frappe UI out of
+the box.
+
+## 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 netchampfaris/frappe-ui-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/)
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,17 @@
+<!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>Frappe CRM</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <div id="modals"></div>
+ <div id="popovers"></div>
+
+ <script> window.csrf_token = '{{ csrf_token }}'; </script>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "frappe-ui-frontend",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "feather-icons": "^4.28.0",
+ "frappe-ui": "^0.0.112",
+ "vue": "^3.2.25",
+ "vue-router": "^4.0.12"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^2.0.0",
+ "autoprefixer": "^10.4.2",
+ "postcss": "^8.4.5",
+ "tailwindcss": "^3.0.15",
+ "vite": "^2.7.2"
+ }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -0,0 +1,5 @@
+<template>
+ <div>
+ <router-view />
+ </div>
+</template>
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
@@ -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");
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -0,0 +1,2 @@
+@import './assets/Inter/inter.css';
+@import 'frappe-ui/src/style.css';
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -0,0 +1,18 @@
+import './index.css'
+
+import { createApp } from 'vue'
+import router from './router'
+import App from './App.vue'
+
+import { FrappeUI, Button, setConfig, frappeRequest, resourcesPlugin } from 'frappe-ui'
+
+let app = createApp(App)
+
+setConfig('resourceFetcher', frappeRequest)
+
+app.use(router)
+app.use(FrappeUI)
+app.use(resourcesPlugin)
+
+app.component('Button', Button)
+app.mount('#app')
diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
@@ -0,0 +1,9 @@
+<template>
+ <div>
+ <h1>{{ app_name }}</h1>
+ </div>
+</template>
+
+<script setup>
+ let app_name = 'Frappe CRM'
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+ {
+ path: '/',
+ name: 'Home',
+ component: () => import('@/pages/Home.vue'),
+ },
+]
+
+let router = createRouter({
+ history: createWebHistory('/frontend'),
+ routes,
+})
+
+export default router
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+ presets: [
+ require('frappe-ui/src/utils/tailwind.config')
+ ],
+ content: [
+ "./index.html",
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
+ "./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { getProxyOptions } from 'frappe-ui/src/utils/vite-dev-server'
+import { webserver_port } from '../../../sites/common_site_config.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+ server: {
+ port: 8080,
+ // proxy: getProxyOptions({ port: webserver_port }),
+ proxy: {
+ '^/(app|login|api|assets|files)': {
+ target: `http://127.0.0.1:${webserver_port}`,
+ ws: true,
+ router: function (req) {
+ const site_name = req.headers.host.split(':')[0]
+ return `http://${site_name}:${webserver_port}`
+ },
+ },
+ },
+ },
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src'),
+ },
+ },
+ build: {
+ outDir: `../${path.basename(path.resolve('..'))}/public/frontend`,
+ emptyOutDir: true,
+ target: 'es2015',
+ },
+ optimizeDeps: {
+ include: ['frappe-ui > feather-icons', 'showdown', 'engine.io-client'],
+ },
+})