netchampfaris/frappe-ui-starter

A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps

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
• Vue Router
• Frappe UI
• TailwindCSS
• Vite

frappe-ui-starter's Issues

Build Process

Hi, I've played around with this in dev, great work man, a lot of fun. Can see myself getting swept away with ideas.

One question though, how do I get it to be a part of the bench update process for production, I think I'm missing something simple but can't figure it out.

invalid build configuration

I cloned this starter repo and created a build, this will generate a build in public folder of the app.
now when I copy the index file from the public folder and place that in www folder. all assets are missing due to invalid assets link.

Getting Vite Error: connect ECONNREFUSED

Hi,

i followed the installation steps from frappeui documentation but when starting the dev server, the ping request stay in pending and i am getting the below error from the dev server
9:36:42 PM [vite] http proxy error: Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) (x2)
I inspected the request within my browser and noticed that the ping request is sent to http://localhost:8080/api/method/ping when my backend is running on port 8000.

Vite hot reload on Windows with WSL

Hi,

I had to add the following for WSL (Docker on Windows) in vite.config.js in order to make hot reload work.

watch: { usePolling:true },

Found this solution according to this:
vitejs/vite#1153

Can you add this so other users dont run into the same issue?

Roll up fails to resolve @tiptap/prosemirror-tables

I am trying to use this starter with Frappe v14. I have created a app, installed it to a website and then cloned this repo using npx degit command mentioned in README. However, I am stuck with the below error when using with yarn dev:

yarn build results in the below error:

frappe@5e88fa44bcbc:/workspace/development/frappe-bench/apps/sampleclone/frontend$ yarn build
yarn run v1.22.19
$ vite build
vite v2.7.12 building for production...
✓ 81 modules transformed.
[vite]: Rollup failed to resolve import "@tiptap/prosemirror-tables" from "node_modules/frappe-ui/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@tiptap/prosemirror-tables" from "node_modules/frappe-ui/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/vite/dist/node/chunks/dep-0351185a.js:37915:19)
    at onwarn (/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/vite/dist/node/chunks/dep-0351185a.js:37693:13)
    at Object.onwarn (/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/rollup/dist/shared/rollup.js:23094:13)
    at ModuleLoader.handleResolveId (/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/rollup/dist/shared/rollup.js:22376:26)
    at /workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/rollup/dist/shared/rollup.js:22353:26
[!] Error: unfinished hook action(s) on exit:
(vite:css) transform "/workspace/development/frappe-bench/apps/sampleclone/frontend/src/index.css"
(vite:css) transform "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/Input.vue?vue&type=style&index=0&lang.css"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@popperjs/core/lib/createPopper.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@popperjs/core/lib/popper.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@popperjs/core/lib/popper-lite.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-table-cell/dist/tiptap-extension-table-cell.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-table-header/dist/tiptap-extension-table-header.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-table-row/dist/tiptap-extension-table-row.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/image-extension.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/video-extension.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-link/dist/tiptap-extension-link.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-typography/dist/tiptap-extension-typography.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-text-style/dist/tiptap-extension-text-style.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-highlight/dist/tiptap-extension-highlight.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/@tiptap/extension-color/dist/tiptap-extension-color.esm.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/mention.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/utils/markdown.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/prosemirror-model/dist/index.js"
(vite:css) transform "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/TextEditor.vue?vue&type=style&index=0&lang.css"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/utils.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/components/TextEditor/Menu.vue"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/src/resources/local.js"
(vite:load-fallback) load "/workspace/development/frappe-bench/apps/sampleclone/frontend/node_modules/frappe-ui/node_modules/socket.io-client/build/esm/index.js"

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.